From 074ce117ba923ed7a8f987d12f62d02f31eb7431 Mon Sep 17 00:00:00 2001 From: master <> Date: Mon, 2 Feb 2026 09:27:50 +0200 Subject: [PATCH] more color theme fixtures and cleanup --- .../src/app/core/api/scoring.models.ts | 4 +- .../channel-management.component.ts | 2 +- .../components/delivery-history.component.ts | 4 +- .../components/escalation-config.component.ts | 2 +- .../notification-dashboard.component.ts | 4 +- .../notification-rule-editor.component.ts | 2 +- .../notification-rule-list.component.ts | 2 +- .../operator-override-management.component.ts | 2 +- .../components/operator-override.component.ts | 2 +- .../quiet-hours-config.component.ts | 2 +- .../components/rule-simulator.component.ts | 2 +- .../components/template-editor.component.ts | 2 +- .../components/throttle-config.component.ts | 2 +- .../chat/action-button.component.ts | 4 +- .../features/advisory-ai/chat/chat.models.ts | 2 +- .../chat/object-link-chip.component.ts | 2 +- .../agents/agent-fleet-dashboard.component.ts | 2 +- .../agents/agent-onboard-wizard.component.ts | 2 +- .../agent-action-modal.component.ts | 2 +- .../agent-health-tab.component.ts | 2 +- .../analytics/sbom-lake-page.component.ts | 64 +++++----- .../aoc-compliance-dashboard.component.ts | 2 +- .../compliance-report.component.ts | 2 +- .../provenance-validator.component.ts | 2 +- .../approval-detail-page.component.ts | 52 ++++---- .../approvals/approval-detail.component.ts | 4 +- .../approvals-inbox-page.component.ts | 18 +-- .../approvals/approvals-inbox.component.ts | 18 +-- .../request-exception-modal.component.ts | 50 ++++---- .../audit-log/audit-anomalies.component.ts | 4 +- .../audit-log/audit-authority.component.ts | 2 +- .../audit-log/audit-export.component.ts | 4 +- .../audit-log-dashboard.component.ts | 2 +- .../audit-log/audit-log-table.component.ts | 4 +- .../audit-log/audit-policy.component.ts | 2 +- .../audit-timeline-search.component.ts | 2 +- .../features/auth/auth-callback.component.ts | 2 +- .../binary-index-ops.component.ts | 96 +++++++------- .../change-trace-viewer.component.ts | 2 +- .../graph-mini-map.component.ts | 4 +- .../configuration-pane.component.ts | 2 +- .../integration-detail.component.ts | 4 +- .../integration-section.component.ts | 4 +- .../branding/branding-editor.component.ts | 2 +- .../clients/clients-list.component.ts | 6 +- .../roles/roles-list.component.ts | 4 +- .../tenants/tenants-list.component.ts | 8 +- .../users/users-list.component.ts | 6 +- .../control-plane-dashboard.component.ts | 40 +++--- .../dashboard/ai-risk-drivers.component.ts | 2 +- .../deadletter-dashboard.component.ts | 2 +- .../deadletter-entry-detail.component.ts | 2 +- .../deployment-detail-page.component.ts | 42 +++--- .../deployments-list-page.component.ts | 12 +- .../evidence-viewer.component.ts | 18 +-- .../export-dialog/export-dialog.component.ts | 28 ++-- .../remediation-panel.component.ts | 24 ++-- .../summary-strip/summary-strip.component.ts | 10 +- .../environment-detail-page.component.ts | 56 ++++---- .../environments-list-page.component.ts | 10 +- .../evidence-center-page.component.ts | 34 ++--- .../evidence-packet-page.component.ts | 38 +++--- .../audit-bundle-create-modal.component.ts | 64 +++++----- .../feed-mirror/airgap-export.component.ts | 68 +++++----- .../feed-mirror/airgap-import.component.ts | 44 +++---- .../feed-mirror-dashboard.component.ts | 42 +++--- .../feed-version-lock.component.ts | 52 ++++---- .../freshness-warnings.component.ts | 12 +- .../feed-mirror/mirror-detail.component.ts | 54 ++++---- .../feed-mirror/mirror-list.component.ts | 42 +++--- .../offline-sync-status.component.ts | 14 +- .../feed-mirror/snapshot-actions.component.ts | 16 +-- .../snapshot-selector.component.ts | 34 ++--- .../sync-status-indicator.component.ts | 12 +- .../feed-mirror/version-lock.component.ts | 60 ++++----- .../features/graph/graph-canvas.component.ts | 38 +++--- .../features/graph/graph-filters.component.ts | 74 +++++------ .../graph/graph-hotkey-help.component.ts | 30 ++--- .../graph/graph-overlays.component.ts | 72 +++++------ .../graph/graph-side-panels.component.ts | 106 ++++++++-------- .../integration-detail.component.ts | 4 +- .../integration-hub.component.ts | 2 +- .../integration-list.component.ts | 2 +- .../components/issuer-detail.component.ts | 14 +- .../components/issuer-editor.component.ts | 14 +- .../components/issuer-list.component.ts | 16 +-- .../components/key-rotation.component.ts | 16 +-- .../issuer-trust/issuer-trust.component.ts | 6 +- .../lineage-export-dialog.component.ts | 2 +- .../components/bundle-management.component.ts | 20 +-- .../components/jwks-management.component.ts | 46 +++---- .../components/offline-dashboard.component.ts | 18 +-- .../verification-center.component.ts | 20 +-- .../offline-kit/offline-kit.component.ts | 16 +-- .../airgap-mode-switch.component.ts | 20 +-- .../bundle-simulator.component.ts | 50 ++++---- .../feed-freshness-badges.component.ts | 30 ++--- .../gate-simulation-results.component.ts | 38 +++--- .../policy-preview-panel.component.ts | 44 +++---- .../profile-selector.component.ts | 22 ++-- .../conflict-resolution-wizard.component.ts | 102 +++++++-------- .../governance-audit.component.ts | 46 +++---- .../impact-preview.component.ts | 42 +++--- .../policy-conflict-dashboard.component.ts | 54 ++++---- .../policy-governance.component.ts | 14 +- .../policy-validator.component.ts | 42 +++--- .../risk-budget-config.component.ts | 34 ++--- .../risk-budget-dashboard.component.ts | 40 +++--- .../risk-profile-editor.component.ts | 42 +++--- .../risk-profile-list.component.ts | 40 +++--- .../schema-docs.component.ts | 82 ++++++------ .../schema-playground.component.ts | 62 ++++----- .../sealed-mode-control.component.ts | 50 ++++---- .../sealed-mode-overrides.component.ts | 58 ++++----- .../staleness-config.component.ts | 38 +++--- .../trust-weighting.component.ts | 54 ++++---- .../batch-evaluation.component.ts | 114 ++++++++--------- .../conflict-detection.component.ts | 94 +++++++------- .../coverage-fixture.component.ts | 64 +++++----- .../effective-policy-viewer.component.ts | 50 ++++---- .../policy-audit-log.component.ts | 44 +++---- .../policy-diff-viewer.component.ts | 34 ++--- .../policy-exception.component.ts | 64 +++++----- .../policy-lint.component.ts | 50 ++++---- .../policy-merge-preview.component.ts | 60 ++++----- .../policy-simulation.component.ts | 10 +- .../promotion-gate.component.ts | 48 +++---- .../shadow-mode-dashboard.component.ts | 46 +++---- .../shadow-mode-indicator.component.ts | 14 +- .../simulation-console.component.ts | 56 ++++---- .../simulation-dashboard.component.ts | 20 +-- .../simulation-history.component.ts | 74 +++++------ .../approvals/policy-approvals.component.ts | 40 +++--- .../dashboard/policy-dashboard.component.ts | 18 +-- .../editor/policy-editor.component.ts | 8 +- .../explain/policy-explain.component.ts | 4 +- .../policy-rule-builder.component.ts | 8 +- .../simulation/policy-simulation.component.ts | 30 ++--- .../workspace/policy-workspace.component.ts | 14 +- .../yaml/policy-yaml-editor.component.ts | 12 +- .../policy/policy-studio.component.ts | 76 +++++------ .../proof-chain/proof-chain.component.ts | 2 +- .../quota-alert-config.component.ts | 2 +- .../quota-forecast.component.ts | 2 +- .../quota-report-export.component.ts | 2 +- .../tenant-quota-detail.component.ts | 2 +- .../reachability-center.component.ts | 20 +-- .../reachability-explain.component.ts | 14 +- .../reachability-why-drawer.component.ts | 30 ++--- .../reachability/witness-page.component.ts | 48 +++---- .../components/plan-audit.component.ts | 22 ++-- .../components/plan-editor.component.ts | 22 ++-- .../components/plan-list.component.ts | 22 ++-- .../registry-admin.component.ts | 8 +- .../environment-settings.component.ts | 2 +- .../freeze-window-editor.component.ts | 2 +- .../target-list/target-list.component.ts | 2 +- .../environment-detail.component.ts | 2 +- .../environment-list.component.ts | 2 +- .../evidence-detail.component.ts | 6 +- .../create-release.component.ts | 2 +- .../release-detail.component.ts | 2 +- .../release-list/release-list.component.ts | 2 +- .../workflow-editor.component.ts | 2 +- .../policy-gate-indicator.component.ts | 24 ++-- .../releases/release-detail-page.component.ts | 54 ++++---- .../releases/releases-list-page.component.ts | 32 ++--- .../releases/remediation-hints.component.ts | 36 +++--- .../create-exception-modal.component.ts | 2 +- .../components/sbom-diff-panel.component.ts | 2 +- .../source-wizard/source-wizard.component.ts | 2 +- .../components/analyzer-health.component.ts | 10 +- .../components/baseline-list.component.ts | 8 +- .../determinism-settings.component.ts | 12 +- .../components/offline-kit-list.component.ts | 14 +- .../performance-baseline.component.ts | 16 +-- .../scanner-ops/scanner-ops.component.ts | 8 +- .../alert-destination-config.component.ts | 2 +- .../exception-form.component.ts | 2 +- .../exception-manager.component.ts | 2 +- .../finding-detail-drawer.component.ts | 2 +- .../security/artifacts-page.component.ts | 10 +- .../security/exceptions-page.component.ts | 10 +- .../security-findings-page.component.ts | 34 ++--- .../security-overview-page.component.ts | 34 ++--- .../security/vex-hub-page.component.ts | 24 ++-- .../vulnerability-detail-page.component.ts | 40 +++--- .../admin/admin-settings-page.component.ts | 18 +-- .../settings/ai-preferences.component.ts | 2 +- .../branding-settings-page.component.ts | 16 +-- .../integration-detail-page.component.ts | 12 +- .../integrations-settings-page.component.ts | 22 ++-- .../notifications-settings-page.component.ts | 12 +- ...licy-governance-settings-page.component.ts | 10 +- ...release-control-settings-page.component.ts | 8 +- .../remediation-pr-settings.component.ts | 26 ++-- .../security-data-settings-page.component.ts | 10 +- .../settings/settings-page.component.ts | 14 +- .../system/system-settings-page.component.ts | 8 +- .../trust/trust-settings-page.component.ts | 14 +- .../usage/usage-settings-page.component.ts | 14 +- .../components/setup-wizard.component.ts | 2 +- .../components/step-content.component.ts | 2 +- .../sources/violation-detail.component.ts | 36 +++--- .../decision-drawer-enhanced.component.ts | 2 +- .../decision-drawer.component.ts | 2 +- .../binary-diff-tab.component.ts | 2 +- .../findings-detail-page.component.ts | 2 +- .../keyboard-help/keyboard-help.component.ts | 6 +- .../risk-line/risk-line.component.ts | 28 ++-- .../signed-override-badge.component.ts | 12 +- .../triage/models/reachability.models.ts | 2 +- .../trust-admin/airgap-audit.component.ts | 32 ++--- .../certificate-inventory.component.ts | 46 +++---- .../trust-admin/incident-audit.component.ts | 38 +++--- .../issuer-trust-list.component.ts | 26 ++-- .../trust-admin/key-detail-panel.component.ts | 38 +++--- .../key-expiry-warning.component.ts | 12 +- .../key-rotation-wizard.component.ts | 32 ++--- .../signing-key-dashboard.component.ts | 20 +-- .../trust-admin/trust-admin.component.ts | 16 +-- .../trust-admin/trust-audit-log.component.ts | 30 ++--- .../trust-score-config.component.ts | 44 +++---- .../vex-hub/ai-consent-gate.component.ts | 52 ++++---- .../vex-hub/ai-explain-panel.component.ts | 70 +++++----- .../vex-hub/ai-justify-panel.component.ts | 94 +++++++------- .../vex-hub/ai-remediate-panel.component.ts | 120 +++++++++--------- .../vex-conflict-resolution.component.ts | 88 ++++++------- .../vex-hub/vex-consensus.component.ts | 112 ++++++++-------- .../vex-hub/vex-create-workflow.component.ts | 104 +++++++-------- .../vex-hub/vex-hub-dashboard.component.ts | 58 ++++----- .../vex-hub/vex-hub-stats.component.ts | 76 +++++------ .../vex-statement-detail-panel.component.ts | 86 ++++++------- .../vex-hub/vex-statement-detail.component.ts | 64 +++++----- .../vex-hub/vex-statement-search.component.ts | 86 ++++++------- .../trust-algebra/replay-button.component.ts | 2 +- .../welcome/welcome-page.component.ts | 8 +- .../app-sidebar/app-sidebar.component.ts | 12 +- .../sidebar-nav-group.component.ts | 4 +- .../app-sidebar/sidebar-nav-item.component.ts | 4 +- .../layout/app-topbar/app-topbar.component.ts | 8 +- .../layout/breadcrumb/breadcrumb.component.ts | 8 +- .../evidence-mode-chip.component.ts | 4 +- .../global-search/global-search.component.ts | 28 ++-- .../overlay-host/overlay-host.component.ts | 24 ++-- .../ai/llm-unavailable.component.ts | 2 +- .../components/avatar/avatar.component.ts | 2 +- .../components/badge/badge.component.ts | 2 +- .../bundle-freshness-widget.component.ts | 14 +- .../components/button/button.component.ts | 2 +- .../confirm-dialog.component.ts | 4 +- .../components/dropdown/dropdown.component.ts | 2 +- .../empty-state/empty-state.component.ts | 2 +- .../components/exception-badge.component.ts | 22 ++-- .../components/exception-explain.component.ts | 36 +++--- .../manifest-validator.component.ts | 28 ++-- .../offline-verification.component.ts | 42 +++--- .../pagination/pagination.component.ts | 4 +- .../placeholder-page.component.ts | 8 +- .../policy-pack-selector.component.ts | 26 ++-- .../theme-toggle/theme-toggle.component.ts | 2 +- .../components/tooltip/tooltip.component.ts | 4 +- .../unwitnessed-advisory.component.ts | 2 +- .../digest-chip/digest-chip.component.ts | 2 +- .../evidence-link/evidence-link.component.ts | 6 +- .../gate-summary-panel.component.ts | 40 +++--- .../witness-path-preview.component.ts | 10 +- .../evidence-packet-drawer.component.ts | 52 ++++---- .../finding-detail-drawer.component.ts | 78 ++++++------ .../shared/services/graph-export.service.ts | 2 +- .../copy-to-clipboard.component.ts | 8 +- .../ui/empty-state/empty-state.component.ts | 6 +- .../ui/filter-bar/filter-bar.component.ts | 16 +-- .../ui/inline-code/inline-code.component.ts | 6 +- .../ui/metric-card/metric-card.component.ts | 8 +- .../ui/page-header/page-header.component.ts | 4 +- .../ui/split-pane/split-pane.component.ts | 8 +- .../ui/tabbed-nav/tabbed-nav.component.ts | 6 +- .../timeline-list/timeline-list.component.ts | 10 +- .../witness-viewer.component.ts | 2 +- src/Web/StellaOps.Web/src/styles/_forms.scss | 2 +- src/Web/StellaOps.Web/src/styles/_mixins.scss | 50 ++++---- .../src/styles/tokens/_colors.scss | 31 +++-- 283 files changed, 3359 insertions(+), 3344 deletions(-) diff --git a/src/Web/StellaOps.Web/src/app/core/api/scoring.models.ts b/src/Web/StellaOps.Web/src/app/core/api/scoring.models.ts index ac484cef6..63c995a3e 100644 --- a/src/Web/StellaOps.Web/src/app/core/api/scoring.models.ts +++ b/src/Web/StellaOps.Web/src/app/core/api/scoring.models.ts @@ -436,7 +436,7 @@ export const BUCKET_DISPLAY: BucketDisplayInfo[] = [ minScore: 70, maxScore: 89, backgroundColor: '#F59E0B', // amber-500 - textColor: '#000000', + textColor: '#1C1200', }, { bucket: 'Investigate', @@ -722,7 +722,7 @@ export const UNKNOWNS_BAND_DISPLAY: UnknownsBandDisplayInfo[] = [ minU: 0.2, maxU: 0.4, backgroundColor: '#CA8A04', // yellow-600 - textColor: '#FFFFFF', + textColor: '#1C1200', lightBackground: '#FEF9C3', // yellow-100 }, { diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/channel-management.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/channel-management.component.ts index ace16d86b..ab45ba2e2 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/channel-management.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/channel-management.component.ts @@ -648,7 +648,7 @@ interface ChannelTypeOption { .btn-primary { background: #1976d2; - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/delivery-history.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/delivery-history.component.ts index cbd335780..3f260e02a 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/delivery-history.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/delivery-history.component.ts @@ -329,7 +329,7 @@ import { gap: 1.5rem; margin-bottom: 1.5rem; padding: 1rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 8px; flex-wrap: wrap; } @@ -392,7 +392,7 @@ import { cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .table-container { diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/escalation-config.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/escalation-config.component.ts index 3f406f6bb..7a2072267 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/escalation-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/escalation-config.component.ts @@ -251,7 +251,7 @@ import { .section-header p { margin: 0; color: #6b7280; font-size: 0.875rem; } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-dashboard.component.ts index e01844f21..23bd53e6a 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-dashboard.component.ts @@ -288,7 +288,7 @@ interface ConfigSubTab { .tab-button:hover { color: #1976d2; - background: #f8fafc; + background: #FFFCF5; } .tab-button.active { @@ -390,7 +390,7 @@ interface ConfigSubTab { .btn-primary { background: #1976d2; - color: white; + color: #1C1200; border-color: #1976d2; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-editor.component.ts index 303922f47..2577464b9 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-editor.component.ts @@ -407,7 +407,7 @@ import { .btn-primary { background: #1976d2; - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-list.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-list.component.ts index 4d02f789c..d8bc76b93 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/notification-rule-list.component.ts @@ -234,7 +234,7 @@ import { NotifierRule, NotifierRuleStatus, NotifierSeverity } from '../../../cor .btn-primary { background: #1976d2; - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override-management.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override-management.component.ts index 46c7b07c4..13ad40d56 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override-management.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override-management.component.ts @@ -280,7 +280,7 @@ import { } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-icon { padding: 0.25rem 0.5rem; background: transparent; border: none; color: #1976d2; font-size: 0.75rem; cursor: pointer; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override.component.ts index 66d3b870a..5c96b32c1 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/operator-override.component.ts @@ -327,7 +327,7 @@ import { .section-header p { margin: 0; color: #6b7280; font-size: 0.875rem; } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .btn-icon { padding: 0.25rem 0.5rem; background: transparent; border: none; color: #1976d2; font-size: 0.75rem; cursor: pointer; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/quiet-hours-config.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/quiet-hours-config.component.ts index 11d09f0a1..99ad188bd 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/quiet-hours-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/quiet-hours-config.component.ts @@ -232,7 +232,7 @@ import { NotifierQuietHours, NotifierQuietHoursRequest, NotifierQuietWindow } fr .section-header p { margin: 0; color: #6b7280; font-size: 0.875rem; } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .btn-icon { padding: 0.25rem 0.5rem; background: transparent; border: none; color: #1976d2; font-size: 0.75rem; cursor: pointer; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/rule-simulator.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/rule-simulator.component.ts index 8a6df941f..7a20c6d5a 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/rule-simulator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/rule-simulator.component.ts @@ -341,7 +341,7 @@ import { flex: 1; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/template-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/template-editor.component.ts index 88fe9072c..bbfb52c91 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/template-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/template-editor.component.ts @@ -346,7 +346,7 @@ import { cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/throttle-config.component.ts b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/throttle-config.component.ts index 99eee27ff..47bc5e8bb 100644 --- a/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/throttle-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/admin-notifications/components/throttle-config.component.ts @@ -295,7 +295,7 @@ type ThrottleScope = 'global' | 'channel' | 'rule' | 'event'; .section-header p { margin: 0; color: #6b7280; font-size: 0.875rem; } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn-primary { background: #1976d2; color: white; border: none; } + .btn-primary { background: #1976d2; color: #1C1200; border: none; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-secondary { background: white; color: #374151; border: 1px solid #d1d5db; } .btn-icon { padding: 0.25rem 0.5rem; background: transparent; border: none; color: #1976d2; font-size: 0.75rem; cursor: pointer; } diff --git a/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/action-button.component.ts b/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/action-button.component.ts index 8b7d41dd3..5004c865f 100644 --- a/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/action-button.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/action-button.component.ts @@ -147,7 +147,7 @@ import { ProposedAction, ActionType, ACTION_TYPE_METADATA } from './chat.models' /* Variants */ .action-button.variant--primary { background: var(--color-primary, #3b82f6); - color: white; + color: #1C1200; } .action-button.variant--primary:hover:not(:disabled) { background: var(--color-primary-hover, #2563eb); @@ -155,7 +155,7 @@ import { ProposedAction, ActionType, ACTION_TYPE_METADATA } from './chat.models' .action-button.variant--danger { background: var(--color-danger, #ef4444); - color: white; + color: #1C1200; } .action-button.variant--danger:hover:not(:disabled) { background: var(--color-danger-hover, #dc2626); diff --git a/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.models.ts b/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.models.ts index 71e0bcc6a..ee83c9a5e 100644 --- a/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.models.ts +++ b/src/Web/StellaOps.Web/src/app/features/advisory-ai/chat/chat.models.ts @@ -216,7 +216,7 @@ export const OBJECT_LINK_METADATA: Record = { .btn--primary { background: var(--primary, #3b82f6); - color: white; + color: #1C1200; &:hover:not(:disabled) { background: var(--primary-hover, #2563eb); diff --git a/src/Web/StellaOps.Web/src/app/features/agents/components/agent-health-tab/agent-health-tab.component.ts b/src/Web/StellaOps.Web/src/app/features/agents/components/agent-health-tab/agent-health-tab.component.ts index ad13492a3..50ae52e5a 100644 --- a/src/Web/StellaOps.Web/src/app/features/agents/components/agent-health-tab/agent-health-tab.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/agents/components/agent-health-tab/agent-health-tab.component.ts @@ -306,7 +306,7 @@ import { AgentHealthResult } from '../../models/agent.models'; .btn--primary { background: var(--primary, #3b82f6); - color: white; + color: #1C1200; &:hover:not(:disabled) { background: var(--primary-hover, #2563eb); diff --git a/src/Web/StellaOps.Web/src/app/features/analytics/sbom-lake-page.component.ts b/src/Web/StellaOps.Web/src/app/features/analytics/sbom-lake-page.component.ts index 394ae8fca..1f47a3045 100644 --- a/src/Web/StellaOps.Web/src/app/features/analytics/sbom-lake-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/analytics/sbom-lake-page.component.ts @@ -532,12 +532,12 @@ const SEVERITY_RANK: Record = { } .page-subtitle { margin: 0; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .page-meta { margin: 0.5rem 0 0; font-size: 0.85rem; - color: var(--text-color-muted, #94a3b8); + color: var(--text-color-muted, #D4C9A8); } .page-actions { display: flex; @@ -552,7 +552,7 @@ const SEVERITY_RANK: Record = { flex-wrap: wrap; padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 10px; } .filter-group { @@ -565,28 +565,28 @@ const SEVERITY_RANK: Record = { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .filter-group select { padding: 0.5rem 0.75rem; border-radius: 6px; - border: 1px solid var(--surface-border, #e2e8f0); - background: var(--surface-ground, #f8fafc); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + background: var(--surface-ground, #FFFCF5); font-size: 0.875rem; } .btn { padding: 0.45rem 0.9rem; border-radius: 6px; - border: 1px solid var(--surface-border, #e2e8f0); - background: var(--surface-ground, #f8fafc); - color: var(--text-color, #1e293b); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + background: var(--surface-ground, #FFFCF5); + color: var(--text-color, #3D2E0A); font-size: 0.875rem; font-weight: 500; cursor: pointer; } .btn--secondary { - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); } .btn--ghost { background: transparent; @@ -621,7 +621,7 @@ const SEVERITY_RANK: Record = { } .panel { background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 12px; padding: 1rem; display: flex; @@ -642,11 +642,11 @@ const SEVERITY_RANK: Record = { .panel-subtitle { margin: 0.2rem 0 0; font-size: 0.85rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .panel-meta { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); white-space: nowrap; } .panel-body { @@ -686,11 +686,11 @@ const SEVERITY_RANK: Record = { } .metric-row__meta { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .metric-row__bar { height: 6px; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 999px; overflow: hidden; } @@ -704,7 +704,7 @@ const SEVERITY_RANK: Record = { .metric-row__value { font-size: 0.85rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .metric-row__chips { display: flex; @@ -732,8 +732,8 @@ const SEVERITY_RANK: Record = { align-items: center; padding: 0.15rem 0.4rem; border-radius: 999px; - background: var(--surface-ground, #f1f5f9); - color: var(--text-color-secondary, #64748b); + background: var(--surface-ground, #FFF9ED); + color: var(--text-color-secondary, #6B5A2E); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; @@ -747,7 +747,7 @@ const SEVERITY_RANK: Record = { gap: 0.75rem; } .coverage-stat { - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 8px; padding: 0.75rem; display: flex; @@ -760,7 +760,7 @@ const SEVERITY_RANK: Record = { } .coverage-stat__label { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .coverage-list { display: flex; @@ -779,11 +779,11 @@ const SEVERITY_RANK: Record = { } .coverage-row__meta { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .coverage-row__bar { height: 6px; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 999px; overflow: hidden; } @@ -819,7 +819,7 @@ const SEVERITY_RANK: Record = { flex-direction: column; gap: 0.4rem; font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .trend-row { display: flex; @@ -830,7 +830,7 @@ const SEVERITY_RANK: Record = { .table-container { overflow-x: auto; border-radius: 8px; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .data-table { width: 100%; @@ -841,39 +841,39 @@ const SEVERITY_RANK: Record = { .data-table td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); font-size: 0.85rem; } .data-table th { - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .table-primary { font-weight: 600; } .table-secondary { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .empty-state { font-size: 0.85rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); margin: 0; } .empty-callout { border-radius: 12px; - border: 1px dashed var(--surface-border, #e2e8f0); + border: 1px dashed var(--surface-border, rgba(212, 201, 168, 0.3)); padding: 1.5rem; text-align: center; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .empty-callout h3 { margin: 0 0 0.5rem; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } @media (max-width: 900px) { diff --git a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/aoc-compliance-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/aoc-compliance-dashboard.component.ts index de6a0cfe5..7f4ef02ec 100644 --- a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/aoc-compliance-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/aoc-compliance-dashboard.component.ts @@ -299,7 +299,7 @@ import { .btn-primary { background: var(--primary); - color: white; + color: #1C1200; } .btn-secondary { diff --git a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/compliance-report.component.ts b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/compliance-report.component.ts index a5f1c4875..93939bc66 100644 --- a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/compliance-report.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/compliance-report.component.ts @@ -108,7 +108,7 @@ import { ComplianceReportSummary, ComplianceReportRequest, ComplianceReportForma .date-range input { padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; } .checkbox, .radio { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .format-options { display: flex; gap: 1.5rem; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .report-preview { background: var(--surface-card); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .preview-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: var(--surface-elevated); border-bottom: 1px solid var(--border); } diff --git a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/provenance-validator.component.ts b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/provenance-validator.component.ts index 733861401..c1b3a26a6 100644 --- a/src/Web/StellaOps.Web/src/app/features/aoc-compliance/provenance-validator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/aoc-compliance/provenance-validator.component.ts @@ -98,7 +98,7 @@ import { ProvenanceChain, ProvenanceStep } from '../../core/api/aoc.models'; .validator-input { display: flex; gap: 0.75rem; margin-bottom: 2rem; } .validator-input select, .validator-input input { padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem; } .validator-input input { flex: 1; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .chain-result { background: var(--surface-card); border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .chain-result.complete { border-color: var(--success); } diff --git a/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail-page.component.ts b/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail-page.component.ts index ff1b6be39..0a366baa2 100644 --- a/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail-page.component.ts @@ -351,12 +351,12 @@ interface ReachabilityWitness { .status-badge--pending { background: var(--yellow-100, #fef9c3); color: var(--yellow-700, #a16207); } .status-badge--approved { background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); } .status-badge--rejected { background: var(--red-100, #fee2e2); color: var(--red-700, #b91c1c); } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); font-size: 0.875rem; } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); font-size: 0.875rem; } .digest { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; padding: 0.125rem 0.375rem; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 4px; } @@ -367,11 +367,11 @@ interface ReachabilityWitness { .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .panel-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; } - .panel-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .panel-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } .diff-summary { display: flex; gap: 1.5rem; margin-bottom: 1rem; } .diff-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } @@ -393,12 +393,12 @@ interface ReachabilityWitness { .diff-table th, .diff-table td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .diff-table th { font-size: 0.75rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } .diff-row--added { background: var(--red-50, #fef2f2); } @@ -456,20 +456,20 @@ interface ReachabilityWitness { .comments-list { margin-bottom: 1rem; } .comment { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; margin-bottom: 0.5rem; } .comment-header { display: flex; justify-content: space-between; margin-bottom: 0.25rem; } .comment-author { font-weight: 500; font-size: 0.875rem; } - .comment-time { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } + .comment-time { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } .comment-body { margin: 0; font-size: 0.875rem; } - .no-comments { color: var(--text-color-secondary, #94a3b8); font-size: 0.875rem; } + .no-comments { color: var(--text-color-secondary, #D4C9A8); font-size: 0.875rem; } .comment-form { display: flex; flex-direction: column; gap: 0.5rem; } .comment-input { width: 100%; padding: 0.5rem 0.75rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; resize: vertical; @@ -479,11 +479,11 @@ interface ReachabilityWitness { .decision-panel { padding: 1.25rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .decision-panel h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; } - .decision-info { margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .decision-info { margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } .decision-info p { margin: 0; } .decision-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .decision-options { margin-bottom: 1rem; } @@ -495,7 +495,7 @@ interface ReachabilityWitness { cursor: pointer; } .decision-result { margin-bottom: 1rem; } - .decision-time { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } + .decision-time { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } .evidence-link h4 { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; } .btn { @@ -513,11 +513,11 @@ interface ReachabilityWitness { .btn--sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .btn--lg { padding: 0.75rem 1.5rem; font-size: 1rem; } .btn--block { width: 100%; } - .btn--secondary { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } + .btn--secondary { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } .btn--success { background: var(--green-600, #16a34a); border: none; color: white; } .btn--danger { background: var(--red-600, #dc2626); border: none; color: white; } .btn--link { background: transparent; border: none; color: var(--primary-color, #3b82f6); padding: 0; } - .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: white; } + .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: #1C1200; } /* Witness Panel Styles (APPR-008 - THE MOAT) */ .witness-panel { @@ -535,9 +535,9 @@ interface ReachabilityWitness { .witness-finding { margin-bottom: 1rem; } .finding-description { font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } @@ -571,11 +571,11 @@ interface ReachabilityWitness { .state-indicator--uncertain .state-label { color: var(--yellow-700, #a16207); } .state-confidence { font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .confidence-explanation { font-size: 0.8125rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); font-style: italic; } @@ -584,14 +584,14 @@ interface ReachabilityWitness { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .callpath-visualization { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } @@ -613,10 +613,10 @@ interface ReachabilityWitness { } .node-info { display: flex; flex-direction: column; gap: 0.125rem; } .node-function { font-size: 0.8125rem; font-weight: 500; } - .node-location { font-size: 0.6875rem; color: var(--text-color-secondary, #94a3b8); } + .node-location { font-size: 0.6875rem; color: var(--text-color-secondary, #D4C9A8); } .callpath-arrow { text-align: center; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); font-size: 0.75rem; } @@ -629,7 +629,7 @@ interface ReachabilityWitness { } .analysis-item { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } .analysis-item--full { grid-column: 1 / -1; } @@ -637,7 +637,7 @@ interface ReachabilityWitness { display: block; font-size: 0.6875rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; margin-bottom: 0.25rem; } @@ -658,7 +658,7 @@ interface ReachabilityWitness { display: flex; gap: 0.5rem; padding-top: 1rem; - border-top: 1px solid var(--surface-border, #e2e8f0); + border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } @media (max-width: 1024px) { diff --git a/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail.component.ts index 622542673..a1b0a82cb 100644 --- a/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/approvals/approval-detail.component.ts @@ -50,13 +50,13 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; p { margin: 0; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .approval-detail__content { padding: 2rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } `], diff --git a/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox-page.component.ts b/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox-page.component.ts index 57dbb7669..a3b0edcb0 100644 --- a/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox-page.component.ts @@ -98,7 +98,7 @@ interface ApprovalRequest { .page-header { margin-bottom: 1.5rem; } .page-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); } .status-filter { display: flex; @@ -111,12 +111,12 @@ interface ApprovalRequest { gap: 0.5rem; padding: 0.5rem 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; cursor: pointer; } - .status-filter__btn:hover { background: var(--surface-hover, #f8fafc); } + .status-filter__btn:hover { background: var(--surface-hover, #FFFCF5); } .status-filter__btn--active { background: var(--primary-color, #3b82f6); border-color: var(--primary-color, #3b82f6); @@ -135,7 +135,7 @@ interface ApprovalRequest { display: block; padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; text-decoration: none; color: inherit; @@ -157,7 +157,7 @@ interface ApprovalRequest { margin-bottom: 0.75rem; } .approval-card__release { font-weight: 600; font-size: 1rem; } - .approval-card__route { color: var(--text-color-secondary, #64748b); } + .approval-card__route { color: var(--text-color-secondary, #6B5A2E); } .approval-card__status { margin-left: auto; padding: 0.125rem 0.5rem; @@ -179,10 +179,10 @@ interface ApprovalRequest { .approval-card__digest code { font-size: 0.75rem; padding: 0.125rem 0.375rem; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 4px; } - .approval-card__meta { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } + .approval-card__meta { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } .approval-card__indicators { display: flex; align-items: center; gap: 0.5rem; } .gate-badge { @@ -209,9 +209,9 @@ interface ApprovalRequest { .empty-state { padding: 3rem; text-align: center; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } `] diff --git a/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox.component.ts b/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox.component.ts index be789dff3..d590fa326 100644 --- a/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/approvals/approvals-inbox.component.ts @@ -102,7 +102,7 @@ import { RouterLink } from '@angular/router'; .approvals__subtitle { margin: 0; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .approvals__filters { @@ -115,7 +115,7 @@ import { RouterLink } from '@angular/router'; .filter-select, .filter-search { padding: 0.5rem 0.75rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; background: var(--surface-card, #ffffff); @@ -138,7 +138,7 @@ import { RouterLink } from '@angular/router'; .approval-card { background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; @@ -164,12 +164,12 @@ import { RouterLink } from '@angular/router'; .approval-card__flow { font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .approval-card__meta { font-size: 0.75rem; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); margin-left: auto; } @@ -177,7 +177,7 @@ import { RouterLink } from '@angular/router'; font-size: 0.875rem; margin-bottom: 1rem; padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } @@ -259,11 +259,11 @@ import { RouterLink } from '@angular/router'; } .btn--secondary { - background: var(--surface-ground, #f1f5f9); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFF9ED); + color: var(--text-color, #3D2E0A); &:hover { - background: var(--surface-hover, #e2e8f0); + background: var(--surface-hover, rgba(212, 201, 168, 0.3)); } } diff --git a/src/Web/StellaOps.Web/src/app/features/approvals/modals/request-exception-modal.component.ts b/src/Web/StellaOps.Web/src/app/features/approvals/modals/request-exception-modal.component.ts index 2b8a7233b..987a0211b 100644 --- a/src/Web/StellaOps.Web/src/app/features/approvals/modals/request-exception-modal.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/approvals/modals/request-exception-modal.component.ts @@ -306,14 +306,14 @@ export interface GateContext { align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary, #e2e8f0); + border-bottom: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); } .modal__title { margin: 0; font-size: 1.125rem; font-weight: 600; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .modal__close { @@ -322,14 +322,14 @@ export interface GateContext { background: none; border: none; border-radius: 6px; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); cursor: pointer; transition: all 0.15s ease; } .modal__close:hover { - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-primary, #1e293b); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-primary, #3D2E0A); } .modal__body { @@ -343,8 +343,8 @@ export interface GateContext { justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; - border-top: 1px solid var(--color-border-primary, #e2e8f0); - background: var(--color-surface-secondary, #f8fafc); + border-top: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); + background: var(--color-surface-secondary, #FFFCF5); border-radius: 0 0 12px 12px; } @@ -354,7 +354,7 @@ export interface GateContext { align-items: flex-start; gap: 0.75rem; padding: 1rem; - background: var(--color-surface-secondary, #f8fafc); + background: var(--color-surface-secondary, #FFFCF5); border-radius: 8px; margin-bottom: 1.5rem; } @@ -385,12 +385,12 @@ export interface GateContext { .gate-context__name { font-weight: 600; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .gate-context__reason { font-size: 0.875rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } /* Form */ @@ -413,7 +413,7 @@ export interface GateContext { .form-label { font-size: 0.875rem; font-weight: 500; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .required { @@ -422,7 +422,7 @@ export interface GateContext { .form-hint { font-size: 0.75rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .form-hint .warning { @@ -433,10 +433,10 @@ export interface GateContext { .form-select, .form-textarea { padding: 0.625rem 0.875rem; - border: 1px solid var(--color-border-primary, #e2e8f0); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); background: white; transition: border-color 0.15s ease, box-shadow 0.15s ease; } @@ -466,7 +466,7 @@ export interface GateContext { align-items: flex-start; gap: 0.75rem; padding: 0.875rem; - border: 1px solid var(--color-border-primary, #e2e8f0); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); border-radius: 8px; cursor: pointer; transition: all 0.15s ease; @@ -494,12 +494,12 @@ export interface GateContext { .radio-label strong { font-size: 0.875rem; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .radio-label small { font-size: 0.75rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } /* File Input */ @@ -520,7 +520,7 @@ export interface GateContext { align-items: center; gap: 0.375rem; padding: 1.5rem; - border: 2px dashed var(--color-border-primary, #e2e8f0); + border: 2px dashed var(--color-border-primary, rgba(212, 201, 168, 0.3)); border-radius: 8px; text-align: center; transition: all 0.15s ease; @@ -533,13 +533,13 @@ export interface GateContext { .file-input__placeholder { font-size: 0.875rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .file-input__name { font-size: 0.875rem; font-weight: 500; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .file-input__remove { @@ -627,7 +627,7 @@ export interface GateContext { .btn--primary { background: var(--color-brand-600, #2563eb); - color: white; + color: #1C1200; } .btn--primary:hover:not(:disabled) { @@ -635,13 +635,13 @@ export interface GateContext { } .btn--secondary { - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-primary, #1e293b); - border: 1px solid var(--color-border-primary, #e2e8f0); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-primary, #3D2E0A); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); } .btn--secondary:hover:not(:disabled) { - background: var(--color-surface-tertiary, #f1f5f9); + background: var(--color-surface-tertiary, #FFF9ED); } .spinner { diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-anomalies.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-anomalies.component.ts index a047f3aac..c6ba0d0c6 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-anomalies.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-anomalies.component.ts @@ -96,7 +96,7 @@ import { AuditAnomalyAlert } from '../../core/api/audit-log.models'; .description { color: var(--text-secondary); margin: 0; } .filter-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .filter-bar button { padding: 0.5rem 1rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } - .filter-bar button.active { background: var(--primary); color: white; border-color: var(--primary); } + .filter-bar button.active { background: var(--primary); color: #1C1200; border-color: var(--primary); } .alerts-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .alert-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; } .alert-card.warning { border-left: 4px solid var(--warning); } @@ -113,7 +113,7 @@ import { AuditAnomalyAlert } from '../../core/api/audit-log.models'; .alert-meta { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.75rem; } .ack-info { font-size: 0.8rem; color: var(--text-secondary); font-style: italic; } .alert-actions { display: flex; gap: 0.75rem; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } .btn-secondary { background: var(--surface-elevated); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; color: inherit; } .no-alerts { text-align: center; padding: 3rem; color: var(--text-secondary); background: var(--surface-card); border-radius: 8px; } .anomaly-types h2 { margin: 0 0 1rem; font-size: 1.1rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-authority.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-authority.component.ts index 3324d1f12..730b8708e 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-authority.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-authority.component.ts @@ -86,7 +86,7 @@ import { AuditEvent } from '../../core/api/audit-log.models'; .description { color: var(--text-secondary); margin: 0; } .tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .tabs button { padding: 0.5rem 1rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } - .tabs button.active { background: var(--primary); color: white; border-color: var(--primary); } + .tabs button.active { background: var(--primary); color: #1C1200; border-color: var(--primary); } .events-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; } .events-table th, .events-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .events-table th { background: var(--surface-elevated); font-weight: 600; font-size: 0.85rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-export.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-export.component.ts index 48ff0dfb6..a9c206596 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-export.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-export.component.ts @@ -190,7 +190,7 @@ import { AuditExportRequest, AuditExportResponse, AuditLogFilters, AuditModule, .options { display: flex; flex-direction: column; gap: 0.5rem; } .checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .actions { margin-top: 1.5rem; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .exports-list { margin-bottom: 2rem; } .exports-list h2 { margin: 0 0 1rem; font-size: 1.1rem; } @@ -203,7 +203,7 @@ import { AuditExportRequest, AuditExportResponse, AuditLogFilters, AuditModule, .badge.processing { background: #dbeafe; color: #1e40af; } .badge.completed { background: #dcfce7; color: #166534; } .badge.failed { background: #fee2e2; color: #991b1b; } - .btn-sm { display: inline-block; padding: 0.35rem 0.75rem; background: var(--primary); color: white; border-radius: 4px; text-decoration: none; font-size: 0.8rem; } + .btn-sm { display: inline-block; padding: 0.35rem 0.75rem; background: var(--primary); color: #1C1200; border-radius: 4px; text-decoration: none; font-size: 0.8rem; } .btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 4px; } .compliance-info h2 { margin: 0 0 1rem; font-size: 1.1rem; } .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-dashboard.component.ts index aac1d82d0..0af76aaa8 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-dashboard.component.ts @@ -133,7 +133,7 @@ import { AuditStatsSummary, AuditEvent, AuditAnomalyAlert, AuditModule } from '. .page-header h1 { margin: 0 0 0.25rem; } .description { color: var(--text-secondary); margin: 0 0 1rem; } .header-actions { display: flex; gap: 0.75rem; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; } .btn-secondary { background: var(--surface-elevated); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; color: inherit; } .stats-strip { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .stat-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.5rem; min-width: 120px; text-align: center; } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-table.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-table.component.ts index 685278f52..61029c95f 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-table.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-log-table.component.ts @@ -254,7 +254,7 @@ import { AuditEvent, AuditLogFilters, AuditModule, AuditAction, AuditSeverity } .search-group { flex: 1; min-width: 200px; flex-direction: row; align-items: flex-end; } .search-group label { display: none; } .search-group input { flex: 1; } - .btn-sm { padding: 0.5rem 0.75rem; cursor: pointer; background: var(--primary); color: white; border: none; border-radius: 4px; } + .btn-sm { padding: 0.5rem 0.75rem; cursor: pointer; background: var(--primary); color: #1C1200; border: none; border-radius: 4px; } .btn-secondary { padding: 0.5rem 1rem; cursor: pointer; background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 4px; align-self: flex-end; } .loading { text-align: center; padding: 3rem; color: var(--text-secondary); } .events-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } @@ -304,7 +304,7 @@ import { AuditEvent, AuditLogFilters, AuditModule, AuditAction, AuditSeverity } .detail-section { margin-top: 1rem; } .detail-section h4 { margin: 0 0 0.5rem; font-size: 0.9rem; } .json-block { background: var(--surface-elevated); padding: 0.75rem; border-radius: 4px; font-size: 0.75rem; overflow-x: auto; max-height: 200px; } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; margin-top: 1rem; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; margin-top: 1rem; } .diff-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; } .diff-modal { background: var(--surface-card); border-radius: 8px; width: 90%; max-width: 1000px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border); } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-policy.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-policy.component.ts index 8f80dd018..b7245ea7c 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-policy.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-policy.component.ts @@ -86,7 +86,7 @@ import { AuditEvent } from '../../core/api/audit-log.models'; .description { color: var(--text-secondary); margin: 0; } .event-categories { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .event-categories button { padding: 0.5rem 1rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } - .event-categories button.active { background: var(--primary); color: white; border-color: var(--primary); } + .event-categories button.active { background: var(--primary); color: #1C1200; border-color: var(--primary); } .events-table { width: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; } .events-table th, .events-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .events-table th { background: var(--surface-elevated); font-weight: 600; font-size: 0.85rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-timeline-search.component.ts b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-timeline-search.component.ts index f82ae06d0..11d491a4c 100644 --- a/src/Web/StellaOps.Web/src/app/features/audit-log/audit-timeline-search.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/audit-log/audit-timeline-search.component.ts @@ -77,7 +77,7 @@ import { AuditTimelineEntry } from '../../core/api/audit-log.models'; .date-filters { display: flex; align-items: center; gap: 0.5rem; } .date-filters input { padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; } .date-filters span { color: var(--text-secondary); } - .btn-primary { background: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; } + .btn-primary { background: var(--primary); color: #1C1200; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; cursor: pointer; } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .timeline { position: relative; } .timeline-entry { display: flex; gap: 1rem; margin-bottom: 1.5rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/auth/auth-callback.component.ts b/src/Web/StellaOps.Web/src/app/features/auth/auth-callback.component.ts index 65d920a47..bf0055cc8 100644 --- a/src/Web/StellaOps.Web/src/app/features/auth/auth-callback.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/auth/auth-callback.component.ts @@ -23,7 +23,7 @@ import { AuthorityAuthService } from '../../core/auth/authority-auth.service'; max-width: 420px; text-align: center; font-size: 1rem; - color: #0f172a; + color: #1C1200; } .error { diff --git a/src/Web/StellaOps.Web/src/app/features/binary-index/binary-index-ops.component.ts b/src/Web/StellaOps.Web/src/app/features/binary-index/binary-index-ops.component.ts index 3bfec78b4..07a66e5ae 100644 --- a/src/Web/StellaOps.Web/src/app/features/binary-index/binary-index-ops.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/binary-index/binary-index-ops.component.ts @@ -637,12 +637,12 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; margin: 0 0 0.25rem 0; font-size: 1.5rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .binidx-ops__subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; } .binidx-ops__status { @@ -663,17 +663,17 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .status-badge--healthy { background: #14532d; color: #86efac; } .status-badge--degraded { background: #713f12; color: #fde047; } .status-badge--unhealthy { background: #450a0a; color: #fca5a5; } - .status-badge--unknown { background: #1e293b; color: #94a3b8; } + .status-badge--unknown { background: #3D2E0A; color: #D4C9A8; } .status-timestamp { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .binidx-ops__tabs { display: flex; gap: 0; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; margin-bottom: 1.5rem; } @@ -682,14 +682,14 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; background: transparent; border: none; border-bottom: 2px solid transparent; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; font-size: 0.875rem; transition: all 0.15s ease; } .binidx-ops__tab:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .binidx-ops__tab--active { @@ -704,7 +704,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .loading-state, .empty-state { padding: 3rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .error-state { @@ -750,7 +750,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; margin: 1.5rem 0 1rem 0; font-size: 1rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .section-title:first-child { @@ -769,8 +769,8 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; flex-direction: column; gap: 0.25rem; padding: 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 4px; } @@ -781,7 +781,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .lifter-isa { font-family: ui-monospace, monospace; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .lifter-status { @@ -790,7 +790,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .lifter-pool, .lifter-last-used { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .health-table, .bench-table, .config-table { @@ -802,20 +802,20 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .bench-table th, .bench-table td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; } .health-table th, .bench-table th { font-weight: 500; - color: #94a3b8; - background: #0f172a; + color: #D4C9A8; + background: #1C1200; } .cache-status-row { display: flex; gap: 2rem; padding: 1rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; } @@ -850,7 +850,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .bench-note { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } .latency-grid { @@ -864,20 +864,20 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; flex-direction: column; align-items: center; padding: 1rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; } .latency-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } .latency-value { font-size: 1.25rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .status--success { color: #4ade80; } @@ -888,7 +888,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; gap: 2rem; margin-top: 1rem; font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } /* Cache Tab */ @@ -902,19 +902,19 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; display: flex; flex-direction: column; padding: 1rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; } .cache-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.25rem; } .cache-value { font-weight: 500; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .stats-grid { @@ -928,7 +928,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; flex-direction: column; align-items: center; padding: 1.25rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; } @@ -940,12 +940,12 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .stat-value { font-size: 1.5rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .stat-label { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; margin-top: 0.25rem; } @@ -968,14 +968,14 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; } .config-table { - background: #1e293b; + background: #3D2E0A; border-radius: 4px; overflow: hidden; } .config-table td { padding: 0.75rem 1rem; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; } .config-table tr:last-child td { @@ -983,12 +983,12 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; } .config-table td:first-child { - color: #94a3b8; + color: #D4C9A8; width: 40%; } .config-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .config-value.monospace { @@ -1016,7 +1016,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-label { display: block; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.375rem; text-transform: uppercase; } @@ -1024,10 +1024,10 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-input { width: 100%; padding: 0.625rem 0.875rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-family: ui-monospace, monospace; font-size: 0.875rem; } @@ -1039,10 +1039,10 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-select { padding: 0.625rem 0.875rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; cursor: pointer; } @@ -1090,20 +1090,20 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; display: flex; flex-direction: column; padding: 1rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; } .fingerprint-stat-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.25rem; } .fingerprint-stat-value { font-size: 1.125rem; font-weight: 500; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .fingerprint-actions { @@ -1129,7 +1129,7 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-meta { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } .fingerprint-table { @@ -1142,13 +1142,13 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-table td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; } .fingerprint-table th { font-weight: 500; - color: #94a3b8; - background: #0f172a; + color: #D4C9A8; + background: #1C1200; } .fingerprint-table .monospace { @@ -1157,12 +1157,12 @@ type Tab = 'health' | 'bench' | 'cache' | 'config' | 'fingerprint'; .fingerprint-table .hash-cell { font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .table-overflow { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; font-style: italic; } diff --git a/src/Web/StellaOps.Web/src/app/features/change-trace/change-trace-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/change-trace/change-trace-viewer.component.ts index d2ef608fb..c8f613c7a 100644 --- a/src/Web/StellaOps.Web/src/app/features/change-trace/change-trace-viewer.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/change-trace/change-trace-viewer.component.ts @@ -152,7 +152,7 @@ import { ChangeTraceService } from './services/change-trace.service'; .btn-primary { background: var(--color-primary, #2563eb); - color: white; + color: #1C1200; &:hover:not(:disabled) { background: var(--color-primary-hover, #1d4ed8); diff --git a/src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts b/src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts index 44cc3097a..69c897b5c 100644 --- a/src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/compare/components/graph-mini-map/graph-mini-map.component.ts @@ -93,7 +93,7 @@ export class GraphMiniMapComponent implements AfterViewInit, OnDestroy { const height = rect.height; // Clear - this.ctx.fillStyle = '#f8fafc'; + this.ctx.fillStyle = '#FFFCF5'; this.ctx.fillRect(0, 0, width, height); const nodes = this.nodes(); @@ -134,7 +134,7 @@ export class GraphMiniMapComponent implements AfterViewInit, OnDestroy { this.ctx.fillStyle = '#f59e0b'; break; default: - this.ctx.fillStyle = '#94a3b8'; + this.ctx.fillStyle = '#D4C9A8'; } this.ctx.fill(); diff --git a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/configuration-pane.component.ts b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/configuration-pane.component.ts index a7d9e5265..4ce97d264 100644 --- a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/configuration-pane.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/configuration-pane.component.ts @@ -366,7 +366,7 @@ import { .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-detail.component.ts index c85b2ccb2..d76fa2978 100644 --- a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-detail.component.ts @@ -605,7 +605,7 @@ import { .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-secondary { @@ -615,7 +615,7 @@ import { .btn-danger { background: var(--theme-status-error); - color: white; + color: #1C1200; } .btn-sm { diff --git a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-section.component.ts b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-section.component.ts index f57bbc77f..32bc1247e 100644 --- a/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-section.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/configuration-pane/components/integration-section.component.ts @@ -166,7 +166,7 @@ import { ConfigurationSection, ConfiguredIntegration, ConnectionStatus } from '. .btn-add { padding: 6px 14px; background: var(--theme-brand-primary); - color: white; + color: #1C1200; border: none; border-radius: 4px; font-size: 13px; @@ -286,7 +286,7 @@ import { ConfigurationSection, ConfiguredIntegration, ConnectionStatus } from '. font-weight: 600; padding: 1px 5px; background: var(--theme-brand-primary); - color: white; + color: #1C1200; border-radius: 3px; text-transform: uppercase; } diff --git a/src/Web/StellaOps.Web/src/app/features/console-admin/branding/branding-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/console-admin/branding/branding-editor.component.ts index e51710a31..b3a91fe08 100644 --- a/src/Web/StellaOps.Web/src/app/features/console-admin/branding/branding-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/console-admin/branding/branding-editor.component.ts @@ -465,7 +465,7 @@ interface ThemeToken { .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/console-admin/clients/clients-list.component.ts b/src/Web/StellaOps.Web/src/app/features/console-admin/clients/clients-list.component.ts index 07b96717f..55498bb13 100644 --- a/src/Web/StellaOps.Web/src/app/features/console-admin/clients/clients-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/console-admin/clients/clients-list.component.ts @@ -333,7 +333,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; display: inline-block; padding: 2px 8px; background: var(--theme-brand-primary); - color: white; + color: #1C1200; border-radius: 4px; font-size: 12px; } @@ -357,7 +357,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; .status-badge.status-disabled { background: var(--theme-status-warning); - color: white; + color: #1C1200; } .action-buttons { @@ -378,7 +378,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/console-admin/roles/roles-list.component.ts b/src/Web/StellaOps.Web/src/app/features/console-admin/roles/roles-list.component.ts index e2b320565..dca8c7457 100644 --- a/src/Web/StellaOps.Web/src/app/features/console-admin/roles/roles-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/console-admin/roles/roles-list.component.ts @@ -472,7 +472,7 @@ interface RoleBundle { display: inline-block; padding: 2px 8px; background: var(--theme-brand-primary); - color: white; + color: #1C1200; border-radius: 4px; font-size: 12px; } @@ -495,7 +495,7 @@ interface RoleBundle { .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/console-admin/tenants/tenants-list.component.ts b/src/Web/StellaOps.Web/src/app/features/console-admin/tenants/tenants-list.component.ts index 33464f8dc..85d817d5f 100644 --- a/src/Web/StellaOps.Web/src/app/features/console-admin/tenants/tenants-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/console-admin/tenants/tenants-list.component.ts @@ -101,13 +101,13 @@ import { FreshAuthService } from '../../../core/auth/fresh-auth.service'; .admin-table td { padding: 12px; text-align: left; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); } .admin-table th { - background: #f8fafc; + background: #FFFCF5; font-weight: 600; - color: #475569; + color: #6B5A2E; } .status-badge { @@ -132,7 +132,7 @@ import { FreshAuthService } from '../../../core/auth/fresh-auth.service'; .empty-state { padding: 48px; text-align: center; - color: #64748b; + color: #6B5A2E; } .error { diff --git a/src/Web/StellaOps.Web/src/app/features/console-admin/users/users-list.component.ts b/src/Web/StellaOps.Web/src/app/features/console-admin/users/users-list.component.ts index cbe540f62..8dfd00c8f 100644 --- a/src/Web/StellaOps.Web/src/app/features/console-admin/users/users-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/console-admin/users/users-list.component.ts @@ -250,7 +250,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; display: inline-block; padding: 2px 8px; background: var(--theme-brand-primary); - color: white; + color: #1C1200; border-radius: 4px; font-size: 12px; } @@ -270,7 +270,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; .status-badge.status-disabled { background: var(--theme-status-warning); - color: white; + color: #1C1200; } .action-buttons { @@ -291,7 +291,7 @@ import { StellaOpsScopes } from '../../../core/auth/scopes'; .btn-primary { background: var(--theme-brand-primary); - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/control-plane/control-plane-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/control-plane/control-plane-dashboard.component.ts index 20cd98138..d3d148713 100644 --- a/src/Web/StellaOps.Web/src/app/features/control-plane/control-plane-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/control-plane/control-plane-dashboard.component.ts @@ -146,12 +146,12 @@ import { RouterLink } from '@angular/router'; margin: 0 0 0.5rem; font-size: 1.75rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .dashboard__subtitle { margin: 0; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .dashboard__actions { @@ -167,7 +167,7 @@ import { RouterLink } from '@angular/router'; margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .dashboard__grid { @@ -184,7 +184,7 @@ import { RouterLink } from '@angular/router'; gap: 0.5rem; padding: 1.5rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; overflow-x: auto; } @@ -193,8 +193,8 @@ import { RouterLink } from '@angular/router'; flex: 1; min-width: 120px; padding: 1rem; - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; text-align: center; } @@ -211,12 +211,12 @@ import { RouterLink } from '@angular/router'; .pipeline__stage-name { display: block; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .pipeline__stage-version { font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .pipeline__status-badge { @@ -240,20 +240,20 @@ import { RouterLink } from '@angular/router'; .pipeline__arrow { flex-shrink: 0; font-size: 1.25rem; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } .pipeline__hint { margin: 0.75rem 0 0; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } /* Cards */ .card { padding: 1.5rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } @@ -266,7 +266,7 @@ import { RouterLink } from '@angular/router'; .card__subtitle { margin: 0 0 1rem; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .card__list { @@ -286,7 +286,7 @@ import { RouterLink } from '@angular/router'; .table-container { overflow-x: auto; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } @@ -299,7 +299,7 @@ import { RouterLink } from '@angular/router'; .table td { padding: 0.75rem 1rem; text-align: left; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .table th { @@ -307,8 +307,8 @@ import { RouterLink } from '@angular/router'; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--text-color-secondary, #64748b); - background: var(--surface-ground, #f8fafc); + color: var(--text-color-secondary, #6B5A2E); + background: var(--surface-ground, #FFFCF5); } .table td { @@ -384,7 +384,7 @@ import { RouterLink } from '@angular/router'; .btn--primary { background: var(--primary-color, #3b82f6); - color: white; + color: #1C1200; &:hover { background: var(--primary-600, #2563eb); @@ -392,11 +392,11 @@ import { RouterLink } from '@angular/router'; } .btn--secondary { - background: var(--surface-ground, #f1f5f9); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFF9ED); + color: var(--text-color, #3D2E0A); &:hover { - background: var(--surface-hover, #e2e8f0); + background: var(--surface-hover, rgba(212, 201, 168, 0.3)); } } diff --git a/src/Web/StellaOps.Web/src/app/features/dashboard/ai-risk-drivers.component.ts b/src/Web/StellaOps.Web/src/app/features/dashboard/ai-risk-drivers.component.ts index b6e235102..88669dcc5 100644 --- a/src/Web/StellaOps.Web/src/app/features/dashboard/ai-risk-drivers.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/dashboard/ai-risk-drivers.component.ts @@ -260,7 +260,7 @@ export interface DashboardAiData { border-radius: 50%; font-size: 0.75rem; font-weight: 600; - color: white; + color: #1C1200; flex-shrink: 0; } diff --git a/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-dashboard.component.ts index 6ef8cbbf2..1c8b8a867 100644 --- a/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-dashboard.component.ts @@ -416,7 +416,7 @@ import { .btn:hover:not(:disabled) { background: var(--bg-tertiary); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } - .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } + .btn-primary { background: var(--color-primary); color: #1C1200; border-color: var(--color-primary); } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .btn-icon { padding: 0.5rem; } .spinning { animation: spin 1s linear infinite; } diff --git a/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-entry-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-entry-detail.component.ts index 932f4f87e..f4f2d02ac 100644 --- a/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-entry-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/deadletter/deadletter-entry-detail.component.ts @@ -353,7 +353,7 @@ import { .btn:hover:not(:disabled) { background: var(--bg-tertiary); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } - .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); } + .btn-primary { background: var(--color-primary); color: #1C1200; border-color: var(--color-primary); } .btn-secondary { background: var(--bg-secondary); } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } .btn-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; } diff --git a/src/Web/StellaOps.Web/src/app/features/deployments/deployment-detail-page.component.ts b/src/Web/StellaOps.Web/src/app/features/deployments/deployment-detail-page.component.ts index 0e1dd21f5..3377a80e8 100644 --- a/src/Web/StellaOps.Web/src/app/features/deployments/deployment-detail-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/deployments/deployment-detail-page.component.ts @@ -322,8 +322,8 @@ interface DeploymentArtifact { .header-main { flex: 1; } .header-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .page-title { margin: 0; font-size: 1.5rem; font-weight: 600; font-family: ui-monospace, SFMono-Regular, monospace; } - .header-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } - .header-meta strong { color: var(--text-color, #1e293b); } + .header-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } + .header-meta strong { color: var(--text-color, #3D2E0A); } .header-meta code { font-size: 0.625rem; } .header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } @@ -334,21 +334,21 @@ interface DeploymentArtifact { .status-badge--cancelled { background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563); } /* Tabs */ - .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--surface-border, #e2e8f0); margin-bottom: 1.5rem; overflow-x: auto; } - .tab { padding: 0.75rem 1rem; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; color: var(--text-color-secondary, #64748b); cursor: pointer; white-space: nowrap; } - .tab:hover { color: var(--text-color, #1e293b); } + .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); margin-bottom: 1.5rem; overflow-x: auto; } + .tab { padding: 0.75rem 1rem; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; color: var(--text-color-secondary, #6B5A2E); cursor: pointer; white-space: nowrap; } + .tab:hover { color: var(--text-color, #3D2E0A); } .tab--active { color: var(--primary-color, #3b82f6); border-bottom-color: var(--primary-color, #3b82f6); } /* Panel */ - .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); border: 1px solid var(--surface-border, #e2e8f0); border-radius: 8px; } + .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .panel h3 { margin: 0; font-size: 1rem; font-weight: 600; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; } /* Workflow DAG (DEP-003) */ .workflow-panel { } - .workflow-summary { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .workflow-summary { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .workflow-dag { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1rem 0; } - .dag-node { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--surface-ground, #f8fafc); border: 2px solid var(--surface-border, #e2e8f0); border-radius: 8px; cursor: pointer; transition: all 0.15s; min-width: 250px; position: relative; } + .dag-node { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--surface-ground, #FFFCF5); border: 2px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; cursor: pointer; transition: all 0.15s; min-width: 250px; position: relative; } .dag-node:hover { border-color: var(--primary-color, #3b82f6); } .dag-node--selected { border-color: var(--primary-color, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .dag-node--complete { border-color: var(--green-300, #86efac); background: var(--green-50, #f0fdf4); } @@ -363,25 +363,25 @@ interface DeploymentArtifact { .dag-node--pending .dag-node__icon { background: var(--gray-100, #f3f4f6); color: var(--gray-400, #9ca3af); } .dag-node__content { flex: 1; } .dag-node__name { display: block; font-weight: 600; font-size: 0.875rem; } - .dag-node__duration { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } - .dag-connector { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: var(--surface-border, #cbd5e1); z-index: 1; } + .dag-node__duration { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } + .dag-connector { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: var(--surface-border, rgba(212, 201, 168, 0.5)); z-index: 1; } .icon-spin { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } - .step-detail { margin-top: 1.5rem; padding: 1rem; background: var(--surface-ground, #f8fafc); border-radius: 8px; border: 1px solid var(--surface-border, #e2e8f0); } + .step-detail { margin-top: 1.5rem; padding: 1rem; background: var(--surface-ground, #FFFCF5); border-radius: 8px; border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .step-detail__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .step-detail__header h4 { margin: 0; font-size: 0.875rem; } .step-detail__status { font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 4px; font-weight: 600; } .step-detail__status--complete { background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); } .step-detail__status--running { background: var(--blue-100, #dbeafe); color: var(--blue-700, #1d4ed8); } .step-detail__status--failed { background: var(--red-100, #fee2e2); color: var(--red-700, #b91c1c); } - .step-detail__meta { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); display: flex; gap: 1rem; margin-bottom: 0.75rem; } + .step-detail__meta { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); display: flex; gap: 1rem; margin-bottom: 0.75rem; } .step-detail__logs { background: var(--gray-900, #111827); padding: 0.75rem; border-radius: 6px; max-height: 200px; overflow: auto; } .step-detail__logs pre { margin: 0; font-size: 0.625rem; color: var(--gray-100, #f3f4f6); font-family: ui-monospace, monospace; } /* Artifacts Table (DEP-004) */ - .artifacts-count { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .artifacts-count { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .artifacts-table { } .artifact-name { display: flex; align-items: center; gap: 0.5rem; } .artifact-icon { font-size: 1rem; } @@ -399,11 +399,11 @@ interface DeploymentArtifact { /* Logs (DEP-005) */ .logs-panel { display: flex; flex-direction: column; } .logs-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } - .logs-step-select { padding: 0.375rem 0.75rem; border: 1px solid var(--surface-border, #e2e8f0); border-radius: 6px; font-size: 0.75rem; } - .logs-search { padding: 0.375rem 0.75rem; border: 1px solid var(--surface-border, #e2e8f0); border-radius: 6px; font-size: 0.75rem; width: 200px; } + .logs-step-select { padding: 0.375rem 0.75rem; border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.75rem; } + .logs-search { padding: 0.375rem 0.75rem; border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.75rem; width: 200px; } .log-viewer { background: var(--gray-900, #111827); border-radius: 8px; padding: 1rem; max-height: 500px; overflow: auto; flex: 1; } .log-content { margin: 0; font-size: 0.75rem; color: var(--gray-100, #f3f4f6); font-family: ui-monospace, monospace; white-space: pre-wrap; } - .logs-footer { display: flex; justify-content: space-between; padding-top: 0.5rem; font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .logs-footer { display: flex; justify-content: space-between; padding-top: 0.5rem; font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .logs-match-count { color: var(--yellow-600, #ca8a04); } /* Targets */ @@ -417,7 +417,7 @@ interface DeploymentArtifact { .evidence-info a { color: var(--primary-color, #3b82f6); } .evidence-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .evidence-item { display: flex; flex-direction: column; gap: 0.25rem; } - .evidence-label { font-size: 0.625rem; text-transform: uppercase; color: var(--text-color-secondary, #94a3b8); } + .evidence-label { font-size: 0.625rem; text-transform: uppercase; color: var(--text-color-secondary, #D4C9A8); } .evidence-item code { font-size: 0.625rem; } .evidence-badge { font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 4px; font-weight: 600; width: fit-content; } .evidence-badge--success { background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); } @@ -425,15 +425,15 @@ interface DeploymentArtifact { /* Data Table */ .data-table { width: 100%; border-collapse: collapse; } - .data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--surface-border, #e2e8f0); } - .data-table th { font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #64748b); text-transform: uppercase; } + .data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } + .data-table th { font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } .data-table code { font-size: 0.625rem; } /* Buttons */ .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; } .btn--sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } - .btn--secondary { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } - .btn--secondary:hover { background: var(--surface-hover, #f1f5f9); } + .btn--secondary { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } + .btn--secondary:hover { background: var(--surface-hover, #FFF9ED); } .btn--secondary.active { background: var(--primary-color, #3b82f6); color: white; border-color: var(--primary-color, #3b82f6); } @media (max-width: 768px) { diff --git a/src/Web/StellaOps.Web/src/app/features/deployments/deployments-list-page.component.ts b/src/Web/StellaOps.Web/src/app/features/deployments/deployments-list-page.component.ts index 5af728f24..47b3b2950 100644 --- a/src/Web/StellaOps.Web/src/app/features/deployments/deployments-list-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/deployments/deployments-list-page.component.ts @@ -82,18 +82,18 @@ interface Deployment { .deployments-page { max-width: 1400px; margin: 0 auto; } .page-header { margin-bottom: 1.5rem; } .page-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); } .table-container { background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; overflow: hidden; } .data-table { width: 100%; border-collapse: collapse; } - .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--surface-border, #e2e8f0); } - .data-table th { background: var(--surface-ground, #f8fafc); font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #64748b); text-transform: uppercase; } - .data-table tbody tr:hover { background: var(--surface-hover, #f8fafc); } + .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } + .data-table th { background: var(--surface-ground, #FFFCF5); font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } + .data-table tbody tr:hover { background: var(--surface-hover, #FFFCF5); } .data-table a { color: var(--primary-color, #3b82f6); text-decoration: none; } .deployment-link { font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 500; } @@ -114,7 +114,7 @@ interface Deployment { } @keyframes spin { to { transform: rotate(360deg); } } - .btn { padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 500; text-decoration: none; background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } + .btn { padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 500; text-decoration: none; background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } `] }) export class DeploymentsListPageComponent { diff --git a/src/Web/StellaOps.Web/src/app/features/doctor/components/evidence-viewer/evidence-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/doctor/components/evidence-viewer/evidence-viewer.component.ts index e14dd44c8..53857dee2 100644 --- a/src/Web/StellaOps.Web/src/app/features/doctor/components/evidence-viewer/evidence-viewer.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/doctor/components/evidence-viewer/evidence-viewer.component.ts @@ -40,7 +40,7 @@ import { Evidence } from '../../models/doctor.models'; `, styles: [` .evidence-viewer { - background: var(--bg-tertiary, #f8fafc); + background: var(--bg-tertiary, #FFFCF5); border-radius: 6px; margin-bottom: 1rem; } @@ -55,7 +55,7 @@ import { Evidence } from '../../models/doctor.models'; transition: background 0.15s ease; &:hover { - background: var(--bg-hover, #f1f5f9); + background: var(--bg-hover, #FFF9ED); } h4 { @@ -67,7 +67,7 @@ import { Evidence } from '../../models/doctor.models'; .toggle-icon { font-size: 0.75rem; - color: var(--text-tertiary, #94a3b8); + color: var(--text-tertiary, #D4C9A8); } } @@ -78,12 +78,12 @@ import { Evidence } from '../../models/doctor.models'; .evidence-description { margin: 0 0 0.75rem 0; font-size: 0.875rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); } .evidence-data { background: white; - border: 1px solid var(--border, #e2e8f0); + border: 1px solid var(--border, rgba(212, 201, 168, 0.3)); border-radius: 6px; overflow: hidden; @@ -93,7 +93,7 @@ import { Evidence } from '../../models/doctor.models'; } tr:not(:last-child) { - border-bottom: 1px solid var(--border, #e2e8f0); + border-bottom: 1px solid var(--border, rgba(212, 201, 168, 0.3)); } td { @@ -105,15 +105,15 @@ import { Evidence } from '../../models/doctor.models'; width: 30%; font-weight: 500; color: var(--text-primary, #1a1a2e); - background: var(--bg-secondary, #f8fafc); - border-right: 1px solid var(--border, #e2e8f0); + background: var(--bg-secondary, #FFFCF5); + border-right: 1px solid var(--border, rgba(212, 201, 168, 0.3)); } .data-value { code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.75rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); word-break: break-all; } } diff --git a/src/Web/StellaOps.Web/src/app/features/doctor/components/export-dialog/export-dialog.component.ts b/src/Web/StellaOps.Web/src/app/features/doctor/components/export-dialog/export-dialog.component.ts index d4701144e..2f16c8084 100644 --- a/src/Web/StellaOps.Web/src/app/features/doctor/components/export-dialog/export-dialog.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/doctor/components/export-dialog/export-dialog.component.ts @@ -118,7 +118,7 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; - border-bottom: 1px solid var(--border, #e2e8f0); + border-bottom: 1px solid var(--border, rgba(212, 201, 168, 0.3)); h2 { margin: 0; @@ -132,7 +132,7 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; border: none; background: transparent; font-size: 1.5rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); cursor: pointer; border-radius: 4px; display: flex; @@ -140,7 +140,7 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; justify-content: center; &:hover { - background: var(--bg-hover, #f1f5f9); + background: var(--bg-hover, #FFF9ED); } } } @@ -163,13 +163,13 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; - border: 1px solid var(--border, #e2e8f0); + border: 1px solid var(--border, rgba(212, 201, 168, 0.3)); border-radius: 8px; cursor: pointer; transition: all 0.15s ease; &:hover { - background: var(--bg-hover, #f8fafc); + background: var(--bg-hover, #FFFCF5); } &:has(input:checked) { @@ -192,7 +192,7 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; small { font-size: 0.75rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); } } } @@ -206,11 +206,11 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; .dsse-note { padding: 0.75rem; - border: 1px dashed var(--border, #e2e8f0); + border: 1px dashed var(--border, rgba(212, 201, 168, 0.3)); border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.8125rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); } .checkbox-option { @@ -239,11 +239,11 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; .preview-content { margin: 0; padding: 1rem; - background: var(--bg-code, #1e293b); + background: var(--bg-code, #3D2E0A); border-radius: 8px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.75rem; - color: var(--text-code, #e2e8f0); + color: var(--text-code, rgba(212, 201, 168, 0.3)); max-height: 200px; overflow: auto; white-space: pre-wrap; @@ -255,7 +255,7 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; - border-top: 1px solid var(--border, #e2e8f0); + border-top: 1px solid var(--border, rgba(212, 201, 168, 0.3)); } .btn { @@ -269,18 +269,18 @@ type ExportFormat = 'json' | 'markdown' | 'text' | 'dsse'; .btn-outline { background: transparent; - border: 1px solid var(--border, #e2e8f0); + border: 1px solid var(--border, rgba(212, 201, 168, 0.3)); color: var(--text-primary, #1a1a2e); &:hover { - background: var(--bg-hover, #f1f5f9); + background: var(--bg-hover, #FFF9ED); } } .btn-primary { background: var(--primary, #3b82f6); border: 1px solid var(--primary, #3b82f6); - color: white; + color: #1C1200; &:hover { background: var(--primary-dark, #2563eb); diff --git a/src/Web/StellaOps.Web/src/app/features/doctor/components/remediation-panel/remediation-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/doctor/components/remediation-panel/remediation-panel.component.ts index 34d9f4ff8..d927693f2 100644 --- a/src/Web/StellaOps.Web/src/app/features/doctor/components/remediation-panel/remediation-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/doctor/components/remediation-panel/remediation-panel.component.ts @@ -73,7 +73,7 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; margin-top: 1rem; padding: 1rem; background: white; - border: 1px solid var(--border, #e2e8f0); + border: 1px solid var(--border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } @@ -96,15 +96,15 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; .run-fix-btn { padding: 0.25rem 0.625rem; font-size: 0.75rem; - background: var(--bg-secondary, #f1f5f9); - border: 1px solid var(--border, #e2e8f0); + background: var(--bg-secondary, #FFF9ED); + border: 1px solid var(--border, rgba(212, 201, 168, 0.3)); border-radius: 4px; cursor: pointer; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); transition: all 0.15s ease; &:hover { - background: var(--bg-hover, #e2e8f0); + background: var(--bg-hover, rgba(212, 201, 168, 0.3)); color: var(--text-primary, #1a1a2e); } } @@ -125,9 +125,9 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; } &:disabled { - background: var(--bg-secondary, #f1f5f9); - border-color: var(--border, #e2e8f0); - color: var(--text-secondary, #64748b); + background: var(--bg-secondary, #FFF9ED); + border-color: var(--border, rgba(212, 201, 168, 0.3)); + color: var(--text-secondary, #6B5A2E); } } @@ -197,14 +197,14 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; .verification-command { margin: 0; padding: 0.75rem; - background: var(--bg-code, #1e293b); + background: var(--bg-code, #3D2E0A); border-radius: 6px; overflow-x: auto; code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8125rem; - color: var(--text-code, #e2e8f0); + color: var(--text-code, rgba(212, 201, 168, 0.3)); white-space: pre-wrap; word-break: break-all; } @@ -214,7 +214,7 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; display: inline-block; margin-top: 0.25rem; font-size: 0.6875rem; - color: var(--text-tertiary, #94a3b8); + color: var(--text-tertiary, #D4C9A8); text-transform: uppercase; letter-spacing: 0.025em; } @@ -222,7 +222,7 @@ import { Remediation, RemediationStep } from '../../models/doctor.models'; .verification-section { margin-top: 1.5rem; padding-top: 1rem; - border-top: 1px solid var(--border, #e2e8f0); + border-top: 1px solid var(--border, rgba(212, 201, 168, 0.3)); .verification-header { display: flex; diff --git a/src/Web/StellaOps.Web/src/app/features/doctor/components/summary-strip/summary-strip.component.ts b/src/Web/StellaOps.Web/src/app/features/doctor/components/summary-strip/summary-strip.component.ts index 3da101782..169b6fa1a 100644 --- a/src/Web/StellaOps.Web/src/app/features/doctor/components/summary-strip/summary-strip.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/doctor/components/summary-strip/summary-strip.component.ts @@ -48,7 +48,7 @@ import { DoctorSeverity, DoctorSummary } from '../../models/doctor.models'; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; - background: var(--bg-secondary, #f8fafc); + background: var(--bg-secondary, #FFFCF5); border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid var(--success, #22c55e); @@ -78,7 +78,7 @@ import { DoctorSeverity, DoctorSummary } from '../../models/doctor.models'; .label { font-size: 0.75rem; - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.025em; @@ -88,10 +88,10 @@ import { DoctorSeverity, DoctorSummary } from '../../models/doctor.models'; &.info .count { color: var(--info, #3b82f6); } &.warnings .count { color: var(--warning, #f59e0b); } &.failed .count { color: var(--error, #ef4444); } - &.skipped .count { color: var(--text-tertiary, #94a3b8); } + &.skipped .count { color: var(--text-tertiary, #D4C9A8); } &.total .count { color: var(--text-primary, #1a1a2e); } &.duration .count { - color: var(--text-secondary, #64748b); + color: var(--text-secondary, #6B5A2E); font-family: monospace; font-size: 1.25rem; } @@ -100,7 +100,7 @@ import { DoctorSeverity, DoctorSummary } from '../../models/doctor.models'; .summary-divider { width: 1px; height: 40px; - background: var(--border, #e2e8f0); + background: var(--border, rgba(212, 201, 168, 0.3)); } @media (max-width: 640px) { diff --git a/src/Web/StellaOps.Web/src/app/features/environments/environment-detail-page.component.ts b/src/Web/StellaOps.Web/src/app/features/environments/environment-detail-page.component.ts index caf55c88b..dac53cfca 100644 --- a/src/Web/StellaOps.Web/src/app/features/environments/environment-detail-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/environments/environment-detail-page.component.ts @@ -373,16 +373,16 @@ interface GateSummary { .header-main { flex: 1; } .header-title-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .page-title { margin: 0; font-size: 1.5rem; font-weight: 600; } - .stage-badge { padding: 0.25rem 0.75rem; background: var(--surface-ground, #f1f5f9); border-radius: 4px; font-size: 0.75rem; font-weight: 500; } + .stage-badge { padding: 0.25rem 0.75rem; background: var(--surface-ground, #FFF9ED); border-radius: 4px; font-size: 0.75rem; font-weight: 500; } .freeze-badge { padding: 0.25rem 0.5rem; background: var(--blue-100, #dbeafe); color: var(--blue-700, #1d4ed8); border-radius: 4px; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; } - .header-meta { display: flex; gap: 1.5rem; color: var(--text-color-secondary, #64748b); font-size: 0.875rem; } - .meta-item strong { color: var(--text-color, #1e293b); } + .header-meta { display: flex; gap: 1.5rem; color: var(--text-color-secondary, #6B5A2E); font-size: 0.875rem; } + .meta-item strong { color: var(--text-color, #3D2E0A); } .header-actions { display: flex; gap: 0.5rem; } /* Tabs */ - .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--surface-border, #e2e8f0); margin-bottom: 1.5rem; } - .tab { padding: 0.75rem 1rem; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; color: var(--text-color-secondary, #64748b); cursor: pointer; } - .tab:hover { color: var(--text-color, #1e293b); } + .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); margin-bottom: 1.5rem; } + .tab { padding: 0.75rem 1rem; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; color: var(--text-color-secondary, #6B5A2E); cursor: pointer; } + .tab:hover { color: var(--text-color, #3D2E0A); } .tab--active { color: var(--primary-color, #3b82f6); border-bottom-color: var(--primary-color, #3b82f6); } /* Overview Layout */ @@ -391,7 +391,7 @@ interface GateSummary { .overview-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } /* Panel */ - .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); border: 1px solid var(--surface-border, #e2e8f0); border-radius: 8px; } + .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .panel--compact { padding: 1rem; } .panel h3 { margin: 0; font-size: 0.875rem; font-weight: 600; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } @@ -401,28 +401,28 @@ interface GateSummary { /* Release Timeline */ .release-timeline { display: flex; flex-direction: column; gap: 0; margin-bottom: 1rem; } .timeline-entry { display: flex; align-items: flex-start; gap: 0.75rem; position: relative; padding-bottom: 0.75rem; } - .timeline-node { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-border, #e2e8f0); border: 2px solid var(--surface-card, #ffffff); box-shadow: 0 0 0 2px var(--surface-border, #e2e8f0); flex-shrink: 0; margin-top: 0.25rem; } + .timeline-node { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-border, rgba(212, 201, 168, 0.3)); border: 2px solid var(--surface-card, #ffffff); box-shadow: 0 0 0 2px var(--surface-border, rgba(212, 201, 168, 0.3)); flex-shrink: 0; margin-top: 0.25rem; } .timeline-entry--current .timeline-node { background: var(--primary-color, #3b82f6); box-shadow: 0 0 0 2px var(--primary-color, #3b82f6); } - .timeline-line { position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--surface-border, #e2e8f0); } + .timeline-line { position: absolute; left: 5px; top: 14px; bottom: -2px; width: 2px; background: var(--surface-border, rgba(212, 201, 168, 0.3)); } .timeline-content { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .timeline-version { font-weight: 600; font-size: 0.875rem; color: var(--primary-color, #3b82f6); text-decoration: none; } .timeline-version:hover { text-decoration: underline; } .current-badge { font-size: 0.625rem; padding: 0.125rem 0.375rem; background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); border-radius: 4px; font-weight: 600; } - .timeline-date { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } - .last-promotion { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); padding-top: 0.5rem; border-top: 1px solid var(--surface-border, #e2e8f0); display: flex; justify-content: space-between; } + .timeline-date { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } + .last-promotion { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); padding-top: 0.5rem; border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); display: flex; justify-content: space-between; } .promotion-link { color: var(--primary-color, #3b82f6); text-decoration: none; } /* Risk Snapshot */ .risk-content { display: flex; flex-direction: column; gap: 0.75rem; } .risk-row { display: flex; justify-content: space-between; align-items: center; } - .risk-label { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .risk-label { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .gate-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; } .gate-badge { font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 4px; font-weight: 600; } .gate-badge--pass { background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); } .gate-badge--warn { background: var(--yellow-100, #fef9c3); color: var(--yellow-700, #a16207); } .gate-badge--block { background: var(--red-100, #fee2e2); color: var(--red-700, #b91c1c); } .coverage-display { display: flex; align-items: center; gap: 0.5rem; } - .coverage-bar { width: 100px; height: 6px; background: var(--surface-ground, #e2e8f0); border-radius: 3px; overflow: hidden; } + .coverage-bar { width: 100px; height: 6px; background: var(--surface-ground, rgba(212, 201, 168, 0.3)); border-radius: 3px; overflow: hidden; } .coverage-bar__fill { height: 100%; background: var(--green-500, #22c55e); } .coverage-percent { font-size: 0.875rem; font-weight: 600; } .findings-counts { display: flex; gap: 0.75rem; } @@ -442,14 +442,14 @@ interface GateSummary { .targets-preview { display: flex; flex-direction: column; gap: 0.5rem; } .target-preview-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; } .target-name { flex: 1; font-weight: 500; } - .target-version { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } - .targets-more { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); text-align: center; padding-top: 0.5rem; } + .target-version { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } + .targets-more { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); text-align: center; padding-top: 0.5rem; } /* Quick Stats */ .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.75rem; } .stat-item { text-align: center; } - .stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--text-color, #1e293b); } - .stat-label { font-size: 0.625rem; color: var(--text-color-secondary, #94a3b8); text-transform: uppercase; } + .stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--text-color, #3D2E0A); } + .stat-label { font-size: 0.625rem; color: var(--text-color-secondary, #D4C9A8); text-transform: uppercase; } /* Drift Badge */ .drift-badge { padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-transform: capitalize; } @@ -458,8 +458,8 @@ interface GateSummary { /* Data Table */ .data-table { width: 100%; border-collapse: collapse; } - .data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--surface-border, #e2e8f0); } - .data-table th { font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #64748b); text-transform: uppercase; } + .data-table th, .data-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } + .data-table th { font-size: 0.75rem; font-weight: 600; color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } /* Status Dot */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.5rem; } @@ -474,16 +474,16 @@ interface GateSummary { /* Buttons */ .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; } - .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: white; } + .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: #1C1200; } .btn--primary:hover { background: var(--primary-color-dark, #2563eb); } - .btn--secondary { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } - .btn--secondary:hover { background: var(--surface-hover, #f1f5f9); } + .btn--secondary { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } + .btn--secondary:hover { background: var(--surface-hover, #FFF9ED); } .btn--sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* Sprint: SPRINT_20260118_008 - Additional styles for new tabs */ /* Panel subtitle */ - .panel-subtitle { margin: -0.5rem 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .panel-subtitle { margin: -0.5rem 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } /* Status badge */ .status-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; text-transform: capitalize; } @@ -503,17 +503,17 @@ interface GateSummary { /* Evidence grid */ .evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } - .evidence-card { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); border-radius: 8px; overflow: hidden; } - .evidence-card-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--surface-card, #ffffff); border-bottom: 1px solid var(--surface-border, #e2e8f0); } - .evidence-type-badge { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; color: var(--text-color-secondary, #64748b); } + .evidence-card { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; overflow: hidden; } + .evidence-card-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--surface-card, #ffffff); border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } + .evidence-type-badge { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; color: var(--text-color-secondary, #6B5A2E); } .evidence-badges { display: flex; gap: 0.25rem; } .badge { padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.625rem; font-weight: 600; } .badge--signed { background: var(--blue-100, #dbeafe); color: var(--blue-700, #1d4ed8); } .badge--verified { background: var(--green-100, #dcfce7); color: var(--green-700, #15803d); } .evidence-card-body { padding: 1rem; } .evidence-card-body h4 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600; } - .evidence-meta { margin: 0; font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } - .evidence-card-footer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface-card, #ffffff); border-top: 1px solid var(--surface-border, #e2e8f0); } + .evidence-meta { margin: 0; font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } + .evidence-card-footer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface-card, #ffffff); border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } @media (max-width: 1024px) { .overview-layout { grid-template-columns: 1fr; } diff --git a/src/Web/StellaOps.Web/src/app/features/environments/environments-list-page.component.ts b/src/Web/StellaOps.Web/src/app/features/environments/environments-list-page.component.ts index 96222c5a0..cbd2c58ba 100644 --- a/src/Web/StellaOps.Web/src/app/features/environments/environments-list-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/environments/environments-list-page.component.ts @@ -71,7 +71,7 @@ interface Environment { .environments-page { max-width: 1400px; margin: 0 auto; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .page-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); } .env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } @@ -79,7 +79,7 @@ interface Environment { display: block; padding: 1.25rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; text-decoration: none; color: inherit; @@ -89,11 +89,11 @@ interface Environment { .env-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .env-card__header h3 { margin: 0; font-size: 1rem; font-weight: 600; } - .stage-badge { padding: 0.125rem 0.5rem; background: var(--surface-ground, #f1f5f9); border-radius: 4px; font-size: 0.75rem; font-weight: 500; } + .stage-badge { padding: 0.125rem 0.5rem; background: var(--surface-ground, #FFF9ED); border-radius: 4px; font-size: 0.75rem; font-weight: 500; } .env-card__body { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; } .env-metric { display: flex; justify-content: space-between; } - .metric-label { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .metric-label { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .metric-value { font-size: 0.875rem; font-weight: 500; } .drift-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; } @@ -102,7 +102,7 @@ interface Environment { .drift-badge--unknown { background: var(--gray-100, #f3f4f6); color: var(--gray-600, #4b5563); } .btn { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer; } - .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: white; } + .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: #1C1200; } `] }) export class EnvironmentsListPageComponent { diff --git a/src/Web/StellaOps.Web/src/app/features/evidence/evidence-center-page.component.ts b/src/Web/StellaOps.Web/src/app/features/evidence/evidence-center-page.component.ts index 8ecfc4587..824f5eaae 100644 --- a/src/Web/StellaOps.Web/src/app/features/evidence/evidence-center-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/evidence/evidence-center-page.component.ts @@ -158,7 +158,7 @@ interface EvidencePacket { margin-bottom: 1.5rem; } .page-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 600; } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); } .page-actions { display: flex; gap: 0.75rem; } .filter-bar { @@ -166,7 +166,7 @@ interface EvidencePacket { gap: 0.75rem; padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; margin-bottom: 1rem; } @@ -179,26 +179,26 @@ interface EvidencePacket { left: 0.75rem; top: 50%; transform: translateY(-50%); - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } .filter-bar__input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; } .filter-bar__select { padding: 0.5rem 2rem 0.5rem 0.75rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); } .table-container { background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; overflow: hidden; } @@ -206,16 +206,16 @@ interface EvidencePacket { .data-table th, .data-table td { padding: 0.75rem 1rem; text-align: left; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .data-table th { - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); font-size: 0.75rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } - .data-table tbody tr:hover { background: var(--surface-hover, #f8fafc); } + .data-table tbody tr:hover { background: var(--surface-hover, #FFFCF5); } .evidence-link { color: var(--primary-color, #3b82f6); @@ -248,7 +248,7 @@ interface EvidencePacket { text-decoration: none; font-size: 0.75rem; } - .text-muted { color: var(--text-color-secondary, #94a3b8); } + .text-muted { color: var(--text-color-secondary, #D4C9A8); } .action-buttons { display: flex; gap: 0.25rem; } .btn { @@ -257,17 +257,17 @@ interface EvidencePacket { font-size: 0.875rem; font-weight: 500; cursor: pointer; - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + color: var(--text-color, #3D2E0A); } .btn--sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } - .btn--secondary { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } + .btn--secondary { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } .empty-state { text-align: center; padding: 3rem !important; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } `] }) diff --git a/src/Web/StellaOps.Web/src/app/features/evidence/evidence-packet-page.component.ts b/src/Web/StellaOps.Web/src/app/features/evidence/evidence-packet-page.component.ts index 230365386..c3a0c004d 100644 --- a/src/Web/StellaOps.Web/src/app/features/evidence/evidence-packet-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/evidence/evidence-packet-page.component.ts @@ -224,7 +224,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; font-size: 0.75rem; font-weight: 600; } - .page-subtitle { margin: 0; color: var(--text-color-secondary, #64748b); } + .page-subtitle { margin: 0; color: var(--text-color-secondary, #6B5A2E); } .summary-cards { display: grid; @@ -235,10 +235,10 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; .summary-card { padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } - .summary-label { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #64748b); margin-bottom: 0.25rem; } + .summary-label { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); margin-bottom: 0.25rem; } .summary-value { font-size: 0.875rem; font-weight: 500; } .summary-value code { font-size: 0.75rem; @@ -251,7 +251,7 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; .tabs { display: flex; gap: 0.25rem; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); margin-bottom: 1.5rem; } .tab { @@ -262,10 +262,10 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); cursor: pointer; } - .tab:hover { color: var(--text-color, #1e293b); } + .tab:hover { color: var(--text-color, #3D2E0A); } .tab--active { color: var(--primary-color, #3b82f6); border-bottom-color: var(--primary-color, #3b82f6); @@ -274,14 +274,14 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; .panel { padding: 1.5rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .panel h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; } - .section-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .section-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } .details-list { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; } - .details-list dt { font-weight: 500; color: var(--text-color-secondary, #64748b); font-size: 0.875rem; } + .details-list dt { font-weight: 500; color: var(--text-color-secondary, #6B5A2E); font-size: 0.875rem; } .details-list dd { margin: 0; font-size: 0.875rem; } .details-list code { font-size: 0.75rem; word-break: break-all; } @@ -289,12 +289,12 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; .data-table th, .data-table td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .data-table th { font-size: 0.75rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; } .data-table code { font-size: 0.75rem; } @@ -311,22 +311,22 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; .verification-result--pending { background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb); } .verification-icon { font-size: 1.5rem; } .verification-result strong { display: block; margin-bottom: 0.25rem; } - .verification-result p { margin: 0; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .verification-result p { margin: 0; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } .proof-chain { margin-bottom: 1.5rem; } .chain-node { padding: 1rem; - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } .chain-node__header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .chain-node__icon { font-size: 1.25rem; } .chain-node__type { font-weight: 600; font-size: 0.875rem; } - .chain-node__hash { display: block; font-size: 0.625rem; color: var(--text-color-secondary, #64748b); margin-bottom: 0.25rem; } - .chain-node__time { font-size: 0.75rem; color: var(--text-color-secondary, #94a3b8); } + .chain-node__hash { display: block; font-size: 0.625rem; color: var(--text-color-secondary, #6B5A2E); margin-bottom: 0.25rem; } + .chain-node__time { font-size: 0.75rem; color: var(--text-color-secondary, #D4C9A8); } .chain-connector { display: flex; justify-content: center; padding: 0.5rem 0; } - .chain-arrow { color: var(--text-color-secondary, #94a3b8); font-size: 1.25rem; } + .chain-arrow { color: var(--text-color-secondary, #D4C9A8); font-size: 1.25rem; } .proof-actions { display: flex; gap: 0.75rem; } .btn { @@ -337,8 +337,8 @@ import { ActivatedRoute, RouterLink } from '@angular/router'; cursor: pointer; } .btn--sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } - .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: white; } - .btn--secondary { background: var(--surface-ground, #f8fafc); border: 1px solid var(--surface-border, #e2e8f0); color: var(--text-color, #1e293b); } + .btn--primary { background: var(--primary-color, #3b82f6); border: none; color: #1C1200; } + .btn--secondary { background: var(--surface-ground, #FFFCF5); border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); color: var(--text-color, #3D2E0A); } `] }) export class EvidencePacketPageComponent implements OnInit { diff --git a/src/Web/StellaOps.Web/src/app/features/evidence/modals/audit-bundle-create-modal.component.ts b/src/Web/StellaOps.Web/src/app/features/evidence/modals/audit-bundle-create-modal.component.ts index 7b3869ead..0b9ab59ff 100644 --- a/src/Web/StellaOps.Web/src/app/features/evidence/modals/audit-bundle-create-modal.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/evidence/modals/audit-bundle-create-modal.component.ts @@ -356,7 +356,7 @@ export interface AuditBundleConfig { align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); } .modal__title { @@ -371,13 +371,13 @@ export interface AuditBundleConfig { background: none; border: none; border-radius: 6px; - color: #64748b; + color: #6B5A2E; cursor: pointer; } .modal__close:hover { - background: #f8fafc; - color: #1e293b; + background: #FFFCF5; + color: #3D2E0A; } .modal__body { @@ -390,8 +390,8 @@ export interface AuditBundleConfig { display: flex; justify-content: space-between; padding: 1rem 1.5rem; - border-top: 1px solid #e2e8f0; - background: #f8fafc; + border-top: 1px solid rgba(212, 201, 168, 0.3); + background: #FFFCF5; border-radius: 0 0 12px 12px; } @@ -408,7 +408,7 @@ export interface AuditBundleConfig { display: flex; align-items: center; gap: 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .step--active { @@ -445,7 +445,7 @@ export interface AuditBundleConfig { .step__connector { width: 40px; height: 2px; - background: #e2e8f0; + background: rgba(212, 201, 168, 0.3); } /* Form elements */ @@ -464,7 +464,7 @@ export interface AuditBundleConfig { .form-label { font-size: 0.875rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .required { @@ -474,7 +474,7 @@ export interface AuditBundleConfig { .form-input, .form-textarea { padding: 0.625rem 0.875rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 6px; font-size: 0.875rem; } @@ -496,7 +496,7 @@ export interface AuditBundleConfig { .selection-count { font-size: 0.875rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .selection-actions { @@ -522,7 +522,7 @@ export interface AuditBundleConfig { display: flex; gap: 0.25rem; padding: 0.25rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 8px; } @@ -534,17 +534,17 @@ export interface AuditBundleConfig { border-radius: 6px; font-size: 0.75rem; font-weight: 500; - color: #64748b; + color: #6B5A2E; cursor: pointer; } .filter-tab:hover { - color: #1e293b; + color: #3D2E0A; } .filter-tab--active { background: white; - color: #1e293b; + color: #3D2E0A; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } @@ -552,7 +552,7 @@ export interface AuditBundleConfig { .items-list { max-height: 280px; overflow-y: auto; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 8px; } @@ -561,7 +561,7 @@ export interface AuditBundleConfig { align-items: center; gap: 0.75rem; padding: 0.75rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid #FFF9ED; cursor: pointer; } @@ -570,7 +570,7 @@ export interface AuditBundleConfig { } .item-row:hover { - background: #f8fafc; + background: #FFFCF5; } .item-row--selected { @@ -604,19 +604,19 @@ export interface AuditBundleConfig { .item-row__name { font-size: 0.8125rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .item-row__meta { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .item-row__digest { font-size: 0.6875rem; font-family: monospace; - color: #64748b; - background: #f1f5f9; + color: #6B5A2E; + background: #FFF9ED; padding: 0.125rem 0.375rem; border-radius: 4px; } @@ -624,13 +624,13 @@ export interface AuditBundleConfig { .empty-state { padding: 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } /* Summary */ .summary-box { padding: 1rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 8px; } @@ -649,7 +649,7 @@ export interface AuditBundleConfig { } .summary-box dt { - color: #64748b; + color: #6B5A2E; } .summary-box dd { @@ -673,7 +673,7 @@ export interface AuditBundleConfig { align-items: flex-start; gap: 0.75rem; padding: 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 8px; cursor: pointer; } @@ -704,7 +704,7 @@ export interface AuditBundleConfig { .radio-label small { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } /* Buttons */ @@ -727,7 +727,7 @@ export interface AuditBundleConfig { .btn--primary { background: #2563eb; - color: white; + color: #1C1200; } .btn--primary:hover:not(:disabled) { @@ -735,13 +735,13 @@ export interface AuditBundleConfig { } .btn--secondary { - background: #f8fafc; - color: #1e293b; - border: 1px solid #e2e8f0; + background: #FFFCF5; + color: #3D2E0A; + border: 1px solid rgba(212, 201, 168, 0.3); } .btn--secondary:hover:not(:disabled) { - background: #f1f5f9; + background: #FFF9ED; } .spinner { diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-export.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-export.component.ts index 624341294..8be74e8f8 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-export.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-export.component.ts @@ -320,8 +320,8 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; styles: [` .airgap-export { padding: 1.5rem; - color: #e2e8f0; - background: #0f172a; + color: rgba(212, 201, 168, 0.3); + background: #1C1200; min-height: calc(100vh - 120px); } @@ -336,7 +336,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; } } @@ -345,13 +345,13 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; display: inline-flex; align-items: center; gap: 0.5rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; transition: color 0.15s; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -398,7 +398,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; justify-content: center; width: 24px; height: 24px; - background: #334155; + background: #3D2E0A; border-radius: 50%; font-size: 0.75rem; font-weight: 600; @@ -428,7 +428,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; > p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } } @@ -437,13 +437,13 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; flex-direction: column; align-items: center; padding: 2rem; - color: #94a3b8; + color: #D4C9A8; } .loading-spinner { width: 32px; height: 32px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; @@ -466,7 +466,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; gap: 1rem; align-items: center; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2933; border-radius: 6px; cursor: pointer; @@ -479,7 +479,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; } &:hover:not(.feed-option--disabled) { - border-color: #334155; + border-color: #3D2E0A; } &--selected { @@ -526,7 +526,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; align-items: flex-end; gap: 0.25rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .feed-status { @@ -546,7 +546,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; display: flex; justify-content: space-between; padding: 1rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; font-size: 0.875rem; } @@ -591,10 +591,10 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .form-input { padding: 0.625rem 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; &:focus { @@ -614,12 +614,12 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .form-hint { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .selected-feeds-summary { padding: 1rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; margin-bottom: 1.5rem; @@ -629,7 +629,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #94a3b8; + color: #D4C9A8; } } @@ -676,7 +676,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .progress-bar-container { height: 8px; - background: #334155; + background: #3D2E0A; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; @@ -700,7 +700,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; } .progress-status { - color: #94a3b8; + color: #D4C9A8; } .step-content--ready { @@ -714,7 +714,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .bundle-details { text-align: left; - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 1.25rem; margin: 1.5rem 0; @@ -734,7 +734,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .detail-label { font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .detail-value { @@ -755,7 +755,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .checksum-section { text-align: left; - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem; @@ -764,7 +764,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; - color: #94a3b8; + color: #D4C9A8; } } @@ -776,7 +776,7 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; .checksum-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; min-width: 60px; } @@ -784,23 +784,23 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; word-break: break-all; } .copy-btn { padding: 0.25rem 0.625rem; background: #1f2933; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; &:hover { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } } @@ -850,12 +850,12 @@ type ExportStep = 'select' | 'configure' | 'building' | 'ready'; &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover:not(:disabled) { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-import.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-import.component.ts index 76c66a3d6..b00b57655 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-import.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/airgap-import.component.ts @@ -321,8 +321,8 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; styles: [` .airgap-import { padding: 1.5rem; - color: #e2e8f0; - background: #0f172a; + color: rgba(212, 201, 168, 0.3); + background: #1C1200; min-height: calc(100vh - 120px); } @@ -337,7 +337,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; } } @@ -346,13 +346,13 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; display: inline-flex; align-items: center; gap: 0.5rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; transition: color 0.15s; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -401,7 +401,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; justify-content: center; width: 24px; height: 24px; - background: #334155; + background: #3D2E0A; border-radius: 50%; font-size: 0.75rem; font-weight: 600; @@ -432,13 +432,13 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; > p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } } // Drop Zone .drop-zone { - border: 2px dashed #334155; + border: 2px dashed #3D2E0A; border-radius: 8px; padding: 3rem 2rem; text-align: center; @@ -457,7 +457,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; flex-direction: column; align-items: center; gap: 1rem; - color: #94a3b8; + color: #D4C9A8; } .drop-zone-text { @@ -468,7 +468,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .drop-zone-hint { margin: 0; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .file-input-label { @@ -511,7 +511,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .file-size { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .remove-file { @@ -522,14 +522,14 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; height: 32px; background: transparent; border: none; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; border-radius: 4px; transition: all 0.15s; &:hover { background: rgba(255, 255, 255, 0.1); - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -553,7 +553,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; } .progress-ring-bg { - stroke: #334155; + stroke: #3D2E0A; } .progress-ring-fill { @@ -573,7 +573,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .validation-status p { margin: 0; - color: #94a3b8; + color: #D4C9A8; } // Validation Result @@ -638,7 +638,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #94a3b8; + color: #D4C9A8; } } @@ -681,7 +681,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .stat-label { font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; } .validation-errors, @@ -728,7 +728,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; .progress-bar-container { height: 8px; - background: #334155; + background: #3D2E0A; border-radius: 4px; overflow: hidden; margin-bottom: 1rem; @@ -753,7 +753,7 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; } .progress-status { - color: #94a3b8; + color: #D4C9A8; } .import-stats { @@ -811,12 +811,12 @@ type ImportStep = 'upload' | 'validate' | 'review' | 'import' | 'complete'; &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-mirror-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-mirror-dashboard.component.ts index b55ef79ee..0410627b3 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-mirror-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-mirror-dashboard.component.ts @@ -282,8 +282,8 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; styles: [` .feed-mirror-dashboard { padding: 1.5rem; - color: #e2e8f0; - background: #0f172a; + color: rgba(212, 201, 168, 0.3); + background: #1C1200; min-height: calc(100vh - 120px); } @@ -305,7 +305,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; } } @@ -332,7 +332,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; background: transparent; border: none; border-bottom: 2px solid transparent; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; font-weight: 500; cursor: pointer; @@ -340,7 +340,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; margin-bottom: -1px; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); background: rgba(255, 255, 255, 0.02); } @@ -358,7 +358,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; min-width: 18px; height: 18px; padding: 0 5px; - background: #334155; + background: #3D2E0A; border-radius: 9px; font-size: 0.6875rem; font-weight: 600; @@ -383,7 +383,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; background: #111827; border: 1px solid #1f2933; border-radius: 8px; - border-left: 3px solid #334155; + border-left: 3px solid #3D2E0A; .stat-value { font-size: 1.5rem; @@ -394,7 +394,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .stat-label { font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; letter-spacing: 0.05em; } @@ -425,7 +425,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; align-items: center; justify-content: center; padding: 4rem 2rem; - color: #94a3b8; + color: #D4C9A8; p { margin: 1rem 0 0; @@ -436,7 +436,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .loading-spinner { width: 40px; height: 40px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; @@ -470,8 +470,8 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; transition: all 0.15s; &:hover { - border-color: #334155; - background: #1e293b; + border-color: #3D2E0A; + background: #3D2E0A; } &--import { @@ -497,7 +497,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; height: 56px; background: #1f2933; border-radius: 8px; - color: #94a3b8; + color: #D4C9A8; transition: color 0.15s; } @@ -511,7 +511,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; p { margin: 0; font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } } @@ -538,21 +538,21 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .bundle-count { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .loading-placeholder, .empty-bundles { padding: 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .empty-hint { display: block; margin-top: 0.5rem; font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; } .bundles-grid { @@ -563,7 +563,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .bundle-card { padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2933; border-radius: 6px; @@ -594,7 +594,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; &--ready { background: rgba(34, 197, 94, 0.2); color: #22c55e; } &--building { background: rgba(59, 130, 246, 0.2); color: #3b82f6; } - &--pending { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } + &--pending { background: rgba(148, 163, 184, 0.2); color: #D4C9A8; } &--error { background: rgba(239, 68, 68, 0.2); color: #ef4444; } &--expired { background: rgba(234, 179, 8, 0.2); color: #eab308; } } @@ -602,7 +602,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; .bundle-description { margin: 0 0 0.75rem; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .bundle-feeds { @@ -631,7 +631,7 @@ type TabMode = 'mirrors' | 'airgap' | 'version-locks'; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .meta-item { diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-version-lock.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-version-lock.component.ts index a1432d0b1..db7f10b52 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-version-lock.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/feed-version-lock.component.ts @@ -306,7 +306,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8125rem; } } @@ -339,12 +339,12 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover:not(:disabled) { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } @@ -354,13 +354,13 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; flex-direction: column; align-items: center; padding: 3rem; - color: #94a3b8; + color: #D4C9A8; } .loading-spinner { width: 32px; height: 32px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; @@ -387,7 +387,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; padding: 0.875rem 1rem; font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; font-weight: 500; border-bottom: 1px solid #1f2933; letter-spacing: 0.05em; @@ -454,7 +454,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .version-code { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .locked-date { @@ -463,7 +463,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; } .no-version { - color: #64748b; + color: #6B5A2E; font-style: italic; } @@ -476,16 +476,16 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .created-by { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .notes-text { font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .no-notes { - color: #475569; + color: #6B5A2E; } .action-buttons { @@ -501,15 +501,15 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; height: 28px; padding: 0; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; transition: all 0.15s; &:hover { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } &--active { @@ -534,7 +534,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; flex-direction: column; align-items: center; gap: 0.75rem; - color: #64748b; + color: #6B5A2E; p { margin: 0; @@ -544,7 +544,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .empty-hint { font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; max-width: 400px; text-align: center; } @@ -559,20 +559,20 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; - color: #94a3b8; + color: #D4C9A8; } ul { margin: 0; padding-left: 1.25rem; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; li { margin-bottom: 0.5rem; strong { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } @@ -617,11 +617,11 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; padding: 0; background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -647,17 +647,17 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; label { font-size: 0.8125rem; font-weight: 500; - color: #94a3b8; + color: #D4C9A8; } } .form-select, .form-input { padding: 0.625rem 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; &:focus { diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/freshness-warnings.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/freshness-warnings.component.ts index 404cc06d3..a3bcd87b7 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/freshness-warnings.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/freshness-warnings.component.ts @@ -181,11 +181,11 @@ interface FreshnessWarning { .header-subtitle { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .expand-icon { - color: #64748b; + color: #6B5A2E; transition: transform 0.2s; &.rotated { @@ -241,7 +241,7 @@ interface FreshnessWarning { &--osv { background: rgba(34, 197, 94, 0.2); color: #22c55e; } &--epss { background: rgba(249, 115, 22, 0.2); color: #f97316; } &--kev { background: rgba(239, 68, 68, 0.2); color: #ef4444; } - &--custom { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } + &--custom { background: rgba(100, 116, 139, 0.2); color: #D4C9A8; } } .warning-content { @@ -258,7 +258,7 @@ interface FreshnessWarning { .warning-age { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .severity-badge { @@ -288,11 +288,11 @@ interface FreshnessWarning { .recommendation { margin: 0; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.5; strong { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } `], diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-detail.component.ts index b568aa8bd..2007ca233 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-detail.component.ts @@ -294,16 +294,16 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; gap: 0.5rem; padding: 0.5rem 1rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; cursor: pointer; transition: all 0.15s; &:hover { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -350,7 +350,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .feed-type--osv { background: rgba(34, 197, 94, 0.2); color: #22c55e; } .feed-type--epss { background: rgba(249, 115, 22, 0.2); color: #f97316; } .feed-type--kev { background: rgba(239, 68, 68, 0.2); color: #ef4444; } - .feed-type--custom { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } + .feed-type--custom { background: rgba(100, 116, 139, 0.2); color: #D4C9A8; } .toggle-switch { display: flex; @@ -367,7 +367,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; position: relative; width: 44px; height: 24px; - background: #334155; + background: #3D2E0A; border-radius: 12px; transition: background 0.2s; @@ -394,7 +394,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .toggle-label { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; } .info-grid { @@ -413,7 +413,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .info-label { font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; letter-spacing: 0.05em; } @@ -424,7 +424,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .info-code { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; word-break: break-all; } @@ -442,8 +442,8 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .status--syncing { background: rgba(59, 130, 246, 0.2); color: #3b82f6; } .status--stale { background: rgba(234, 179, 8, 0.2); color: #eab308; } .status--error { background: rgba(239, 68, 68, 0.2); color: #ef4444; } - .status--disabled { background: rgba(100, 116, 139, 0.2); color: #64748b; } - .status--pending { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } + .status--disabled { background: rgba(100, 116, 139, 0.2); color: #6B5A2E; } + .status--pending { background: rgba(148, 163, 184, 0.2); color: #D4C9A8; } .error-banner { display: flex; @@ -518,11 +518,11 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; &--secondary { background: #1f2933; - color: #e2e8f0; - border: 1px solid #334155; + color: rgba(212, 201, 168, 0.3); + border: 1px solid #3D2E0A; &:hover:not(:disabled) { - background: #334155; + background: #3D2E0A; } } } @@ -560,16 +560,16 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; label { font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } } .form-input { padding: 0.625rem 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; &:focus { @@ -605,12 +605,12 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } @@ -640,7 +640,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .snapshot-count { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .loading-container { @@ -648,7 +648,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; flex-direction: column; align-items: center; padding: 2rem; - color: #94a3b8; + color: #D4C9A8; p { margin: 0.5rem 0 0; @@ -659,7 +659,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .loading-spinner { width: 24px; height: 24px; - border: 2px solid #334155; + border: 2px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; @@ -678,7 +678,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; padding: 0.75rem 1rem; font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; font-weight: 500; border-bottom: 1px solid #1f2933; } @@ -738,12 +738,12 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .no-expiry { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .no-data { text-align: center; - color: #64748b; + color: #6B5A2E; padding: 2rem !important; } @@ -767,7 +767,7 @@ import { SnapshotActionsComponent } from './snapshot-actions.component'; .retention-label { font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; } .retention-value { diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-list.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-list.component.ts index d3df6dd3d..7d71fdb7c 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/mirror-list.component.ts @@ -194,11 +194,11 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; background: #111827; border: 1px solid #1f2933; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; &::placeholder { - color: #64748b; + color: #6B5A2E; } &:focus { @@ -212,10 +212,10 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; background: #111827; border: 1px solid #1f2933; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5A2E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; cursor: pointer; @@ -232,15 +232,15 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; gap: 0.5rem; padding: 0.625rem 1rem; background: #1f2933; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; cursor: pointer; transition: all 0.15s; &:hover { - background: #334155; + background: #3D2E0A; } } @@ -259,8 +259,8 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; transition: all 0.15s; &:hover { - border-color: #334155; - background: #1e293b; + border-color: #3D2E0A; + background: #3D2E0A; } &:focus { @@ -286,11 +286,11 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; } .status-border--disabled { - border-left: 3px solid #64748b; + border-left: 3px solid #6B5A2E; } .status-border--pending { - border-left: 3px solid #94a3b8; + border-left: 3px solid #D4C9A8; } .mirror-header { @@ -355,7 +355,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .feed-type--custom { background: rgba(100, 116, 139, 0.2); - color: #94a3b8; + color: #D4C9A8; } .status-badge { @@ -391,12 +391,12 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .status--disabled { background: rgba(100, 116, 139, 0.2); - color: #64748b; + color: #6B5A2E; } .status--pending { background: rgba(148, 163, 184, 0.2); - color: #94a3b8; + color: #D4C9A8; } .status-spinner { @@ -427,17 +427,17 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; .stat-label { font-size: 0.625rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; } .mirror-sync-info { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.5rem; } .sync-label { - color: #64748b; + color: #6B5A2E; margin-right: 0.25rem; } @@ -484,7 +484,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; font-size: 0.75rem; font-weight: 500; @@ -508,10 +508,10 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; &--view { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); &:hover:not(:disabled) { - background: #334155; + background: #3D2E0A; } } } @@ -529,7 +529,7 @@ import { FEED_MIRROR_API } from '../../core/api/feed-mirror.client'; grid-column: 1 / -1; text-align: center; padding: 3rem; - color: #64748b; + color: #6B5A2E; p { margin: 0; diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/offline-sync-status.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/offline-sync-status.component.ts index ff723fb31..8f3b71087 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/offline-sync-status.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/offline-sync-status.component.ts @@ -180,7 +180,7 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. &--unknown { background: rgba(100, 116, 139, 0.2); - color: #64748b; + color: #6B5A2E; } &--loading { @@ -244,7 +244,7 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. .status-time { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .expand-btn { @@ -257,12 +257,12 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. margin-left: auto; background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; transition: color 0.15s; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } svg { @@ -296,7 +296,7 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. .detail-label { font-size: 0.625rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; letter-spacing: 0.05em; } @@ -328,7 +328,7 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. display: block; font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.5rem; } @@ -336,7 +336,7 @@ import { OfflineSyncStatus, OfflineSyncState } from '../../core/api/feed-mirror. margin: 0; padding-left: 1rem; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; li { margin-bottom: 0.25rem; diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-actions.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-actions.component.ts index a774e3f22..ae4c05517 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-actions.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-actions.component.ts @@ -119,16 +119,16 @@ import { FeedSnapshot } from '../../core/api/feed-mirror.models'; height: 28px; padding: 0; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; transition: all 0.15s; &:hover:not(:disabled) { background: #1f2933; - color: #e2e8f0; - border-color: #475569; + color: rgba(212, 201, 168, 0.3); + border-color: #6B5A2E; } &:disabled { @@ -163,8 +163,8 @@ import { FeedSnapshot } from '../../core/api/feed-mirror.models'; min-width: 160px; margin-top: 4px; padding: 0.375rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } @@ -178,7 +178,7 @@ import { FeedSnapshot } from '../../core/api/feed-mirror.models'; background: transparent; border: none; border-radius: 4px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.8125rem; text-align: left; cursor: pointer; @@ -205,7 +205,7 @@ import { FeedSnapshot } from '../../core/api/feed-mirror.models'; .menu-divider { height: 1px; margin: 0.375rem 0; - background: #334155; + background: #3D2E0A; border: none; } `], diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-selector.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-selector.component.ts index 0edacc053..af207f2c6 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-selector.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/snapshot-selector.component.ts @@ -178,7 +178,7 @@ interface SnapshotSelection { .subtitle { margin: 0; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } } @@ -220,12 +220,12 @@ interface SnapshotSelection { &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover:not(:disabled) { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } @@ -238,7 +238,7 @@ interface SnapshotSelection { .feed-card { padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2933; border-radius: 6px; transition: all 0.15s; @@ -269,7 +269,7 @@ interface SnapshotSelection { &--osv { background: rgba(34, 197, 94, 0.2); color: #22c55e; } &--epss { background: rgba(249, 115, 22, 0.2); color: #f97316; } &--kev { background: rgba(239, 68, 68, 0.2); color: #ef4444; } - &--custom { background: rgba(100, 116, 139, 0.2); color: #94a3b8; } + &--custom { background: rgba(100, 116, 139, 0.2); color: #D4C9A8; } } .feed-name { @@ -284,7 +284,7 @@ interface SnapshotSelection { .loading-placeholder { padding: 0.5rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-align: center; } @@ -292,9 +292,9 @@ interface SnapshotSelection { width: 100%; padding: 0.5rem 0.75rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 5px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.8125rem; cursor: pointer; @@ -305,7 +305,7 @@ interface SnapshotSelection { option { background: #111827; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -324,7 +324,7 @@ interface SnapshotSelection { .checksum-label { font-size: 0.625rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; letter-spacing: 0.05em; min-width: 50px; } @@ -333,7 +333,7 @@ interface SnapshotSelection { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; - color: #94a3b8; + color: #D4C9A8; word-break: break-all; overflow: hidden; text-overflow: ellipsis; @@ -346,16 +346,16 @@ interface SnapshotSelection { justify-content: center; padding: 0.25rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 3px; - color: #64748b; + color: #6B5A2E; cursor: pointer; transition: all 0.15s; &:hover { background: #1f2933; - color: #e2e8f0; - border-color: #475569; + color: rgba(212, 201, 168, 0.3); + border-color: #6B5A2E; } } @@ -370,7 +370,7 @@ interface SnapshotSelection { .selection-summary { font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; strong { color: #3b82f6; diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/sync-status-indicator.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/sync-status-indicator.component.ts index 38de860ba..2d1b1cc64 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/sync-status-indicator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/sync-status-indicator.component.ts @@ -112,7 +112,7 @@ import { width: 8px; height: 8px; border-radius: 50%; - background: #64748b; + background: #6B5A2E; &--online { background: #22c55e; @@ -154,12 +154,12 @@ import { .status-text { font-weight: 500; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .sync-time { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .details-toggle { @@ -169,12 +169,12 @@ import { padding: 0; background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; transition: color 0.15s; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } svg { @@ -208,7 +208,7 @@ import { } .detail-label { - color: #64748b; + color: #6B5A2E; } .detail-value { diff --git a/src/Web/StellaOps.Web/src/app/features/feed-mirror/version-lock.component.ts b/src/Web/StellaOps.Web/src/app/features/feed-mirror/version-lock.component.ts index 4fd251d55..a65f3db3f 100644 --- a/src/Web/StellaOps.Web/src/app/features/feed-mirror/version-lock.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/feed-mirror/version-lock.component.ts @@ -351,8 +351,8 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; styles: [` .version-lock-page { padding: 1.5rem; - color: #e2e8f0; - background: #0f172a; + color: rgba(212, 201, 168, 0.3); + background: #1C1200; min-height: calc(100vh - 120px); } @@ -364,14 +364,14 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; display: inline-flex; align-items: center; gap: 0.5rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; margin-bottom: 1rem; transition: color 0.15s; &:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -391,7 +391,7 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; .subtitle { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; } } @@ -424,12 +424,12 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; &--secondary { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; &:hover:not(:disabled) { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } } @@ -439,13 +439,13 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; flex-direction: column; align-items: center; padding: 4rem 2rem; - color: #94a3b8; + color: #D4C9A8; } .loading-spinner { width: 40px; height: 40px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; @@ -472,7 +472,7 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; padding: 0.875rem 1rem; font-size: 0.6875rem; text-transform: uppercase; - color: #64748b; + color: #6B5A2E; font-weight: 500; border-bottom: 1px solid #1f2933; letter-spacing: 0.05em; @@ -524,11 +524,11 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; .version-code { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; } .locked-date { font-size: 0.8125rem; color: #eab308; } - .no-version { color: #64748b; font-style: italic; } + .no-version { color: #6B5A2E; font-style: italic; } .created-info { display: flex; @@ -537,9 +537,9 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; font-size: 0.8125rem; } - .created-by { font-size: 0.6875rem; color: #64748b; } - .notes-text { font-size: 0.8125rem; color: #94a3b8; } - .no-notes { color: #475569; } + .created-by { font-size: 0.6875rem; color: #6B5A2E; } + .notes-text { font-size: 0.8125rem; color: #D4C9A8; } + .no-notes { color: #6B5A2E; } .action-buttons { display: flex; @@ -554,15 +554,15 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; height: 28px; padding: 0; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; transition: all 0.15s; &:hover { background: #1f2933; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } &--active { @@ -585,14 +585,14 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; flex-direction: column; align-items: center; gap: 0.75rem; - color: #64748b; + color: #6B5A2E; p { margin: 0; font-size: 0.9375rem; } } .empty-hint { font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; max-width: 400px; text-align: center; } @@ -633,7 +633,7 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; height: 32px; background: #1f2933; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; flex-shrink: 0; } @@ -644,12 +644,12 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; strong { font-size: 0.8125rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.4; } } @@ -689,10 +689,10 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; padding: 0; background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; - &:hover { color: #e2e8f0; } + &:hover { color: rgba(212, 201, 168, 0.3); } } .modal-body { @@ -717,17 +717,17 @@ import { SnapshotSelectorComponent } from './snapshot-selector.component'; label { font-size: 0.8125rem; font-weight: 500; - color: #94a3b8; + color: #D4C9A8; } } .form-select, .form-input { padding: 0.625rem 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; &:focus { diff --git a/src/Web/StellaOps.Web/src/app/features/graph/graph-canvas.component.ts b/src/Web/StellaOps.Web/src/app/features/graph/graph-canvas.component.ts index 9e1b5d5a4..29cb11deb 100644 --- a/src/Web/StellaOps.Web/src/app/features/graph/graph-canvas.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/graph/graph-canvas.component.ts @@ -176,7 +176,7 @@ const VIEWPORT_PADDING = 100; markerHeight="6" orient="auto-start-reverse" > - + {{ node.version || node.severity || '' }} @@ -402,7 +402,7 @@ const VIEWPORT_PADDING = 100; position: relative; width: 100%; height: 600px; - background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + background: linear-gradient(135deg, #FFFCF5 0%, #FFF9ED 100%); border-radius: 0.75rem; overflow: hidden; cursor: grab; @@ -446,7 +446,7 @@ const VIEWPORT_PADDING = 100; justify-content: center; border: none; background: transparent; - color: #475569; + color: #6B5A2E; font-size: 1rem; font-weight: 600; cursor: pointer; @@ -454,8 +454,8 @@ const VIEWPORT_PADDING = 100; transition: all 0.15s ease; &:hover { - background: #f1f5f9; - color: #1e293b; + background: #FFF9ED; + color: #3D2E0A; } &:focus-visible { @@ -474,7 +474,7 @@ const VIEWPORT_PADDING = 100; min-width: 48px; text-align: center; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; font-variant-numeric: tabular-nums; } @@ -495,20 +495,20 @@ const VIEWPORT_PADDING = 100; padding: 0.5rem 0.75rem; border: none; background: transparent; - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; &:hover { - background: #f1f5f9; - color: #1e293b; + background: #FFF9ED; + color: #3D2E0A; } &--active { background: #F5A623; - color: white; + color: #1C1200; &:hover { background: #E09115; @@ -533,18 +533,18 @@ const VIEWPORT_PADDING = 100; padding: 0.375rem 0.75rem; border-radius: 0.375rem; font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; z-index: 10; } .canvas-info__sep { - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } /* Edges */ .edge { fill: none; - stroke: #94a3b8; + stroke: #D4C9A8; stroke-width: 1.5; transition: stroke 0.15s ease, stroke-width 0.15s ease; @@ -610,7 +610,7 @@ const VIEWPORT_PADDING = 100; } .node-name { - fill: #1e293b; + fill: #3D2E0A; pointer-events: none; } @@ -1155,7 +1155,7 @@ export class GraphCanvasComponent implements OnChanges, AfterViewInit, OnDestroy case 'asset': return '#93c5fd'; case 'component': return '#86efac'; case 'vulnerability': return '#fca5a5'; - default: return '#e2e8f0'; + default: return 'rgba(212, 201, 168, 0.3)'; } } @@ -1165,7 +1165,7 @@ export class GraphCanvasComponent implements OnChanges, AfterViewInit, OnDestroy case 'high': return '#ea580c'; case 'medium': return '#ca8a04'; case 'low': return '#16a34a'; - default: return '#94a3b8'; + default: return '#D4C9A8'; } } @@ -1188,7 +1188,7 @@ export class GraphCanvasComponent implements OnChanges, AfterViewInit, OnDestroy case 'reachable': return '#22c55e'; case 'unreachable': - return '#94a3b8'; + return '#D4C9A8'; default: return '#f59e0b'; } @@ -1199,7 +1199,7 @@ export class GraphCanvasComponent implements OnChanges, AfterViewInit, OnDestroy case 'asset': return '#3b82f6'; case 'component': return '#22c55e'; case 'vulnerability': return '#ef4444'; - default: return '#94a3b8'; + default: return '#D4C9A8'; } } diff --git a/src/Web/StellaOps.Web/src/app/features/graph/graph-filters.component.ts b/src/Web/StellaOps.Web/src/app/features/graph/graph-filters.component.ts index 7edfdb187..8224f2e44 100644 --- a/src/Web/StellaOps.Web/src/app/features/graph/graph-filters.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/graph/graph-filters.component.ts @@ -402,8 +402,8 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; - background: #f8fafc; - border: 1px solid #e2e8f0; + background: #FFFCF5; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; transition: border-color 0.15s ease; @@ -414,7 +414,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ .search-icon { font-size: 1rem; - color: #94a3b8; + color: #D4C9A8; } .search-input { @@ -422,10 +422,10 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ border: none; background: transparent; font-size: 0.875rem; - color: #1e293b; + color: #3D2E0A; &::placeholder { - color: #94a3b8; + color: #D4C9A8; } &:focus { @@ -440,20 +440,20 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ width: 20px; height: 20px; border: none; - background: #e2e8f0; - color: #64748b; + background: rgba(212, 201, 168, 0.3); + color: #6B5A2E; border-radius: 50%; font-size: 0.875rem; cursor: pointer; &:hover { - background: #cbd5e1; + background: rgba(212, 201, 168, 0.5); } } .search-results-count { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; padding-left: 0.25rem; } @@ -462,14 +462,14 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } .filter-section { padding-top: 0.75rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } /* Quick filters */ @@ -485,10 +485,10 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ .quick-chip { padding: 0.375rem 0.625rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 9999px; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; cursor: pointer; transition: all 0.15s ease; @@ -501,7 +501,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ &--active { background: #F5A623; border-color: #F5A623; - color: white; + color: #1C1200; &:hover { background: #E09115; @@ -528,7 +528,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ align-items: center; gap: 0.375rem; font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; cursor: pointer; input { @@ -620,7 +620,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ align-items: center; gap: 0.375rem; font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; cursor: pointer; input { @@ -633,7 +633,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ /* Active filters */ .active-filters { padding: 0.625rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; } @@ -642,7 +642,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ justify-content: space-between; align-items: center; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .clear-all-btn { @@ -661,7 +661,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ /* Saved views */ .saved-views-section { padding-top: 0.75rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } .saved-views__header { @@ -673,10 +673,10 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ .save-view-btn { padding: 0.25rem 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.6875rem; cursor: pointer; @@ -709,14 +709,14 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ border: 1px solid transparent; border-radius: 0.25rem; background: transparent; - color: #475569; + color: #6B5A2E; font-size: 0.8125rem; text-align: left; cursor: pointer; &:hover { - background: #f1f5f9; - border-color: #e2e8f0; + background: #FFF9ED; + border-color: rgba(212, 201, 168, 0.3); } } @@ -725,7 +725,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ height: 20px; border: none; background: transparent; - color: #94a3b8; + color: #D4C9A8; font-size: 1rem; cursor: pointer; opacity: 0; @@ -743,7 +743,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ .saved-views__empty { padding: 0.5rem; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-align: center; } @@ -753,7 +753,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ align-items: center; gap: 0.5rem; padding-top: 0.75rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } .share-btn { @@ -761,10 +761,10 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; background: white; - color: #475569; + color: #6B5A2E; font-size: 0.8125rem; cursor: pointer; @@ -820,7 +820,7 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ margin: 0 0 1rem; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .modal__body { @@ -832,15 +832,15 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ flex-direction: column; gap: 0.375rem; font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } .modal__input { padding: 0.625rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; font-size: 0.875rem; - color: #1e293b; + color: #3D2E0A; &:focus { outline: none; @@ -863,17 +863,17 @@ const MOCK_SAVED_VIEWS: SavedView[] = [ cursor: pointer; &--secondary { - background: #f1f5f9; - color: #64748b; + background: #FFF9ED; + color: #6B5A2E; &:hover { - background: #e2e8f0; + background: rgba(212, 201, 168, 0.3); } } &--primary { background: #F5A623; - color: white; + color: #1C1200; &:hover:not(:disabled) { background: #E09115; diff --git a/src/Web/StellaOps.Web/src/app/features/graph/graph-hotkey-help.component.ts b/src/Web/StellaOps.Web/src/app/features/graph/graph-hotkey-help.component.ts index aeaedb7d0..0629b5934 100644 --- a/src/Web/StellaOps.Web/src/app/features/graph/graph-hotkey-help.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/graph/graph-hotkey-help.component.ts @@ -126,15 +126,15 @@ import { GraphAccessibilityService, HotkeyBinding } from './graph-accessibility. justify-content: space-between; align-items: center; padding: 1rem 1.25rem; - border-bottom: 1px solid #e2e8f0; - background: #f8fafc; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); + background: #FFFCF5; } .hotkey-help__title { margin: 0; font-size: 1.125rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .hotkey-help__close { @@ -145,14 +145,14 @@ import { GraphAccessibilityService, HotkeyBinding } from './graph-accessibility. height: 32px; border: none; background: transparent; - color: #64748b; + color: #6B5A2E; font-size: 1.5rem; cursor: pointer; border-radius: 0.375rem; &:hover { - background: #e2e8f0; - color: #1e293b; + background: rgba(212, 201, 168, 0.3); + color: #3D2E0A; } &:focus-visible { @@ -179,7 +179,7 @@ import { GraphAccessibilityService, HotkeyBinding } from './graph-accessibility. margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -204,30 +204,30 @@ import { GraphAccessibilityService, HotkeyBinding } from './graph-accessibility. min-width: 28px; height: 24px; padding: 0 0.5rem; - background: #f1f5f9; - border: 1px solid #e2e8f0; + background: #FFF9ED; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; font-family: ui-monospace, monospace; font-size: 0.6875rem; - color: #475569; + color: #6B5A2E; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .hotkey-description { font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; } .hotkey-help__footer { padding: 0.75rem 1.25rem; - border-top: 1px solid #e2e8f0; - background: #f8fafc; + border-top: 1px solid rgba(212, 201, 168, 0.3); + background: #FFFCF5; } .hotkey-help__hint { margin: 0; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-align: center; kbd { @@ -238,7 +238,7 @@ import { GraphAccessibilityService, HotkeyBinding } from './graph-accessibility. height: 18px; padding: 0 0.375rem; background: white; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; font-family: ui-monospace, monospace; font-size: 0.625rem; diff --git a/src/Web/StellaOps.Web/src/app/features/graph/graph-overlays.component.ts b/src/Web/StellaOps.Web/src/app/features/graph/graph-overlays.component.ts index 410ccc9a1..80c5a5ba0 100644 --- a/src/Web/StellaOps.Web/src/app/features/graph/graph-overlays.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/graph/graph-overlays.component.ts @@ -596,10 +596,10 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.8125rem; cursor: pointer; transition: all 0.15s ease; @@ -607,7 +607,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< &:hover { border-color: var(--overlay-color, #F5A623); - color: #1e293b; + color: #3D2E0A; } &--active { @@ -643,7 +643,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.75rem; padding: 0.5rem 0; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } .simulation-toggle__label { @@ -651,7 +651,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.5rem; font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; cursor: pointer; input { @@ -683,7 +683,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< flex-wrap: wrap; gap: 1rem; padding: 0.75rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.5rem; } @@ -696,7 +696,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -712,7 +712,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.375rem; font-size: 0.75rem; - color: #475569; + color: #6B5A2E; } .legend-dot { @@ -723,11 +723,11 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< &--pass { background: #22c55e; } &--warn { background: #f59e0b; } &--block { background: #ef4444; } - &--unknown { background: #94a3b8; } + &--unknown { background: #D4C9A8; } &--evidence-high { background: #3b82f6; } &--evidence-medium { background: #60a5fa; } - &--evidence-none { background: #cbd5e1; } + &--evidence-none { background: rgba(212, 201, 168, 0.5); } &--license-permissive { background: #22c55e; } &--license-copyleft { background: #f59e0b; } @@ -738,14 +738,14 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< &--exposure-isolated { background: #22c55e; } &--reachability-reachable { background: #22c55e; } - &--reachability-unreachable { background: #94a3b8; } + &--reachability-unreachable { background: #D4C9A8; } &--reachability-unknown { background: #f59e0b; } } /* Overlay details */ .overlay-details { padding: 0.75rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.5rem; } @@ -753,7 +753,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -761,7 +761,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< .overlay-detail-card { padding: 0.625rem; background: white; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; margin-bottom: 0.5rem; @@ -784,14 +784,14 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< flex: 1; font-size: 0.8125rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .overlay-detail-card__list { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.75rem; - color: #475569; + color: #6B5A2E; li { margin-bottom: 0.25rem; @@ -801,7 +801,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< .overlay-detail-card__info { margin-top: 0.375rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .overlay-detail-card__warning { @@ -816,8 +816,8 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< font-size: 0.6875rem; font-weight: 500; text-transform: capitalize; - background: #f1f5f9; - color: #64748b; + background: #FFF9ED; + color: #6B5A2E; &--pass { background: #dcfce7; @@ -835,8 +835,8 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< } &--none { - background: #f1f5f9; - color: #94a3b8; + background: #FFF9ED; + color: #D4C9A8; } } @@ -852,7 +852,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< /* Path view */ .path-view-section { padding-top: 0.75rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } .path-view-btn { @@ -860,17 +860,17 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.8125rem; cursor: pointer; transition: all 0.15s ease; &:hover { border-color: #F5A623; - color: #1e293b; + color: #3D2E0A; } &--active { @@ -886,7 +886,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< gap: 0.75rem; margin-top: 0.5rem; padding: 0.5rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; label { @@ -894,7 +894,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.375rem; font-size: 0.75rem; - color: #475569; + color: #6B5A2E; cursor: pointer; input { @@ -908,7 +908,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< /* Time travel */ .time-travel-section { padding-top: 0.75rem; - border-top: 1px solid #f1f5f9; + border-top: 1px solid #FFF9ED; } .time-travel-btn { @@ -916,17 +916,17 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.8125rem; cursor: pointer; transition: all 0.15s ease; &:hover { border-color: #7c3aed; - color: #1e293b; + color: #3D2E0A; } &--active { @@ -942,7 +942,7 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< gap: 0.5rem; margin-top: 0.5rem; padding: 0.5rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; } @@ -958,13 +958,13 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< .time-slider__label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; white-space: nowrap; } .time-travel-select { padding: 0.375rem 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; font-size: 0.75rem; background: white; @@ -978,10 +978,10 @@ function generateMockReachabilityData(nodeIds: string[], snapshot: string): Map< .diff-btn { padding: 0.375rem 0.625rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; background: white; - color: #475569; + color: #6B5A2E; font-size: 0.75rem; cursor: pointer; transition: all 0.15s ease; diff --git a/src/Web/StellaOps.Web/src/app/features/graph/graph-side-panels.component.ts b/src/Web/StellaOps.Web/src/app/features/graph/graph-side-panels.component.ts index 1f461a092..263b5bd79 100644 --- a/src/Web/StellaOps.Web/src/app/features/graph/graph-side-panels.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/graph/graph-side-panels.component.ts @@ -588,8 +588,8 @@ function generateMockDiff(): SbomDiff { /* Tabs */ .panel-tabs { display: flex; - border-bottom: 1px solid #e2e8f0; - background: #f8fafc; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); + background: #FFFCF5; } .panel-tab { @@ -597,7 +597,7 @@ function generateMockDiff(): SbomDiff { padding: 0.75rem 0.5rem; border: none; background: transparent; - color: #64748b; + color: #6B5A2E; font-size: 0.8125rem; font-weight: 500; cursor: pointer; @@ -605,8 +605,8 @@ function generateMockDiff(): SbomDiff { position: relative; &:hover { - color: #1e293b; - background: #f1f5f9; + color: #3D2E0A; + background: #FFF9ED; } &--active { @@ -653,19 +653,19 @@ function generateMockDiff(): SbomDiff { margin: 0; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .details-header__type { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: capitalize; } .details-section { margin-bottom: 1rem; padding-bottom: 0.75rem; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid #FFF9ED; &:last-child { margin-bottom: 0; @@ -678,7 +678,7 @@ function generateMockDiff(): SbomDiff { margin: 0 0 0.375rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -686,7 +686,7 @@ function generateMockDiff(): SbomDiff { .purl-display { display: block; padding: 0.5rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.25rem; font-size: 0.75rem; font-family: ui-monospace, monospace; @@ -696,10 +696,10 @@ function generateMockDiff(): SbomDiff { .copy-btn { padding: 0.25rem 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; background: white; - color: #64748b; + color: #6B5A2E; font-size: 0.6875rem; cursor: pointer; @@ -711,13 +711,13 @@ function generateMockDiff(): SbomDiff { .details-value { font-size: 0.875rem; - color: #1e293b; + color: #3D2E0A; } .details-description { margin: 0; font-size: 0.8125rem; - color: #475569; + color: #6B5A2E; line-height: 1.5; } @@ -732,13 +732,13 @@ function generateMockDiff(): SbomDiff { margin-bottom: 0.25rem; dt { - color: #64748b; + color: #6B5A2E; min-width: 80px; } dd { margin: 0; - color: #1e293b; + color: #3D2E0A; } } @@ -768,7 +768,7 @@ function generateMockDiff(): SbomDiff { align-items: center; gap: 0.5rem; padding: 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; background: white; cursor: pointer; @@ -777,7 +777,7 @@ function generateMockDiff(): SbomDiff { &:hover { border-color: #F5A623; - background: #f8fafc; + background: #FFFCF5; } } @@ -788,12 +788,12 @@ function generateMockDiff(): SbomDiff { .related-item__name { flex: 1; font-size: 0.8125rem; - color: #1e293b; + color: #3D2E0A; } .related-item__relation { font-size: 0.6875rem; - color: #94a3b8; + color: #D4C9A8; } /* Severity badge */ @@ -834,20 +834,20 @@ function generateMockDiff(): SbomDiff { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .whatif-description { margin: 0; font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } .scenarios-title { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -860,7 +860,7 @@ function generateMockDiff(): SbomDiff { .scenario-card { padding: 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease; @@ -871,7 +871,7 @@ function generateMockDiff(): SbomDiff { &--selected { border-color: #F5A623; - background: #f8fafc; + background: #FFFCF5; } } @@ -889,13 +889,13 @@ function generateMockDiff(): SbomDiff { .scenario-card__name { font-size: 0.8125rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .scenario-card__description { margin: 0 0 0.5rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .scenario-card__impact { @@ -909,8 +909,8 @@ function generateMockDiff(): SbomDiff { border-radius: 0.25rem; font-size: 0.625rem; font-weight: 500; - background: #f1f5f9; - color: #64748b; + background: #FFF9ED; + color: #6B5A2E; &--positive { background: #dcfce7; @@ -931,7 +931,7 @@ function generateMockDiff(): SbomDiff { .scenario-details { margin-top: 1rem; padding: 0.75rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.5rem; } @@ -939,7 +939,7 @@ function generateMockDiff(): SbomDiff { margin: 0 0 0.5rem; font-size: 0.6875rem; font-weight: 600; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -958,13 +958,13 @@ function generateMockDiff(): SbomDiff { .impact-item__label { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .impact-item__value { font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; &--positive { color: #16a34a; @@ -990,7 +990,7 @@ function generateMockDiff(): SbomDiff { &--primary { background: #F5A623; - color: white; + color: #1C1200; &:hover { background: #E09115; @@ -999,8 +999,8 @@ function generateMockDiff(): SbomDiff { &--secondary { background: white; - border: 1px solid #e2e8f0; - color: #475569; + border: 1px solid rgba(212, 201, 168, 0.3); + color: #6B5A2E; &:hover { border-color: #F5A623; @@ -1021,12 +1021,12 @@ function generateMockDiff(): SbomDiff { margin: 0; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .history-filter { padding: 0.375rem 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; font-size: 0.75rem; background: white; @@ -1043,7 +1043,7 @@ function generateMockDiff(): SbomDiff { display: flex; gap: 0.75rem; padding: 0.625rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; } @@ -1093,13 +1093,13 @@ function generateMockDiff(): SbomDiff { .history-entry__name { font-size: 0.8125rem; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .history-entry__details { margin: 0; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .history-entry__meta { @@ -1107,7 +1107,7 @@ function generateMockDiff(): SbomDiff { gap: 0.5rem; margin-top: 0.25rem; font-size: 0.6875rem; - color: #94a3b8; + color: #D4C9A8; } /* Diff Panel */ @@ -1119,7 +1119,7 @@ function generateMockDiff(): SbomDiff { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .diff-selector { @@ -1130,7 +1130,7 @@ function generateMockDiff(): SbomDiff { .diff-select { padding: 0.375rem 0.5rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; font-size: 0.75rem; background: white; @@ -1138,15 +1138,15 @@ function generateMockDiff(): SbomDiff { } .diff-arrow { - color: #64748b; + color: #6B5A2E; } .diff-btn { padding: 0.375rem 0.625rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.25rem; background: white; - color: #475569; + color: #6B5A2E; font-size: 0.75rem; cursor: pointer; @@ -1168,7 +1168,7 @@ function generateMockDiff(): SbomDiff { .diff-summary__total { font-size: 0.8125rem; font-weight: 500; - color: #475569; + color: #6B5A2E; } .diff-section { @@ -1239,22 +1239,22 @@ function generateMockDiff(): SbomDiff { .diff-item__name { flex: 1; font-weight: 500; - color: #1e293b; + color: #3D2E0A; } .diff-item__version, .diff-item__versions { - color: #64748b; + color: #6B5A2E; font-family: ui-monospace, monospace; } .diff-item__type { - color: #94a3b8; + color: #D4C9A8; } .diff-empty { padding: 2rem; text-align: center; - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; } @@ -1265,7 +1265,7 @@ function generateMockDiff(): SbomDiff { align-items: center; justify-content: center; padding: 3rem 1rem; - color: #94a3b8; + color: #D4C9A8; text-align: center; } diff --git a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-detail.component.ts index 7e203bdd6..01f7a19ea 100644 --- a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-detail.component.ts @@ -274,7 +274,7 @@ import { .btn-primary { background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; } @@ -286,7 +286,7 @@ import { .btn-danger { background: #dc3545; - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-hub.component.ts b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-hub.component.ts index 27b1a79d6..f490f28d8 100644 --- a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-hub.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-hub.component.ts @@ -143,7 +143,7 @@ import { IntegrationListResponse, IntegrationType } from './integration.models'; .btn-primary { background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-list.component.ts b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-list.component.ts index 729c4bf3e..eb3bae1bd 100644 --- a/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/integration-hub/integration-list.component.ts @@ -225,7 +225,7 @@ import { .btn-primary { padding: 0.75rem 1.5rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; font-weight: 500; diff --git a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-detail.component.ts index aeb173c94..d1b4dac5a 100644 --- a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-detail.component.ts @@ -122,7 +122,7 @@ interface IssuerDetail { } .back-link { - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; } @@ -149,7 +149,7 @@ interface IssuerDetail { .issuer-detail__desc { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0; } @@ -178,7 +178,7 @@ interface IssuerDetail { .detail-section { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; @@ -211,7 +211,7 @@ interface IssuerDetail { .keys-table th { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; font-weight: 500; } @@ -238,7 +238,7 @@ interface IssuerDetail { .key-revoked { background: rgba(239, 68, 68, 0.15); color: #f87171; } .text-muted { - color: #94a3b8; + color: #D4C9A8; } .bundle-list { @@ -280,8 +280,8 @@ interface IssuerDetail { text-decoration: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } - .btn--secondary { background: #334155; color: #e5e7eb; } + .btn--primary { background: #22d3ee; color: #1C1200; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; } .btn--danger { background: rgba(239, 68, 68, 0.15); color: #f87171; } .btn--small { padding: 0.375rem 0.75rem; font-size: 0.75rem; } `], diff --git a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-editor.component.ts index ab8301025..8595c6752 100644 --- a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-editor.component.ts @@ -76,7 +76,7 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; } .back-link { - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; } @@ -90,7 +90,7 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; .form-section { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; @@ -110,15 +110,15 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; .form-group label { display: block; font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.375rem; } .form-input { width: 100%; padding: 0.5rem 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -157,8 +157,8 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; cursor: not-allowed; } - .btn--primary { background: #22d3ee; color: #0f172a; } - .btn--secondary { background: #334155; color: #e5e7eb; } + .btn--primary { background: #22d3ee; color: #1C1200; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; } `], }) export class IssuerEditorComponent { diff --git a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-list.component.ts b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-list.component.ts index 8abe7ae33..d97118514 100644 --- a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/issuer-list.component.ts @@ -122,8 +122,8 @@ interface Issuer { .search-input, .filter-select { padding: 0.5rem 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -146,7 +146,7 @@ interface Issuer { .issuer-card { background: rgba(30, 41, 59, 0.6); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; } @@ -167,7 +167,7 @@ interface Issuer { .issuer-card__description { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0 0 1rem; } @@ -202,7 +202,7 @@ interface Issuer { .meta-label { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -235,11 +235,11 @@ interface Issuer { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -252,7 +252,7 @@ interface Issuer { grid-column: 1 / -1; text-align: center; padding: 3rem; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/key-rotation.component.ts b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/key-rotation.component.ts index f59f03d75..40f9e38a4 100644 --- a/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/key-rotation.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/issuer-trust/components/key-rotation.component.ts @@ -87,7 +87,7 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; } .back-link { - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; } @@ -111,7 +111,7 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; .form-section { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; @@ -136,7 +136,7 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; .key-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -157,15 +157,15 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; .form-group label { display: block; font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.375rem; } .form-input { width: 100%; padding: 0.5rem 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -214,8 +214,8 @@ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms'; cursor: not-allowed; } - .btn--secondary { background: #334155; color: #e5e7eb; } - .btn--warning { background: #fbbf24; color: #0f172a; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; } + .btn--warning { background: #fbbf24; color: #1C1200; } `], }) export class KeyRotationComponent implements OnInit { diff --git a/src/Web/StellaOps.Web/src/app/features/issuer-trust/issuer-trust.component.ts b/src/Web/StellaOps.Web/src/app/features/issuer-trust/issuer-trust.component.ts index fac0177ee..330477795 100644 --- a/src/Web/StellaOps.Web/src/app/features/issuer-trust/issuer-trust.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/issuer-trust/issuer-trust.component.ts @@ -75,7 +75,7 @@ type TabType = 'list' | 'detail'; .issuer-trust__subtitle { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0; } @@ -86,7 +86,7 @@ type TabType = 'list' | 'detail'; .stat-card { background: rgba(30, 41, 59, 0.6); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 0.75rem 1.25rem; text-align: center; @@ -111,7 +111,7 @@ type TabType = 'list' | 'detail'; .stat-label { display: block; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } diff --git a/src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-export-dialog/lineage-export-dialog.component.ts b/src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-export-dialog/lineage-export-dialog.component.ts index 453a208fa..bdf4498bd 100644 --- a/src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-export-dialog/lineage-export-dialog.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/lineage/components/lineage-export-dialog/lineage-export-dialog.component.ts @@ -558,7 +558,7 @@ import { ExportFormat, ExportOptions } from '../../services/lineage-export.servi .btn-primary { background: #28a745; - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { diff --git a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/bundle-management.component.ts b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/bundle-management.component.ts index ccd377548..b055f7f7b 100644 --- a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/bundle-management.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/bundle-management.component.ts @@ -142,7 +142,7 @@ interface LoadedBundle { .description { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: 0; } @@ -154,7 +154,7 @@ interface LoadedBundle { .section-card { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.5rem; } @@ -168,7 +168,7 @@ interface LoadedBundle { .section-description { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: -0.5rem 0 1rem; } @@ -180,7 +180,7 @@ interface LoadedBundle { .bundle-card { background: rgba(15, 23, 42, 0.5); - border: 1px solid #1e293b; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1rem; } @@ -244,7 +244,7 @@ interface LoadedBundle { .meta-label { font-size: 0.65rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -266,7 +266,7 @@ interface LoadedBundle { .category-card { background: rgba(15, 23, 42, 0.5); - border: 1px solid #1e293b; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1rem; } @@ -294,7 +294,7 @@ interface LoadedBundle { .category-count { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .category-assets { @@ -314,7 +314,7 @@ interface LoadedBundle { } .asset-name { - color: #94a3b8; + color: #D4C9A8; font-family: ui-monospace, monospace; } @@ -325,7 +325,7 @@ interface LoadedBundle { .empty-state { text-align: center; padding: 2rem; - color: #64748b; + color: #6B5A2E; } .btn { @@ -345,7 +345,7 @@ interface LoadedBundle { } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } diff --git a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/jwks-management.component.ts b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/jwks-management.component.ts index 7e2b24c0e..0104e5b80 100644 --- a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/jwks-management.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/jwks-management.component.ts @@ -211,7 +211,7 @@ interface TrustAnchor { .description { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: 0; } @@ -223,7 +223,7 @@ interface TrustAnchor { .section-card { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.5rem; } @@ -244,7 +244,7 @@ interface TrustAnchor { .section-description { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: 0 0 1rem; } @@ -269,7 +269,7 @@ interface TrustAnchor { .status-label { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -297,13 +297,13 @@ interface TrustAnchor { .keys-list h4 { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0 0 0.75rem; } .key-card { background: rgba(15, 23, 42, 0.5); - border: 1px solid #1e293b; + border: 1px solid #3D2E0A; border-left: 3px solid #4ade80; border-radius: 6px; padding: 1rem; @@ -356,13 +356,13 @@ interface TrustAnchor { .detail-label { font-size: 0.65rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } .detail-value { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .source-badge { @@ -385,12 +385,12 @@ interface TrustAnchor { .key-expiry { margin-top: 0.75rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .anchor-card { background: rgba(15, 23, 42, 0.5); - border: 1px solid #1e293b; + border: 1px solid #3D2E0A; border-radius: 6px; padding: 1rem; margin-bottom: 0.75rem; @@ -436,18 +436,18 @@ interface TrustAnchor { .fingerprint-label { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; } .fingerprint-value { font-family: ui-monospace, monospace; font-size: 0.7rem; - color: #94a3b8; + color: #D4C9A8; } .anchor-validity { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.75rem; } @@ -469,7 +469,7 @@ interface TrustAnchor { .form-group label { display: block; font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.5rem; } @@ -478,7 +478,7 @@ interface TrustAnchor { min-height: 120px; padding: 0.75rem; background: rgba(15, 23, 42, 0.5); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-family: ui-monospace, monospace; @@ -487,7 +487,7 @@ interface TrustAnchor { } .token-input::placeholder { - color: #475569; + color: #6B5A2E; } .validation-result { @@ -524,7 +524,7 @@ interface TrustAnchor { .result-message { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0.5rem 0 0; } @@ -534,13 +534,13 @@ interface TrustAnchor { .result-claims h5 { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin: 0 0 0.5rem; } .result-claims pre { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; background: rgba(15, 23, 42, 0.5); padding: 0.75rem; border-radius: 4px; @@ -567,7 +567,7 @@ interface TrustAnchor { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:disabled { @@ -576,14 +576,14 @@ interface TrustAnchor { } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } .btn--ghost { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; } .spinner { diff --git a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/offline-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/offline-dashboard.component.ts index 34a11b827..01d1fc96e 100644 --- a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/offline-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/offline-dashboard.component.ts @@ -141,7 +141,7 @@ interface DashboardStats { .stat-card { background: rgba(30, 41, 59, 0.6); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; display: flex; @@ -151,7 +151,7 @@ interface DashboardStats { .stat-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -169,7 +169,7 @@ interface DashboardStats { .dashboard-card { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.5rem; } @@ -228,7 +228,7 @@ interface DashboardStats { .mode-description { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0; } @@ -273,7 +273,7 @@ interface DashboardStats { .feature-status { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; } .availability-dot { @@ -316,7 +316,7 @@ interface DashboardStats { .activity-time { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; } .btn { @@ -333,11 +333,11 @@ interface DashboardStats { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -345,7 +345,7 @@ interface DashboardStats { width: 14px; height: 14px; border: 2px solid rgba(15, 23, 42, 0.3); - border-top-color: #0f172a; + border-top-color: #1C1200; border-radius: 50%; animation: spin 0.8s linear infinite; } diff --git a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/verification-center.component.ts b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/verification-center.component.ts index 95195c270..709b5adee 100644 --- a/src/Web/StellaOps.Web/src/app/features/offline-kit/components/verification-center.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/offline-kit/components/verification-center.component.ts @@ -104,7 +104,7 @@ interface VerificationHistory { .description { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: 0; } @@ -116,7 +116,7 @@ interface VerificationHistory { .section-card { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.5rem; } @@ -179,12 +179,12 @@ interface VerificationHistory { .history-meta { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .history-time { font-size: 0.7rem; - color: #475569; + color: #6B5A2E; } .quick-actions { @@ -200,7 +200,7 @@ interface VerificationHistory { gap: 0.5rem; padding: 1.5rem 1rem; background: rgba(15, 23, 42, 0.5); - border: 1px solid #1e293b; + border: 1px solid #3D2E0A; border-radius: 8px; cursor: pointer; transition: border-color 0.2s, background 0.2s; @@ -208,7 +208,7 @@ interface VerificationHistory { } .action-card:hover { - border-color: #334155; + border-color: #3D2E0A; background: rgba(30, 41, 59, 0.5); } @@ -224,19 +224,19 @@ interface VerificationHistory { .action-desc { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .empty-state { text-align: center; padding: 2rem; - color: #64748b; + color: #6B5A2E; } .btn--ghost { background: transparent; - border: 1px solid #334155; - color: #94a3b8; + border: 1px solid #3D2E0A; + color: #D4C9A8; padding: 0.375rem 0.75rem; border-radius: 4px; font-size: 0.75rem; diff --git a/src/Web/StellaOps.Web/src/app/features/offline-kit/offline-kit.component.ts b/src/Web/StellaOps.Web/src/app/features/offline-kit/offline-kit.component.ts index 7c54ee81f..b5ab59f22 100644 --- a/src/Web/StellaOps.Web/src/app/features/offline-kit/offline-kit.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/offline-kit/offline-kit.component.ts @@ -68,7 +68,7 @@ import { OfflineModeService } from '../../core/services/offline-mode.service'; styles: [` .offline-kit-layout { min-height: 100%; - background: #0f172a; + background: #1C1200; } .page-header { @@ -76,19 +76,19 @@ import { OfflineModeService } from '../../core/services/offline-mode.service'; justify-content: space-between; align-items: flex-start; padding: 1.5rem 2rem; - border-bottom: 1px solid #1e293b; + border-bottom: 1px solid #3D2E0A; } .header-content h1 { font-size: 1.5rem; font-weight: 600; - color: #f1f5f9; + color: #FFF9ED; margin: 0 0 0.25rem; } .subtitle { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; margin: 0; } @@ -133,8 +133,8 @@ import { OfflineModeService } from '../../core/services/offline-mode.service'; display: flex; gap: 0.25rem; padding: 0 2rem; - background: #0f172a; - border-bottom: 1px solid #1e293b; + background: #1C1200; + border-bottom: 1px solid #3D2E0A; } .tab-link { @@ -142,7 +142,7 @@ import { OfflineModeService } from '../../core/services/offline-mode.service'; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; - color: #64748b; + color: #6B5A2E; text-decoration: none; font-size: 0.875rem; font-weight: 500; @@ -151,7 +151,7 @@ import { OfflineModeService } from '../../core/services/offline-mode.service'; } .tab-link:hover { - color: #94a3b8; + color: #D4C9A8; } .tab-link.active { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts index b04b4cf4b..ac5e24df6 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/airgap-mode-switch/airgap-mode-switch.component.ts @@ -118,8 +118,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .airgap-container { position: relative; padding: 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 8px; transition: border-color 0.2s; @@ -163,7 +163,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .header-title { font-size: 0.9375rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .airgap-container--sealed .header-title { @@ -172,7 +172,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .header-subtitle { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .toggle-btn { @@ -193,7 +193,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; align-items: center; width: 44px; height: 24px; - background: #334155; + background: #3D2E0A; border-radius: 12px; transition: background 0.2s; } @@ -206,7 +206,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; width: 20px; height: 20px; margin: 2px; - background: #e2e8f0; + background: rgba(212, 201, 168, 0.3); border-radius: 50%; transition: transform 0.2s; } @@ -221,7 +221,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; } .status-row { @@ -239,11 +239,11 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; } .status-label { - color: #64748b; + color: #6B5A2E; } .status-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); &--ok { color: #10b981; @@ -299,7 +299,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .spinner { width: 24px; height: 24px; - border: 2px solid #334155; + border: 2px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.6s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts index 18203d47c..85f8e3627 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/bundle-simulator/bundle-simulator.component.ts @@ -206,12 +206,12 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- margin: 0; font-size: 1.125rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .header-subtitle { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; } .simulator-controls { @@ -219,8 +219,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- flex-direction: column; gap: 1rem; padding: 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 8px; } @@ -274,8 +274,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .result-summary { padding: 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 8px; &--pass { border-top: 3px solid #10b981; } @@ -298,7 +298,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .summary-duration { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .summary-stats { @@ -315,7 +315,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .stat-value { font-size: 1.5rem; font-weight: 700; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .stat-item--blocking .stat-value { color: #ef4444; } @@ -323,7 +323,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .stat-label { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -392,27 +392,27 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .artifacts-title { font-size: 0.875rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .expand-all-btn { padding: 0.25rem 0.5rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; cursor: pointer; &:hover { background: rgba(255, 255, 255, 0.05); - border-color: #475569; + border-color: #6B5A2E; } } .artifact-item { - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; overflow: hidden; @@ -422,7 +422,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- &--error { border-left: 3px solid #6b7280; } &--expanded { - border-color: #475569; + border-color: #6B5A2E; } } @@ -434,7 +434,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- padding: 0.75rem; background: transparent; border: none; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); text-align: left; cursor: pointer; @@ -455,17 +455,17 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .artifact-gates { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .expand-icon { font-size: 0.625rem; - color: #64748b; + color: #6B5A2E; } .artifact-details { padding: 0.75rem; - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; background: rgba(0, 0, 0, 0.2); } @@ -516,13 +516,13 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- } .gate-name { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 500; min-width: 100px; } .gate-detail { - color: #64748b; + color: #6B5A2E; flex: 1; } @@ -533,8 +533,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- justify-content: center; gap: 0.5rem; padding: 3rem; - background: #1e293b; - border: 1px dashed #334155; + background: #3D2E0A; + border: 1px dashed #3D2E0A; border-radius: 8px; } @@ -545,7 +545,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .empty-text { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; text-align: center; } `], diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts index 582e16e26..6f6e8b69b 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/feed-freshness-badges/feed-freshness-badges.component.ts @@ -105,8 +105,8 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; flex-direction: column; gap: 0.75rem; padding: 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; } @@ -119,7 +119,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .header-title { font-size: 0.8125rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); text-transform: uppercase; letter-spacing: 0.03em; } @@ -145,7 +145,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .freshness-summary { padding-bottom: 0.5rem; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; } .summary-counts { @@ -167,7 +167,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .count-label { font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } @@ -202,7 +202,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; &--fresh { .badge-indicator { background: #10b981; } - .badge-name { color: #e2e8f0; } + .badge-name { color: rgba(212, 201, 168, 0.3); } } &--warning { @@ -232,24 +232,24 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; } .badge-age { - color: #64748b; + color: #6B5A2E; font-size: 0.6875rem; } .show-more-btn { padding: 0.25rem 0.5rem; background: transparent; - border: 1px dashed #475569; + border: 1px dashed #6B5A2E; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; &:hover { background: rgba(255, 255, 255, 0.05); - border-color: #64748b; - color: #e2e8f0; + border-color: #6B5A2E; + color: rgba(212, 201, 168, 0.3); } } @@ -260,17 +260,17 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; gap: 0.375rem; padding: 0.5rem 0.75rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; &:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); - border-color: #475569; - color: #e2e8f0; + border-color: #6B5A2E; + color: rgba(212, 201, 168, 0.3); } &:disabled { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts index 29d469bd6..83d00eaa9 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/gate-simulation-results/gate-simulation-results.component.ts @@ -138,8 +138,8 @@ import { `, styles: [` .simulation-results { - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 8px; overflow: hidden; @@ -165,7 +165,7 @@ import { align-items: center; justify-content: space-between; padding: 1rem; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; } .header-status { @@ -193,10 +193,10 @@ import { .meta-item { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; strong { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } } @@ -250,7 +250,7 @@ import { .alert-items { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; font-family: monospace; } @@ -268,12 +268,12 @@ import { .section-title { font-size: 0.875rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .section-count { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .gates-list { @@ -284,7 +284,7 @@ import { .gate-item { background: rgba(255, 255, 255, 0.03); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; overflow: hidden; transition: border-color 0.15s; @@ -298,7 +298,7 @@ import { } &--expanded { - border-color: #475569; + border-color: #6B5A2E; } } @@ -310,7 +310,7 @@ import { padding: 0.625rem 0.75rem; background: transparent; border: none; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.8125rem; text-align: left; cursor: pointer; @@ -356,30 +356,30 @@ import { background: rgba(255, 255, 255, 0.05); border-radius: 4px; font-size: 0.6875rem; - color: #64748b; + color: #6B5A2E; } .expand-arrow { font-size: 0.625rem; - color: #64748b; + color: #6B5A2E; } .gate-details { padding: 0.75rem; - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; background: rgba(0, 0, 0, 0.2); } .gate-detail-text { margin: 0 0 0.5rem 0; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.4; } .gate-detail-meta { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .results-footer { @@ -388,19 +388,19 @@ import { gap: 1rem; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.2); - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; } .footer-item { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; code { padding: 0.125rem 0.25rem; background: rgba(255, 255, 255, 0.05); border-radius: 3px; font-family: monospace; - color: #94a3b8; + color: #D4C9A8; } } `], diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts index 08b694b86..da1a10180 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/policy-preview-panel/policy-preview-panel.component.ts @@ -227,13 +227,13 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- display: flex; flex-direction: column; height: 100%; - background: #0f172a; - color: #e2e8f0; + background: #1C1200; + color: rgba(212, 201, 168, 0.3); } .panel-header { padding: 1.5rem; - border-bottom: 1px solid #1e293b; + border-bottom: 1px solid #3D2E0A; } .panel-title { @@ -245,7 +245,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .panel-subtitle { margin: 0; font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; } .panel-content { @@ -260,8 +260,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- flex-direction: column; gap: 1rem; padding: 1rem; - background: #0f172a; - border-right: 1px solid #1e293b; + background: #1C1200; + border-right: 1px solid #3D2E0A; overflow-y: auto; } @@ -314,7 +314,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .profile-description { margin: 0; font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.5; } @@ -326,8 +326,8 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .requirement-card { padding: 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 8px; } @@ -335,7 +335,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- margin: 0 0 0.75rem 0; font-size: 0.875rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .requirement-list { @@ -350,7 +350,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- align-items: center; gap: 0.5rem; padding: 0.5rem 0; - border-bottom: 1px solid #334155; + border-bottom: 1px solid #3D2E0A; font-size: 0.8125rem; &:last-child { @@ -365,7 +365,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .req-type { font-family: monospace; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .req-badge { @@ -382,26 +382,26 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- &--optional { background: rgba(100, 116, 139, 0.2); - color: #94a3b8; + color: #D4C9A8; } } .req-detail { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .req-label { - color: #64748b; + color: #6B5A2E; } .req-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .no-requirements { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; font-style: italic; } @@ -450,13 +450,13 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .no-failures { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; font-style: italic; } .simulation-section { padding-top: 1.5rem; - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; } .simulation-header { @@ -483,7 +483,7 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- align-items: center; gap: 0.5rem; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; input { @@ -548,12 +548,12 @@ import { GateSimulationResultsComponent } from '../gate-simulation-results/gate- .empty-title { font-size: 1.125rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .empty-text { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; text-align: center; max-width: 300px; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts index 124c55e65..e67b88091 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-gates/components/profile-selector/profile-selector.component.ts @@ -115,7 +115,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .selector-label { font-size: 0.875rem; font-weight: 500; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .selector-wrapper { @@ -127,10 +127,10 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .selector-select { width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.875rem; cursor: pointer; appearance: none; @@ -140,7 +140,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; background-size: 1rem; &:hover:not(:disabled) { - border-color: #475569; + border-color: #6B5A2E; } &:focus { @@ -165,7 +165,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .spinner { width: 1rem; height: 1rem; - border: 2px solid #334155; + border: 2px solid #3D2E0A; border-top-color: #3b82f6; border-radius: 50%; 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: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; } @@ -212,7 +212,7 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; .preview-description { margin: 0 0 0.75rem 0; font-size: 0.8125rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.4; } @@ -230,11 +230,11 @@ import { POLICY_GATES_API } from '../../../../core/api/policy-gates.client'; } .requirement-label { - color: #64748b; + color: #6B5A2E; } .requirement-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); &.hard-failures { color: #ef4444; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/conflict-resolution-wizard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/conflict-resolution-wizard.component.ts index ec6788422..7037f8b85 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/conflict-resolution-wizard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/conflict-resolution-wizard.component.ts @@ -410,19 +410,19 @@ import { } .breadcrumb__link:hover { text-decoration: underline; } - .breadcrumb__sep { color: #64748b; } - .breadcrumb__current { color: #94a3b8; } + .breadcrumb__sep { color: #6B5A2E; } + .breadcrumb__current { color: #D4C9A8; } .wizard__title { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .wizard__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -448,7 +448,7 @@ import { } .wizard-step:hover { - background: #1e293b; + background: #3D2E0A; } .wizard-step__number { @@ -458,28 +458,28 @@ import { align-items: center; justify-content: center; border-radius: 50%; - background: #334155; - color: #94a3b8; + background: #3D2E0A; + color: #D4C9A8; font-size: 0.85rem; font-weight: 600; } .wizard-step__label { font-size: 0.9rem; - color: #94a3b8; + color: #D4C9A8; } .wizard-step--active { - background: #1e293b; + background: #3D2E0A; } .wizard-step--active .wizard-step__number { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .wizard-step--active .wizard-step__label { - color: #f8fafc; + color: #FFFCF5; } .wizard-step--completed .wizard-step__number { @@ -508,18 +508,18 @@ import { .step-title { margin: 0 0 0.25rem; font-size: 1.1rem; - color: #f8fafc; + color: #FFFCF5; } .step-desc { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } /* Conflict Summary */ .conflict-summary { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 8px; padding: 1.25rem; @@ -539,7 +539,7 @@ import { font-weight: 600; } - .badge--type { background: #1e293b; color: #94a3b8; } + .badge--type { background: #3D2E0A; color: #D4C9A8; } .badge--info { background: #1e3a5f; color: #7dd3fc; } .badge--warning { background: #713f12; color: #fef08a; } .badge--error { background: #7c2d12; color: #fed7aa; } @@ -548,12 +548,12 @@ import { .conflict-title { margin: 0 0 0.5rem; font-size: 1rem; - color: #f8fafc; + color: #FFFCF5; } .conflict-desc { margin: 0 0 1rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; line-height: 1.5; } @@ -585,7 +585,7 @@ import { } .comparison-panel { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 8px; overflow: hidden; @@ -598,20 +598,20 @@ import { justify-content: space-between; align-items: center; padding: 0.75rem 1rem; - background: #1e293b; + background: #3D2E0A; } .panel-header h4 { margin: 0; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .source-badge { font-size: 0.7rem; padding: 0.15rem 0.5rem; - background: #334155; - color: #94a3b8; + background: #3D2E0A; + color: #D4C9A8; border-radius: 4px; } @@ -632,7 +632,7 @@ import { } .info-label { - color: #64748b; + color: #6B5A2E; min-width: 60px; } @@ -644,7 +644,7 @@ import { font-family: monospace; font-size: 0.8rem; color: #22d3ee; - background: #1e293b; + background: #3D2E0A; padding: 0.1rem 0.35rem; border-radius: 4px; } @@ -659,7 +659,7 @@ import { .source-preview pre { margin: 0; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; white-space: pre-wrap; } @@ -682,7 +682,7 @@ import { .indicator-label { font-size: 0.9rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } @@ -712,7 +712,7 @@ import { } .strategy-card { - background: #0f172a; + background: #1C1200; border: 2px solid #1f2937; border-radius: 8px; padding: 1.25rem; @@ -722,7 +722,7 @@ import { } .strategy-card:hover { - border-color: #334155; + border-color: #3D2E0A; } .strategy-card--selected { @@ -737,9 +737,9 @@ import { display: flex; align-items: center; justify-content: center; - background: #1e293b; + background: #3D2E0A; border-radius: 12px; - color: #94a3b8; + color: #D4C9A8; } .strategy-card--selected .strategy-icon { @@ -750,13 +750,13 @@ import { .strategy-name { margin: 0 0 0.35rem; font-size: 0.95rem; - color: #f8fafc; + color: #FFFCF5; } .strategy-desc { margin: 0; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .suggestion-box { @@ -783,13 +783,13 @@ import { .suggestion-box p { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } /* Resolution Summary */ .resolution-summary { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 8px; padding: 1.25rem; @@ -799,7 +799,7 @@ import { .resolution-summary h4 { margin: 0 0 1rem; font-size: 1rem; - color: #f8fafc; + color: #FFFCF5; } .summary-grid { @@ -815,7 +815,7 @@ import { } .summary-label { - color: #64748b; + color: #6B5A2E; min-width: 120px; } @@ -838,8 +838,8 @@ import { .form-textarea { width: 100%; padding: 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -855,11 +855,11 @@ import { display: block; margin-top: 0.25rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .preview-changes { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 8px; padding: 1.25rem; @@ -868,7 +868,7 @@ import { .preview-changes h4 { margin: 0 0 0.75rem; font-size: 1rem; - color: #f8fafc; + color: #FFFCF5; } .changes-list { @@ -878,7 +878,7 @@ import { .changes-list li { font-size: 0.9rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.35rem; } @@ -910,15 +910,15 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover { background: #3D2E0A; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--ghost:disabled { opacity: 0.5; cursor: not-allowed; } .btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; } @@ -937,22 +937,22 @@ import { } .empty-state svg { - color: #64748b; + color: #6B5A2E; margin-bottom: 1rem; } .empty-state h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .empty-state p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } .loading-state { - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/governance-audit.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/governance-audit.component.ts index 1431603e2..cc8715f7a 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/governance-audit.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/governance-audit.component.ts @@ -247,12 +247,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .audit__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -277,13 +277,13 @@ import { .filter-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .form-input, .form-select { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -305,8 +305,8 @@ import { border: none; } - .btn--ghost { background: transparent; color: #94a3b8; border: 1px solid #334155; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; border: 1px solid #3D2E0A; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--ghost:disabled { opacity: 0.5; cursor: not-allowed; } .btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; } @@ -335,7 +335,7 @@ import { } .event-card__header:hover { - background: #0f172a; + background: #1C1200; } .event-card__icon { @@ -351,7 +351,7 @@ import { .event-card__icon--config { background: rgba(34, 211, 238, 0.2); color: #22d3ee; } .event-card__icon--security { background: rgba(234, 179, 8, 0.2); color: #eab308; } .event-card__icon--profile { background: rgba(168, 85, 247, 0.2); color: #a855f7; } - .event-card__icon--other { background: rgba(148, 163, 184, 0.2); color: #94a3b8; } + .event-card__icon--other { background: rgba(148, 163, 184, 0.2); color: #D4C9A8; } .event-card__content { flex: 1; @@ -360,13 +360,13 @@ import { .event-card__type { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.03em; } .event-card__summary { - color: #f8fafc; + color: #FFFCF5; font-weight: 500; white-space: nowrap; overflow: hidden; @@ -400,11 +400,11 @@ import { .event-card__time { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .event-card__chevron { - color: #64748b; + color: #6B5A2E; } .event-card__chevron svg { @@ -419,7 +419,7 @@ import { .event-card__details { padding: 1rem; border-top: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; } .detail-row { @@ -430,7 +430,7 @@ import { } .detail-label { - color: #94a3b8; + color: #D4C9A8; min-width: 120px; } @@ -453,7 +453,7 @@ import { .diff-section h4, .state-section h4 { margin: 0 0 0.75rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .diff-viewer { @@ -475,7 +475,7 @@ import { .diff-group__title { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; margin-bottom: 0.5rem; } @@ -490,9 +490,9 @@ import { .diff-line--removed { color: #fecaca; } .diff-line--modified { color: #fef08a; } - .diff-key { color: #94a3b8; margin-right: 0.5rem; } + .diff-key { color: #D4C9A8; margin-right: 0.5rem; } .diff-before { color: #fecaca; } - .diff-arrow { color: #64748b; margin: 0 0.5rem; } + .diff-arrow { color: #6B5A2E; margin: 0 0.5rem; } .diff-after { color: #bbf7d0; } /* State Viewer */ @@ -512,7 +512,7 @@ import { padding: 0.5rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; - background: #1e293b; + background: #3D2E0A; } .state-block--before .state-block__title { color: #fecaca; } @@ -541,7 +541,7 @@ import { .pagination__info { font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .pagination__controls { @@ -562,13 +562,13 @@ import { align-items: center; justify-content: center; padding: 3rem; - color: #94a3b8; + color: #D4C9A8; text-align: center; } .empty-state svg { margin-bottom: 1rem; - color: #64748b; + color: #6B5A2E; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/impact-preview.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/impact-preview.component.ts index 0ac03b323..11d85a36d 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/impact-preview.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/impact-preview.component.ts @@ -210,12 +210,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .preview__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -238,12 +238,12 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--ghost { background: transparent; color: #94a3b8; border: 1px solid #334155; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; border: 1px solid #3D2E0A; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } /* Summary Grid */ .summary-grid { @@ -283,7 +283,7 @@ import { .summary-card__label { margin-top: 0.25rem; font-size: 0.9rem; - color: #94a3b8; + color: #D4C9A8; } /* Sections */ @@ -306,14 +306,14 @@ import { margin: 0; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .section__badge { font-size: 0.8rem; padding: 0.2rem 0.6rem; - background: #1e293b; - color: #94a3b8; + background: #3D2E0A; + color: #D4C9A8; border-radius: 999px; } @@ -329,7 +329,7 @@ import { justify-content: space-between; align-items: center; padding: 0.75rem 1rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; } @@ -364,10 +364,10 @@ import { .findings-table th { font-size: 0.75rem; font-weight: 600; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.03em; - background: #0f172a; + background: #1C1200; } .findings-table td { @@ -376,14 +376,14 @@ import { } .findings-table tr:hover td { - background: #0f172a; + background: #1C1200; } .purl { font-family: monospace; font-size: 0.8rem; color: #22d3ee; - background: #0f172a; + background: #1C1200; padding: 0.15rem 0.35rem; border-radius: 4px; max-width: 200px; @@ -395,7 +395,7 @@ import { .advisory-id { font-family: monospace; font-size: 0.85rem; - color: #f8fafc; + color: #FFFCF5; } /* Severity Badges */ @@ -467,7 +467,7 @@ import { .warning-content p { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; line-height: 1.5; } @@ -486,29 +486,29 @@ import { } .empty-state svg, .loading-state svg { - color: #64748b; + color: #6B5A2E; margin-bottom: 1rem; } .empty-state h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .empty-state p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } .loading-state p { margin: 0; - color: #94a3b8; + color: #D4C9A8; } .empty-message { padding: 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .spinner { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-conflict-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-conflict-dashboard.component.ts index 6d5acaa9f..c93f7198d 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-conflict-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-conflict-dashboard.component.ts @@ -226,12 +226,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .conflicts__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -249,16 +249,16 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover:not(:disabled) { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover:not(:disabled) { background: #3D2E0A; } .btn--secondary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; } @@ -295,7 +295,7 @@ import { .summary-card__label { font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } /* Breakdown Section */ @@ -311,7 +311,7 @@ import { margin: 0 0 1rem; font-size: 0.9rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .type-breakdown { @@ -381,7 +381,7 @@ import { .trend-label { font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } @@ -400,13 +400,13 @@ import { .filter-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .form-select { padding: 0.5rem 0.75rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -443,7 +443,7 @@ import { justify-content: space-between; align-items: center; padding: 0.75rem 1rem; - background: #0f172a; + background: #1C1200; } .conflict-card__badges { @@ -459,7 +459,7 @@ import { font-weight: 600; } - .badge--type { background: #1e293b; color: #94a3b8; } + .badge--type { background: #3D2E0A; color: #D4C9A8; } .badge--info { background: #1e3a5f; color: #7dd3fc; } .badge--warning { background: #713f12; color: #fef08a; } .badge--error { background: #7c2d12; color: #fed7aa; } @@ -473,7 +473,7 @@ import { .conflict-card__time { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .conflict-card__body { @@ -483,13 +483,13 @@ import { .conflict-card__summary { margin: 0 0 0.5rem; font-size: 1rem; - color: #f8fafc; + color: #FFFCF5; } .conflict-card__desc { margin: 0 0 1rem; font-size: 0.9rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.5; } @@ -499,7 +499,7 @@ import { gap: 0.5rem; margin-bottom: 1rem; padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; } @@ -510,10 +510,10 @@ import { font-size: 0.85rem; } - .conflict-source__label { color: #64748b; } + .conflict-source__label { color: #6B5A2E; } .conflict-source__name { color: #22d3ee; font-weight: 500; } - .conflict-source__type { color: #94a3b8; } - .conflict-source__path { color: #64748b; font-family: monospace; font-size: 0.8rem; } + .conflict-source__type { color: #D4C9A8; } + .conflict-source__path { color: #6B5A2E; font-family: monospace; font-size: 0.8rem; } .conflict-impact { margin-bottom: 0.75rem; @@ -521,7 +521,7 @@ import { } .conflict-impact__label { - color: #94a3b8; + color: #D4C9A8; margin-right: 0.5rem; } @@ -553,13 +553,13 @@ import { .resolution-by { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .resolution-notes { margin: 0.35rem 0 0; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .conflict-card__actions { @@ -567,7 +567,7 @@ import { gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; } /* Empty State */ @@ -590,12 +590,12 @@ import { .empty-state h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .empty-state p { margin: 0; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-governance.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-governance.component.ts index 7320fdb59..7b02be565 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-governance.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-governance.component.ts @@ -80,12 +80,12 @@ import { RouterModule } from '@angular/router'; margin: 0.25rem 0 0; font-size: 1.75rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .governance__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.95rem; } @@ -96,7 +96,7 @@ import { RouterModule } from '@angular/router'; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: thin; - scrollbar-color: #334155 transparent; + scrollbar-color: #3D2E0A transparent; } .governance__tabs::-webkit-scrollbar { @@ -108,7 +108,7 @@ import { RouterModule } from '@angular/router'; } .governance__tabs::-webkit-scrollbar-thumb { - background: #334155; + background: #3D2E0A; border-radius: 2px; } @@ -117,7 +117,7 @@ import { RouterModule } from '@angular/router'; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.9rem; font-weight: 500; @@ -158,7 +158,7 @@ import { RouterModule } from '@angular/router'; font-size: 0.7rem; font-weight: 600; border-radius: 999px; - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -178,7 +178,7 @@ import { RouterModule } from '@angular/router'; } .governance__content { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; min-height: 400px; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-validator.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-validator.component.ts index 5aac9bb2c..e0928f7fc 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-validator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/policy-validator.component.ts @@ -183,12 +183,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .validator__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -222,13 +222,13 @@ import { align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; } .editor-section__header h3 { margin: 0; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .editor-controls { @@ -239,7 +239,7 @@ import { .editor { flex: 1; padding: 1rem; - background: #0f172a; + background: #1C1200; border: none; color: #e5e7eb; font-family: 'JetBrains Mono', 'Fira Code', monospace; @@ -256,8 +256,8 @@ import { .editor-footer { padding: 0.5rem 1rem; border-top: 1px solid #1f2937; - background: #0f172a; - color: #64748b; + background: #1C1200; + color: #6B5A2E; font-size: 0.75rem; } @@ -275,9 +275,9 @@ import { margin: 0; padding: 0.75rem 1rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; border-bottom: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; } /* Buttons */ @@ -291,17 +291,17 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover { background: #3D2E0A; } .form-select--small { padding: 0.35rem 0.5rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -341,12 +341,12 @@ import { .result-summary__status { font-size: 1.1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .result-summary__meta { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .result-summary__counts { @@ -391,7 +391,7 @@ import { .issue-item { padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; border-left: 3px solid; } @@ -409,7 +409,7 @@ import { .issue-item__code { font-family: monospace; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .issue-item__severity { @@ -430,7 +430,7 @@ import { gap: 1rem; margin-top: 0.35rem; font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; font-family: monospace; } @@ -452,7 +452,7 @@ import { .success-message p { margin: 0; - color: #94a3b8; + color: #D4C9A8; } /* Placeholder */ @@ -463,7 +463,7 @@ import { justify-content: center; padding: 3rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; flex: 1; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-config.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-config.component.ts index af393c470..fd538afd9 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-config.component.ts @@ -225,12 +225,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .config__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -255,7 +255,7 @@ import { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:hover:not(:disabled) { @@ -269,12 +269,12 @@ import { .btn--ghost { background: transparent; - color: #94a3b8; - border: 1px solid #334155; + color: #D4C9A8; + border: 1px solid #3D2E0A; } .btn--ghost:hover { - background: #1e293b; + background: #3D2E0A; color: #e5e7eb; } @@ -302,12 +302,12 @@ import { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .config__section-desc { margin: -0.5rem 0 1rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } @@ -341,8 +341,8 @@ import { .form-input, .form-select { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -360,7 +360,7 @@ import { } .form-hint { - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; } @@ -405,7 +405,7 @@ import { .threshold-preview__labels { display: flex; justify-content: space-between; - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; margin-top: 0.25rem; } @@ -421,8 +421,8 @@ import { } .threshold-item { - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1rem; } @@ -457,12 +457,12 @@ import { align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 999px; cursor: pointer; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; transition: all 0.15s ease; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-dashboard.component.ts index 3c892dc31..6330e3b02 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-budget-dashboard.component.ts @@ -211,12 +211,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .dashboard__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -234,20 +234,20 @@ import { } .btn--secondary { - background: #1e293b; + background: #3D2E0A; color: #e5e7eb; - border: 1px solid #334155; + border: 1px solid #3D2E0A; } .btn--secondary:hover { - background: #334155; + background: #3D2E0A; } .btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; background: #22d3ee; - color: #0f172a; + color: #1C1200; border: none; } @@ -271,7 +271,7 @@ import { } .kpi-card__label { - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; @@ -290,7 +290,7 @@ import { .kpi-card__value--exceeded { color: #dc2626; } .kpi-card__meta { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -348,7 +348,7 @@ import { .progress-bar__labels { display: flex; justify-content: space-between; - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; margin-top: 0.25rem; } @@ -367,7 +367,7 @@ import { display: flex; align-items: center; gap: 0.35rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; } @@ -400,7 +400,7 @@ import { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .simple-chart { @@ -437,7 +437,7 @@ import { .simple-chart__label { font-size: 0.65rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; text-align: center; } @@ -471,9 +471,9 @@ import { .contributor-item__type { font-size: 0.7rem; padding: 0.15rem 0.4rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; } @@ -493,7 +493,7 @@ import { .contributor-item__trend--increasing { color: #ef4444; } .contributor-item__trend--decreasing { color: #22c55e; } - .contributor-item__trend--stable { color: #64748b; } + .contributor-item__trend--stable { color: #6B5A2E; } .contributor-item__bar { height: 6px; @@ -511,7 +511,7 @@ import { .contributor-item__meta { display: flex; justify-content: space-between; - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -528,7 +528,7 @@ import { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .alert-list { @@ -583,7 +583,7 @@ import { } .alert-item__meta { - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; margin-top: 0.15rem; } @@ -597,7 +597,7 @@ import { .period-info { display: flex; gap: 2rem; - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; padding-top: 1rem; border-top: 1px solid #1f2937; @@ -608,7 +608,7 @@ import { align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-editor.component.ts index 3d94ec828..13f8abf65 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-editor.component.ts @@ -267,12 +267,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .editor__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -295,15 +295,15 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover:not(:disabled) { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover:not(:disabled) { background: #3D2E0A; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--icon { padding: 0.35rem; } .btn--danger:hover { color: #ef4444; } @@ -312,7 +312,7 @@ import { width: 100%; justify-content: center; padding: 0.75rem; - border: 1px dashed #334155; + border: 1px dashed #3D2E0A; margin-top: 0.75rem; } @@ -374,15 +374,15 @@ import { margin: 0; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .form-section__badge { padding: 0.15rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border-radius: 999px; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .form-grid { @@ -409,8 +409,8 @@ import { .form-input, .form-select, .form-textarea { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -427,7 +427,7 @@ import { } .form-hint { - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; } @@ -453,7 +453,7 @@ import { gap: 0.75rem; align-items: center; padding: 0.5rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; } @@ -492,7 +492,7 @@ import { position: absolute; cursor: pointer; inset: 0; - background: #334155; + background: #3D2E0A; border-radius: 20px; transition: 0.2s; } @@ -524,8 +524,8 @@ import { } .override-card { - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 8px; overflow: hidden; } @@ -535,13 +535,13 @@ import { justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; - background: #1e293b; + background: #3D2E0A; } .override-card__label { font-size: 0.85rem; font-weight: 500; - color: #94a3b8; + color: #D4C9A8; } .override-card__body { @@ -556,7 +556,7 @@ import { align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-list.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-list.component.ts index a78bfdb86..a5fb95d18 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/risk-profile-list.component.ts @@ -181,12 +181,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .profiles__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -207,17 +207,17 @@ import { padding: 0.5rem 0.75rem; background: none; border: none; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease; } - .filter-btn:hover { background: #1e293b; color: #e5e7eb; } + .filter-btn:hover { background: #3D2E0A; color: #e5e7eb; } .filter-btn--active { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn { @@ -234,11 +234,11 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover { background: #06b6d4; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--small { padding: 0.35rem 0.6rem; font-size: 0.8rem; } @@ -263,7 +263,7 @@ import { .profile-card--active { border-left: 3px solid #22c55e; } .profile-card--draft { border-left: 3px solid #eab308; } - .profile-card--deprecated { border-left: 3px solid #64748b; opacity: 0.8; } + .profile-card--deprecated { border-left: 3px solid #6B5A2E; opacity: 0.8; } .profile-card--archived { border-left: 3px solid #374151; opacity: 0.6; } .profile-card__header { @@ -288,7 +288,7 @@ import { .profile-card__version { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; font-family: monospace; } @@ -300,13 +300,13 @@ import { margin: 0; font-size: 1.1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .profile-card__desc { margin: 0.35rem 0 0; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; line-height: 1.4; } @@ -320,7 +320,7 @@ import { } .profile-card__signals { - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 0.75rem; } @@ -328,7 +328,7 @@ import { .profile-card__signals h4 { margin: 0 0 0.5rem; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.03em; } @@ -349,7 +349,7 @@ import { .signal-item__weight { color: #22d3ee; font-weight: 500; } .signal-item--more { - color: #64748b; + color: #6B5A2E; font-style: italic; } @@ -357,7 +357,7 @@ import { display: flex; gap: 0.5rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .profile-card__actions { @@ -377,16 +377,16 @@ import { border-radius: 12px; } - .empty-state svg { color: #64748b; margin-bottom: 1rem; } - .empty-state h3 { margin: 0 0 0.5rem; color: #f8fafc; } - .empty-state p { margin: 0 0 1.5rem; color: #94a3b8; } + .empty-state svg { color: #6B5A2E; margin-bottom: 1rem; } + .empty-state h3 { margin: 0 0 0.5rem; color: #FFFCF5; } + .empty-state p { margin: 0 0 1.5rem; color: #D4C9A8; } .loading-state { display: flex; align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-docs.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-docs.component.ts index 3931fba47..7abf5d227 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-docs.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-docs.component.ts @@ -314,12 +314,12 @@ interface SchemaSection { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .docs__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -332,9 +332,9 @@ interface SchemaSection { .search-input { padding: 0.5rem 0.75rem; padding-left: 2.25rem; - background: #111827 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E") no-repeat 0.75rem center; + background: #111827 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%236B5A2E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E") no-repeat 0.75rem center; background-size: 16px; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -360,11 +360,11 @@ interface SchemaSection { text-decoration: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover { background: #06b6d4; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover { background: #3D2E0A; } /* Content Layout */ .docs__content { @@ -398,7 +398,7 @@ interface SchemaSection { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; - color: #64748b; + color: #6B5A2E; } .nav-list { @@ -411,7 +411,7 @@ interface SchemaSection { display: block; padding: 0.35rem 0; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; transition: all 0.15s ease; } @@ -428,7 +428,7 @@ interface SchemaSection { width: 100%; padding: 0.35rem 0.5rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 4px; color: #e5e7eb; font-size: 0.8rem; @@ -450,12 +450,12 @@ interface SchemaSection { .section-title { margin: 0 0 0.35rem; font-size: 1.1rem; - color: #f8fafc; + color: #FFFCF5; } .section-desc { margin: 0 0 1.25rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -482,8 +482,8 @@ interface SchemaSection { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: #64748b; - background: #0f172a; + color: #6B5A2E; + background: #1C1200; } .field-row { @@ -492,7 +492,7 @@ interface SchemaSection { } .field-row:hover { - background: #0f172a; + background: #1C1200; } .field-name { @@ -520,7 +520,7 @@ interface SchemaSection { } .badge--required { background: #7f1d1d; color: #fecaca; } - .badge--optional { background: #1e293b; color: #94a3b8; } + .badge--optional { background: #3D2E0A; color: #D4C9A8; } /* Field Details (expanded) */ .field-details td { @@ -542,7 +542,7 @@ interface SchemaSection { .detail-label { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; display: block; margin-bottom: 0.25rem; } @@ -551,7 +551,7 @@ interface SchemaSection { font-family: monospace; font-size: 0.85rem; color: #e5e7eb; - background: #1e293b; + background: #3D2E0A; padding: 0.15rem 0.4rem; border-radius: 4px; } @@ -580,7 +580,7 @@ interface SchemaSection { .detail-example code { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .children-list { @@ -611,7 +611,7 @@ interface SchemaSection { } .child-desc { - color: #94a3b8; + color: #D4C9A8; margin-left: 0.5rem; } @@ -619,7 +619,7 @@ interface SchemaSection { .examples-panel h4 { margin: 0 0 0.75rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .examples-tabs { @@ -630,23 +630,23 @@ interface SchemaSection { .example-tab { padding: 0.35rem 0.75rem; - background: #0f172a; + background: #1C1200; border: none; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; cursor: pointer; transition: all 0.15s ease; } .example-tab:hover { - background: #1e293b; + background: #3D2E0A; color: #e5e7eb; } .example-tab--active { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .example-code { @@ -666,7 +666,7 @@ interface SchemaSection { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.5; - color: #94a3b8; + color: #D4C9A8; } .copy-btn { @@ -674,10 +674,10 @@ interface SchemaSection { top: 0.5rem; right: 0.5rem; padding: 0.35rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border: none; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; cursor: pointer; display: flex; @@ -687,7 +687,7 @@ interface SchemaSection { } .copy-btn:hover { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -699,10 +699,10 @@ interface SchemaSection { } .rule-card { - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 1rem; - border-left: 3px solid #334155; + border-left: 3px solid #3D2E0A; } .rule-header { @@ -738,7 +738,7 @@ interface SchemaSection { .rule-fix { font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; padding-top: 0.5rem; border-top: 1px solid #1f2937; } @@ -753,7 +753,7 @@ interface SchemaSection { .practice-card { display: flex; gap: 1rem; - background: #0f172a; + background: #1C1200; border-radius: 8px; padding: 1rem; } @@ -764,10 +764,10 @@ interface SchemaSection { display: flex; align-items: center; justify-content: center; - background: #1e293b; + background: #3D2E0A; border-radius: 8px; flex-shrink: 0; - color: #94a3b8; + color: #D4C9A8; } .icon--security { color: #22c55e; background: rgba(34, 197, 94, 0.1); } @@ -782,13 +782,13 @@ interface SchemaSection { .practice-title { margin: 0 0 0.35rem; font-size: 0.95rem; - color: #f8fafc; + color: #FFFCF5; } .practice-desc { margin: 0; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .practice-example { @@ -811,7 +811,7 @@ interface SchemaSection { .practice-example code { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } /* No Results */ @@ -828,18 +828,18 @@ interface SchemaSection { } .no-results svg { - color: #64748b; + color: #6B5A2E; margin-bottom: 1rem; } .no-results h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .no-results p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-playground.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-playground.component.ts index 2d5008379..6a2e727c1 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-playground.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/schema-playground.component.ts @@ -280,12 +280,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .playground__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -298,7 +298,7 @@ import { .form-select { padding: 0.5rem 0.75rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -323,12 +323,12 @@ import { gap: 0.5rem; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover { background: #3D2E0A; } /* Content Layout */ .playground__content { @@ -360,21 +360,21 @@ import { justify-content: space-between; align-items: center; padding: 0.75rem 1rem; - background: #0f172a; + background: #1C1200; border-bottom: 1px solid #1f2937; } .panel-header h3 { margin: 0; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .panel-meta { display: flex; gap: 0.5rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .result-badge { @@ -429,7 +429,7 @@ import { .editor { flex: 1; padding: 1rem; - background: #0f172a; + background: #1C1200; border: none; color: #e5e7eb; font-family: 'JetBrains Mono', 'Fira Code', monospace; @@ -452,16 +452,16 @@ import { .snippets-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; white-space: nowrap; } .snippet-btn { padding: 0.25rem 0.5rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.7rem; cursor: pointer; white-space: nowrap; @@ -469,7 +469,7 @@ import { } .snippet-btn:hover { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -489,7 +489,7 @@ import { .summary-stat { flex: 1; padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; text-align: center; } @@ -519,7 +519,7 @@ import { .stat-label { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .issues-section { @@ -545,7 +545,7 @@ import { .issue-item { padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; margin-bottom: 0.5rem; border-left: 3px solid; @@ -554,7 +554,7 @@ import { } .issue-item:hover { - background: #1e293b; + background: #3D2E0A; } .issue-item--error { @@ -568,7 +568,7 @@ import { .issue-code { font-family: monospace; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.25rem; } @@ -580,7 +580,7 @@ import { .issue-path { font-family: monospace; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; margin-top: 0.25rem; } @@ -600,7 +600,7 @@ import { .success-message p { margin: 0; - color: #94a3b8; + color: #D4C9A8; } .parsed-preview { @@ -612,11 +612,11 @@ import { .parsed-preview h4 { margin: 0 0 0.75rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .preview-tree { - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 0.75rem; } @@ -631,7 +631,7 @@ import { } .tree-value { - color: #94a3b8; + color: #D4C9A8; margin-left: 0.5rem; } @@ -642,7 +642,7 @@ import { justify-content: center; padding: 3rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; flex: 1; } @@ -662,7 +662,7 @@ import { .schema-reference h3 { margin: 0 0 1rem; font-size: 1rem; - color: #f8fafc; + color: #FFFCF5; } .reference-grid { @@ -672,7 +672,7 @@ import { } .reference-card { - background: #0f172a; + background: #1C1200; border-radius: 6px; padding: 1rem; } @@ -690,7 +690,7 @@ import { .reference-card li { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.35rem; } @@ -698,7 +698,7 @@ import { font-family: monospace; font-size: 0.8rem; color: #e5e7eb; - background: #1e293b; + background: #3D2E0A; padding: 0.1rem 0.35rem; border-radius: 4px; } @@ -716,7 +716,7 @@ import { padding: 0; font-size: 0.75rem; line-height: 1.4; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-control.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-control.component.ts index 787d2e62e..9b1838bca 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-control.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-control.component.ts @@ -367,12 +367,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .sealed__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -438,7 +438,7 @@ import { .verification-badge--failed { background: #7f1d1d; color: #fecaca; } .status-card__details { - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } @@ -461,15 +461,15 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--secondary { background: #1e293b; color: #e5e7eb; border: 1px solid #334155; } - .btn--secondary:hover { background: #334155; } + .btn--secondary { background: #3D2E0A; color: #e5e7eb; border: 1px solid #3D2E0A; } + .btn--secondary:hover { background: #3D2E0A; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--danger { background: #dc2626; color: #fff; } .btn--danger:hover:not(:disabled) { background: #b91c1c; } @@ -497,7 +497,7 @@ import { margin: 0; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } /* Trust Roots & Sources */ @@ -512,8 +512,8 @@ import { align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.85rem; @@ -531,8 +531,8 @@ import { .override-card { padding: 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 8px; } @@ -550,9 +550,9 @@ import { .override-card__type { font-size: 0.7rem; padding: 0.15rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; } @@ -582,24 +582,24 @@ import { display: flex; gap: 1rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .override-card__actions { margin-top: 0.75rem; padding-top: 0.75rem; - border-top: 1px solid #334155; + border-top: 1px solid #3D2E0A; } .empty-state { text-align: center; padding: 2rem; - color: #94a3b8; + color: #D4C9A8; } .empty-state__hint { font-size: 0.85rem; - color: #64748b; + color: #6B5A2E; } /* Modal */ @@ -614,7 +614,7 @@ import { } .modal { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; width: 90%; @@ -634,7 +634,7 @@ import { .modal__header h3 { margin: 0; font-size: 1.1rem; - color: #f8fafc; + color: #FFFCF5; } .modal__body { @@ -671,7 +671,7 @@ import { width: 100%; padding: 0.5rem 0.75rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -684,7 +684,7 @@ import { .form-hint { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } @@ -744,14 +744,14 @@ import { } .info-banner svg { color: #22d3ee; flex-shrink: 0; } - .info-banner p { margin: 0; color: #94a3b8; font-size: 0.85rem; } + .info-banner p { margin: 0; color: #D4C9A8; font-size: 0.85rem; } .loading-state { display: flex; align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-overrides.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-overrides.component.ts index 1161454cf..bd0d9c4ab 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-overrides.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/sealed-mode-overrides.component.ts @@ -269,23 +269,23 @@ import { } .breadcrumb__sep { - color: #64748b; + color: #6B5A2E; } .breadcrumb__current { - color: #94a3b8; + color: #D4C9A8; } .overrides__title { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .overrides__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -303,12 +303,12 @@ import { border: none; } - .btn--primary { background: #22d3ee; color: #0f172a; } + .btn--primary { background: #22d3ee; color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; } - .btn--ghost { background: transparent; color: #94a3b8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost { background: transparent; color: #D4C9A8; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--small { padding: 0.35rem 0.75rem; font-size: 0.8rem; } .btn--danger:hover { color: #ef4444; } @@ -327,7 +327,7 @@ import { padding: 0.5rem 1rem; background: none; border: none; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; cursor: pointer; border-radius: 6px; @@ -335,13 +335,13 @@ import { } .filter-tab:hover { - background: #1e293b; + background: #3D2E0A; color: #e5e7eb; } .filter-tab--active { background: #22d3ee; - color: #0f172a; + color: #1C1200; } /* Override List */ @@ -364,7 +364,7 @@ import { } .override-card--expired { - border-left-color: #64748b; + border-left-color: #6B5A2E; opacity: 0.7; } @@ -373,7 +373,7 @@ import { justify-content: space-between; align-items: center; padding: 0.75rem 1rem; - background: #0f172a; + background: #1C1200; } .override-card__badges { @@ -389,13 +389,13 @@ import { font-weight: 600; } - .badge--type { background: #1e293b; color: #94a3b8; } + .badge--type { background: #3D2E0A; color: #D4C9A8; } .badge--active { background: #14532d; color: #bbf7d0; } .badge--expired { background: #374151; color: #9ca3af; } .override-card__expires { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .override-card__body { @@ -408,7 +408,7 @@ import { .target-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; margin-right: 0.5rem; } @@ -416,7 +416,7 @@ import { font-family: monospace; font-size: 0.9rem; color: #22d3ee; - background: #0f172a; + background: #1C1200; padding: 0.2rem 0.5rem; border-radius: 4px; } @@ -427,7 +427,7 @@ import { .reason-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; display: block; margin-bottom: 0.25rem; } @@ -445,7 +445,7 @@ import { .approval-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; margin-right: 0.5rem; } @@ -466,7 +466,7 @@ import { display: flex; gap: 1rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .override-card__actions { @@ -474,7 +474,7 @@ import { gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; } /* Modal */ @@ -509,13 +509,13 @@ import { .modal__header h3 { margin: 0; font-size: 1.1rem; - color: #f8fafc; + color: #FFFCF5; } .modal__close { background: none; border: none; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; padding: 0.25rem; } @@ -552,8 +552,8 @@ import { .form-input, .form-select, .form-textarea { width: 100%; padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -568,7 +568,7 @@ import { display: block; margin-top: 0.25rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .two-person-warning { @@ -597,22 +597,22 @@ import { } .empty-state svg { - color: #64748b; + color: #6B5A2E; margin-bottom: 1rem; } .empty-state h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .empty-state p { margin: 0 0 1.5rem; - color: #94a3b8; + color: #D4C9A8; } .loading-state { - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/staleness-config.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/staleness-config.component.ts index 5b7c22828..6096a82d1 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/staleness-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/staleness-config.component.ts @@ -226,12 +226,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .staleness__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -239,7 +239,7 @@ import { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } /* Status Section */ @@ -275,9 +275,9 @@ import { .status-card__type { font-size: 0.7rem; padding: 0.15rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; } @@ -295,7 +295,7 @@ import { .status-card__name { font-weight: 600; - color: #f8fafc; + color: #FFFCF5; margin-bottom: 0.35rem; } @@ -303,7 +303,7 @@ import { display: flex; gap: 1rem; font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .status-card__blocked { @@ -339,7 +339,7 @@ import { padding: 0.75rem 1.25rem; background: none; border: none; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; cursor: pointer; border-bottom: 2px solid transparent; @@ -388,7 +388,7 @@ import { position: absolute; cursor: pointer; inset: 0; - background: #334155; + background: #3D2E0A; border-radius: 24px; transition: 0.2s; } @@ -426,7 +426,7 @@ import { .config-panel__grace .form-label { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } @@ -440,10 +440,10 @@ import { grid-template-columns: 120px 100px 120px 1fr; gap: 1rem; padding: 0.5rem 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.03em; } @@ -482,8 +482,8 @@ import { .form-input, .form-select { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -511,11 +511,11 @@ import { align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; cursor: pointer; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .action-toggle:has(input:checked) { @@ -535,7 +535,7 @@ import { .timeline-preview h4 { margin: 0 0 0.75rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .timeline { @@ -587,7 +587,7 @@ import { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } @@ -598,7 +598,7 @@ import { align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-governance/trust-weighting.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-governance/trust-weighting.component.ts index e400fa1fd..c65c3217a 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-governance/trust-weighting.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-governance/trust-weighting.component.ts @@ -281,12 +281,12 @@ import { margin: 0; font-size: 1.25rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .trust__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -305,16 +305,16 @@ import { } .btn--secondary { - background: #1e293b; + background: #3D2E0A; color: #e5e7eb; - border: 1px solid #334155; + border: 1px solid #3D2E0A; } - .btn--secondary:hover { background: #334155; } + .btn--secondary:hover { background: #3D2E0A; } .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:hover:not(:disabled) { background: #06b6d4; } @@ -322,10 +322,10 @@ import { .btn--ghost { background: transparent; - color: #94a3b8; + color: #D4C9A8; } - .btn--ghost:hover { background: #1e293b; color: #e5e7eb; } + .btn--ghost:hover { background: #3D2E0A; color: #e5e7eb; } .btn--icon { padding: 0.35rem; } @@ -344,7 +344,7 @@ import { } .default-weight__label { - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -381,9 +381,9 @@ import { .weight-card__source { font-size: 0.7rem; padding: 0.15rem 0.5rem; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.03em; } @@ -400,12 +400,12 @@ import { .weight-card__name { font-size: 1.1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .weight-card__id { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; font-family: monospace; } @@ -446,15 +446,15 @@ import { .weight-card__meta { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } .weight-card__reason { font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; padding: 0.5rem; - background: #0f172a; + background: #1C1200; border-radius: 4px; margin-bottom: 0.5rem; } @@ -463,7 +463,7 @@ import { display: flex; gap: 0.5rem; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; border-top: 1px solid #1f2937; padding-top: 0.5rem; } @@ -480,7 +480,7 @@ import { } .modal { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; width: 90%; @@ -504,7 +504,7 @@ import { .modal__header h3 { margin: 0; font-size: 1.1rem; - color: #f8fafc; + color: #FFFCF5; } .modal__body { @@ -541,7 +541,7 @@ import { width: 100%; padding: 0.5rem 0.75rem; background: #111827; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.9rem; @@ -587,7 +587,7 @@ import { display: flex; justify-content: space-between; font-size: 0.7rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } @@ -614,13 +614,13 @@ import { .impact-stat__label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } h4 { margin: 1rem 0 0.5rem; font-size: 0.9rem; - color: #f8fafc; + color: #FFFCF5; } .transition-list { @@ -635,7 +635,7 @@ import { align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; - background: #1e293b; + background: #3D2E0A; border-radius: 6px; } @@ -675,7 +675,7 @@ import { .sample-item__advisory { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .sample-item__change { @@ -684,7 +684,7 @@ import { gap: 0.35rem; } - .arrow { color: #64748b; } + .arrow { color: #6B5A2E; } .severity-badge { padding: 0.15rem 0.4rem; @@ -705,7 +705,7 @@ import { align-items: center; justify-content: center; height: 200px; - color: #94a3b8; + color: #D4C9A8; } `], }) diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts index 53454df93..cbbcf5d0a 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/batch-evaluation.component.ts @@ -417,13 +417,13 @@ import { .batch-evaluation__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .batch-evaluation__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .header-tabs { @@ -434,23 +434,23 @@ import { .tab-btn { padding: 0.6rem 1.25rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; - color: #94a3b8; + color: #D4C9A8; font-weight: 500; cursor: pointer; transition: all 150ms ease; } .tab-btn:hover { - background: #1e293b; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .tab-btn--active { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), transparent); border-color: #10b981; - color: #f8fafc; + color: #FFFCF5; } .tab-content { @@ -463,7 +463,7 @@ import { } .evaluation-form { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -480,13 +480,13 @@ import { .form-section h3 { margin: 0 0 0.75rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } .section-hint { margin: 0 0 1rem; - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -506,7 +506,7 @@ import { .form-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -515,9 +515,9 @@ import { .form-field input[type='number'] { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .form-field input[type='number'] { @@ -545,17 +545,17 @@ import { .source-tab { padding: 0.5rem 1rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; cursor: pointer; transition: all 150ms ease; } .source-tab:hover { - background: #1e293b; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .source-tab--active { @@ -566,7 +566,7 @@ import { .available-artifacts { background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; overflow: hidden; } @@ -575,7 +575,7 @@ import { display: flex; gap: 0.75rem; padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-bottom: 1px solid #1f2937; } @@ -583,9 +583,9 @@ import { flex: 1; padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .btn { @@ -602,12 +602,12 @@ import { .btn--primary { background: linear-gradient(135deg, #10b981, #059669); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn--danger { @@ -617,8 +617,8 @@ import { .btn--ghost { background: transparent; - color: #94a3b8; - border: 1px solid #334155; + color: #D4C9A8; + border: 1px solid #3D2E0A; } .btn--sm { @@ -657,7 +657,7 @@ import { } .artifact-option:hover { - background: #1e293b; + background: #3D2E0A; } .artifact-option--selected { @@ -677,12 +677,12 @@ import { } .artifact-name { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.9rem; } .artifact-meta { - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; } @@ -702,9 +702,9 @@ import { width: 100%; padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); margin-bottom: 0.5rem; } @@ -719,8 +719,8 @@ import { align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; - background: #1e293b; - color: #94a3b8; + background: #3D2E0A; + color: #D4C9A8; border-radius: 4px; font-size: 0.8rem; } @@ -728,7 +728,7 @@ import { .tag button { background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; font-size: 1rem; line-height: 1; @@ -747,7 +747,7 @@ import { } .live-results { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -762,7 +762,7 @@ import { .results-header h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; } .progress-info { @@ -774,7 +774,7 @@ import { .batch-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .status-badge { @@ -806,7 +806,7 @@ import { .status-badge[data-status='pending'] { background: rgba(148, 163, 184, 0.15); - color: #94a3b8; + color: #D4C9A8; } .progress-bar-container { @@ -819,7 +819,7 @@ import { .progress-bar { flex: 1; height: 8px; - background: #1e293b; + background: #3D2E0A; border-radius: 4px; overflow: hidden; } @@ -831,7 +831,7 @@ import { } .progress-text { - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; min-width: 80px; text-align: right; @@ -860,14 +860,14 @@ import { .summary-stat .stat-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; } .summary-stat--passed .stat-value { color: #4ade80; } .summary-stat--warned .stat-value { color: #fbbf24; } .summary-stat--blocked .stat-value { color: #f87171; } - .summary-stat--failed .stat-value { color: #94a3b8; } + .summary-stat--failed .stat-value { color: #D4C9A8; } .artifact-results { display: flex; @@ -891,7 +891,7 @@ import { .artifact-result[data-decision='pass'] { border-left-color: #22c55e; } .artifact-result[data-decision='warn'] { border-left-color: #f59e0b; } .artifact-result[data-decision='fail'] { border-left-color: #ef4444; } - .artifact-result[data-status='pending'] { border-left-color: #64748b; } + .artifact-result[data-status='pending'] { border-left-color: #6B5A2E; } .artifact-result[data-status='running'] { border-left-color: #3b82f6; } .artifact-result[data-status='failed'] { border-left-color: #ef4444; } @@ -905,7 +905,7 @@ import { .artifact-result[data-decision='pass'] .result-status { color: #22c55e; } .artifact-result[data-decision='warn'] .result-status { color: #f59e0b; } .artifact-result[data-decision='fail'] .result-status { color: #ef4444; } - .artifact-result[data-status='pending'] .result-status { color: #64748b; } + .artifact-result[data-status='pending'] .result-status { color: #6B5A2E; } .artifact-result[data-status='running'] .result-status { color: #3b82f6; } .artifact-result[data-status='failed'] .result-status { color: #ef4444; } @@ -925,14 +925,14 @@ import { } .result-name { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.9rem; } .result-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .result-findings { @@ -958,12 +958,12 @@ import { } .finding-total { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .result-time { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -983,7 +983,7 @@ import { .batch-complete p { margin: 0 0 1rem; - color: #94a3b8; + color: #D4C9A8; text-align: center; } @@ -999,10 +999,10 @@ import { .history-filters select { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .history-list { @@ -1013,7 +1013,7 @@ import { .history-card { padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; cursor: pointer; @@ -1038,12 +1038,12 @@ import { } .policy-info { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.9rem; } .timestamp { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -1057,7 +1057,7 @@ import { font-size: 0.85rem; } - .stat--total { color: #94a3b8; } + .stat--total { color: #D4C9A8; } .stat--passed { color: #4ade80; } .stat--failed { color: #f87171; } .stat--blocked { color: #f59e0b; } @@ -1073,7 +1073,7 @@ import { flex-direction: column; align-items: center; padding: 3rem; - color: #64748b; + color: #6B5A2E; } .history-empty svg { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts index 24c87b51f..09005d460 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/conflict-detection.component.ts @@ -342,13 +342,13 @@ import { .conflict-detection__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .conflict-detection__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .header-actions { @@ -370,12 +370,12 @@ import { .btn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn--success { @@ -385,8 +385,8 @@ import { .btn--ghost { background: transparent; - color: #94a3b8; - border: 1px solid #334155; + color: #D4C9A8; + border: 1px solid #3D2E0A; } .btn:hover:not(:disabled) { @@ -400,7 +400,7 @@ import { .policy-selection { padding: 1.5rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; margin-bottom: 1.5rem; @@ -408,13 +408,13 @@ import { .policy-selection h3 { margin: 0 0 0.25rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } .selection-hint { margin: 0 0 1rem; - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -430,7 +430,7 @@ import { gap: 0.75rem; padding: 0.75rem 1rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; cursor: pointer; transition: all 150ms ease; @@ -458,7 +458,7 @@ import { } .policy-name { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 600; } @@ -468,7 +468,7 @@ import { } .policy-rules { - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; } @@ -478,7 +478,7 @@ import { .results-summary h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; } .summary-stats { @@ -492,7 +492,7 @@ import { flex-direction: column; align-items: center; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 8px; } @@ -500,17 +500,17 @@ import { .stat-value { font-size: 1.75rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .stat-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } - .stat-card--total { border-left: 3px solid #94a3b8; } + .stat-card--total { border-left: 3px solid #D4C9A8; } .stat-card--critical { border-left: 3px solid #ef4444; } .stat-card--critical .stat-value { color: #f87171; } .stat-card--high { border-left: 3px solid #f97316; } @@ -527,7 +527,7 @@ import { .conflict-filters { margin-bottom: 1.5rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -546,7 +546,7 @@ import { .filter-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -554,9 +554,9 @@ import { .filter-field select { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); min-width: 160px; } @@ -568,7 +568,7 @@ import { } .conflict-card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; @@ -636,7 +636,7 @@ import { } .conflict-type { - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; } @@ -652,14 +652,14 @@ import { .expand-btn { background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; padding: 0.25rem; transition: transform 150ms ease; } .expand-btn:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .expand-btn--expanded { @@ -684,7 +684,7 @@ import { } .rule-name { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 600; } @@ -701,16 +701,16 @@ import { } .source-label { - color: #64748b; + color: #6B5A2E; } .source-name { - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .impact-description { margin: 0 0 0.75rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -718,7 +718,7 @@ import { display: flex; align-items: center; gap: 0.5rem; - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -737,15 +737,15 @@ import { .value-panel { padding: 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 8px; } .value-panel h4 { margin: 0 0 0.5rem; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -754,7 +754,7 @@ import { margin: 0; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); white-space: pre-wrap; word-break: break-all; } @@ -769,7 +769,7 @@ import { .suggestions-section h4 { margin: 0 0 0.75rem; - color: #f8fafc; + color: #FFFCF5; font-size: 0.9rem; } @@ -781,8 +781,8 @@ import { .suggestion-card { padding: 1rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 8px; cursor: pointer; transition: all 150ms ease; @@ -838,18 +838,18 @@ import { .confidence { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .suggestion-description { margin: 0 0 0.25rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.9rem; } .suggestion-rationale { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; font-style: italic; } @@ -862,7 +862,7 @@ import { } .suggested-value span { - color: #64748b; + color: #6B5A2E; } .suggested-value code { @@ -893,11 +893,11 @@ import { } .info-label { - color: #64748b; + color: #6B5A2E; } .info-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .batch-actions { @@ -927,7 +927,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .conflict-detection__empty svg, @@ -939,7 +939,7 @@ import { .conflict-detection__empty h3, .conflict-detection__initial h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .conflict-detection__empty p, @@ -950,7 +950,7 @@ import { .spinner { width: 48px; height: 48px; - border: 4px solid #334155; + border: 4px solid #3D2E0A; border-top-color: #f59e0b; border-radius: 50%; animation: spin 1s linear infinite; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts index e62cd3957..a5573a402 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/coverage-fixture.component.ts @@ -261,13 +261,13 @@ import { .coverage__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .coverage__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .coverage__actions { @@ -286,12 +286,12 @@ import { .btn--primary { background: linear-gradient(135deg, #22c55e, #16a34a); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn:hover:not(:disabled) { @@ -309,7 +309,7 @@ import { gap: 2rem; align-items: center; padding: 1.5rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; margin-bottom: 1.5rem; @@ -360,7 +360,7 @@ import { .coverage-ring__label { display: block; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; } .summary-cards { @@ -381,7 +381,7 @@ import { .summary-card__value { font-size: 1.5rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .summary-card--success .summary-card__value { @@ -397,13 +397,13 @@ import { } .summary-card__label { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .test-summary h3 { margin: 0 0 0.5rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -414,7 +414,7 @@ import { .test-stat { font-size: 0.9rem; - color: #94a3b8; + color: #D4C9A8; } .test-stat--passed { @@ -426,7 +426,7 @@ import { } .coverage__rules { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -442,7 +442,7 @@ import { .rules-header h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -454,16 +454,16 @@ import { .filter-btn { padding: 0.35rem 0.75rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; cursor: pointer; transition: all 150ms ease; } .filter-btn:hover { - border-color: #64748b; + border-color: #6B5A2E; } .filter-btn--active { @@ -506,14 +506,14 @@ import { } .rule-name { - color: #f8fafc; + color: #FFFCF5; font-weight: 600; } .rule-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .rule-card__coverage { @@ -533,7 +533,7 @@ import { .coverage-bar__fill { height: 100%; - background: #64748b; + background: #6B5A2E; border-radius: 4px; transition: width 300ms ease; } @@ -550,7 +550,7 @@ import { min-width: 50px; font-size: 0.9rem; font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); text-align: right; } @@ -560,7 +560,7 @@ import { .test-count { font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .rule-card__missing h4 { @@ -573,12 +573,12 @@ import { .rule-card__missing ul { margin: 0; padding-left: 1.25rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } .coverage__tests { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -586,7 +586,7 @@ import { .coverage__tests h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -610,7 +610,7 @@ import { th { background: #0b1224; - color: #94a3b8; + color: #D4C9A8; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; @@ -649,30 +649,30 @@ import { .test-status[data-status='skipped'] { background: rgba(100, 116, 139, 0.15); - color: #94a3b8; + color: #D4C9A8; } .test-name { display: block; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 500; } .test-desc { display: block; - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; margin-top: 0.2rem; } .rule-count { - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } .test-duration, .test-time { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -683,7 +683,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .coverage__empty svg { @@ -693,7 +693,7 @@ import { .coverage__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .coverage__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts index 99a63c8cb..42a8b2ed2 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/effective-policy-viewer.component.ts @@ -171,13 +171,13 @@ import { .effective-policy__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .effective-policy__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -191,7 +191,7 @@ import { .btn--primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); - color: white; + color: #1C1200; } .btn:hover:not(:disabled) { @@ -207,7 +207,7 @@ import { .effective-policy__filters { margin-bottom: 1.5rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -226,7 +226,7 @@ import { .filter-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -235,9 +235,9 @@ import { .filter-field input { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); min-width: 180px; } @@ -248,7 +248,7 @@ import { } .resource-card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -276,7 +276,7 @@ import { font-size: 0.7rem; font-weight: 700; background: #1f2937; - color: #94a3b8; + color: #D4C9A8; } .resource-type[data-type='image'] { @@ -297,22 +297,22 @@ import { .resource-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.9rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .resource-name { - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } .resource-computed { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .resource-card__policies h4 { margin: 0 0 0.75rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -332,7 +332,7 @@ import { } .policy-item--inherited { - border-left-color: #64748b; + border-left-color: #6B5A2E; opacity: 0.85; } @@ -348,8 +348,8 @@ import { width: 24px; height: 24px; border-radius: 50%; - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); font-size: 0.75rem; font-weight: 600; } @@ -367,12 +367,12 @@ import { } .policy-name { - color: #f8fafc; + color: #FFFCF5; font-weight: 500; } .policy-version { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -381,7 +381,7 @@ import { border-radius: 4px; font-size: 0.7rem; background: #1f2937; - color: #94a3b8; + color: #D4C9A8; } .policy-scope[data-scope='tenant'] { @@ -395,7 +395,7 @@ import { } .policy-inherited { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; font-style: italic; } @@ -407,7 +407,7 @@ import { } .policy-effective { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -426,14 +426,14 @@ import { } .merged-label { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .merged-hash { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; padding: 0.25rem 0.5rem; background: #0b1224; border-radius: 4px; @@ -446,7 +446,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .effective-policy__empty svg { @@ -456,7 +456,7 @@ import { .effective-policy__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .effective-policy__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts index 9bd5e973e..2be469b66 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-audit-log.component.ts @@ -195,13 +195,13 @@ import { .audit-log__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .audit-log__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -215,12 +215,12 @@ import { .btn--primary { background: linear-gradient(135deg, #ec4899, #db2777); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn:hover:not(:disabled) { @@ -235,7 +235,7 @@ import { .audit-log__filters { margin-bottom: 1.5rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -254,7 +254,7 @@ import { .filter-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -262,9 +262,9 @@ import { .filter-field select { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); min-width: 160px; } @@ -331,7 +331,7 @@ import { .audit-entry__content { flex: 1; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; margin-bottom: 1rem; @@ -382,7 +382,7 @@ import { } .audit-timestamp { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -397,11 +397,11 @@ import { display: flex; align-items: center; gap: 0.5rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .audit-actor svg { - color: #64748b; + color: #6B5A2E; } .audit-policy { @@ -413,11 +413,11 @@ import { .policy-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .policy-version { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -425,9 +425,9 @@ import { margin: 0.75rem 0; padding: 0.75rem; background: #0b1224; - border-left: 3px solid #64748b; + border-left: 3px solid #6B5A2E; border-radius: 0 8px 8px 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-style: italic; } @@ -449,7 +449,7 @@ import { } .change-label { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; min-width: 60px; } @@ -457,7 +457,7 @@ import { .change-value { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; word-break: break-all; } @@ -482,7 +482,7 @@ import { } .audit-meta { - color: #475569; + color: #6B5A2E; font-size: 0.75rem; } @@ -499,7 +499,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .audit-log__empty svg { @@ -509,7 +509,7 @@ import { .audit-log__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .audit-log__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts index a0089dc9f..bb3a28879 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-diff-viewer.component.ts @@ -176,13 +176,13 @@ import { .diff-viewer__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .diff-viewer__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .diff-viewer__versions { @@ -209,7 +209,7 @@ import { } .diff-viewer__versions svg { - color: #64748b; + color: #6B5A2E; } .diff-viewer__stats { @@ -224,7 +224,7 @@ import { flex-direction: column; gap: 0.25rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -232,7 +232,7 @@ import { .stat-value { font-size: 1.5rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .stat-card--add .stat-value { @@ -244,7 +244,7 @@ import { } .stat-label { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -255,7 +255,7 @@ import { } .file-diff { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; overflow: hidden; @@ -284,7 +284,7 @@ import { } .file-diff__header:hover { - background: #1e293b; + background: #3D2E0A; } .file-info { @@ -322,7 +322,7 @@ import { .file-path { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.9rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .file-actions { @@ -332,12 +332,12 @@ import { } .file-status { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .expand-icon { - color: #64748b; + color: #6B5A2E; transition: transform 150ms ease; } @@ -352,7 +352,7 @@ import { .binary-notice { padding: 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; font-style: italic; } @@ -395,7 +395,7 @@ import { min-width: 40px; padding: 0 0.5rem; text-align: right; - color: #475569; + color: #6B5A2E; user-select: none; border-right: 1px solid #1f2937; } @@ -413,7 +413,7 @@ import { width: 20px; padding: 0 0.25rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .diff-line--added .line-indicator { @@ -429,7 +429,7 @@ import { padding: 0 0.5rem; white-space: pre-wrap; word-break: break-all; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .diff-viewer__empty { @@ -439,7 +439,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .diff-viewer__empty svg { @@ -449,7 +449,7 @@ import { .diff-viewer__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .diff-viewer__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts index 2a3c5f934..f41f3e7fe 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-exception.component.ts @@ -260,13 +260,13 @@ import { .policy-exception__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .policy-exception__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -280,12 +280,12 @@ import { .btn--primary { background: linear-gradient(135deg, #f97316, #ea580c); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn--danger { @@ -303,7 +303,7 @@ import { } .policy-exception__form { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -312,7 +312,7 @@ import { .policy-exception__form h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; } .form-row { @@ -329,7 +329,7 @@ import { .form-section h4 { margin: 0 0 0.75rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -342,7 +342,7 @@ import { .field span { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .field input, @@ -350,9 +350,9 @@ import { .field textarea { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-family: inherit; } @@ -383,16 +383,16 @@ import { .filter-btn { padding: 0.4rem 0.85rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; cursor: pointer; transition: all 150ms ease; } .filter-btn:hover { - border-color: #64748b; + border-color: #6B5A2E; } .filter-btn--active { @@ -408,7 +408,7 @@ import { } .exception-card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -428,12 +428,12 @@ import { } .exception-card--revoked { - border-left-color: #64748b; + border-left-color: #6B5A2E; opacity: 0.7; } .exception-card--expired { - border-left-color: #64748b; + border-left-color: #6B5A2E; opacity: 0.7; } @@ -476,7 +476,7 @@ import { .exception-status[data-status='revoked'], .exception-status[data-status='expired'] { background: rgba(100, 116, 139, 0.15); - color: #94a3b8; + color: #D4C9A8; } .exception-severity { @@ -485,7 +485,7 @@ import { font-size: 0.75rem; font-weight: 600; background: #1f2937; - color: #94a3b8; + color: #D4C9A8; } .exception-severity[data-severity='critical'] { @@ -505,7 +505,7 @@ import { .exception-name { margin: 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -530,7 +530,7 @@ import { .exception-description { margin: 0 0 0.75rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -548,12 +548,12 @@ import { } .detail-label { - color: #64748b; + color: #6B5A2E; min-width: 80px; } .detail-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .exception-card__justification { @@ -566,13 +566,13 @@ import { .exception-card__justification strong { display: block; margin-bottom: 0.25rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; } .exception-card__justification p { margin: 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -580,7 +580,7 @@ import { display: flex; flex-direction: column; gap: 0.25rem; - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; margin-bottom: 0.75rem; } @@ -595,7 +595,7 @@ import { padding: 0.2rem 0.5rem; background: #1f2937; border-radius: 4px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; } @@ -622,7 +622,7 @@ import { .revoke-dialog__content { position: relative; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -632,12 +632,12 @@ import { .revoke-dialog__content h3 { margin: 0 0 0.5rem; - color: #f8fafc; + color: #FFFCF5; } .revoke-dialog__content > p { margin: 0 0 1rem; - color: #94a3b8; + color: #D4C9A8; } .dialog-actions { @@ -654,7 +654,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .policy-exception__empty svg { @@ -664,7 +664,7 @@ import { .policy-exception__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .policy-exception__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts index bd7b60006..60acdb082 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-lint.component.ts @@ -219,13 +219,13 @@ import { .policy-lint__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .policy-lint__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -260,7 +260,7 @@ import { display: flex; gap: 1rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -297,13 +297,13 @@ import { .status-card__content h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.1rem; } .status-card__content p { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -322,7 +322,7 @@ import { flex-direction: column; gap: 0.25rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -330,7 +330,7 @@ import { .summary-card__value { font-size: 2rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .summary-card--error .summary-card__value { @@ -346,7 +346,7 @@ import { } .summary-card__label { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -356,7 +356,7 @@ import { gap: 1.5rem; margin-bottom: 1.5rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -368,7 +368,7 @@ import { } .filter-group label { - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; font-weight: 500; } @@ -376,17 +376,17 @@ import { .filter-btn { padding: 0.35rem 0.75rem; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; cursor: pointer; transition: all 150ms ease; } .filter-btn:hover { - border-color: #64748b; - color: #e2e8f0; + border-color: #6B5A2E; + color: rgba(212, 201, 168, 0.3); } .filter-btn--active { @@ -403,7 +403,7 @@ import { .issue-card { padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; border-left-width: 4px; @@ -422,7 +422,7 @@ import { } .issue-card--hint { - border-left-color: #64748b; + border-left-color: #6B5A2E; } .issue-card__header { @@ -456,17 +456,17 @@ import { .issue-severity[data-severity='hint'] { background: rgba(100, 116, 139, 0.15); - color: #94a3b8; + color: #D4C9A8; } .issue-rule { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .issue-category { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -482,7 +482,7 @@ import { .issue-card__message { margin: 0 0 0.75rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); line-height: 1.5; } @@ -491,7 +491,7 @@ import { align-items: center; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.5rem; } @@ -501,7 +501,7 @@ import { .location-line, .location-column { - color: #64748b; + color: #6B5A2E; } .issue-card__fix { @@ -514,7 +514,7 @@ import { .issue-card__fix strong { display: block; margin-bottom: 0.35rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; } @@ -547,7 +547,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .lint-empty svg { @@ -557,7 +557,7 @@ import { .lint-empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .lint-empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts index 88ca7c417..c5f589ead 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-merge-preview.component.ts @@ -207,17 +207,17 @@ import { .merge-preview__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .merge-preview__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .merge-preview__sources { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -239,15 +239,15 @@ import { .field span { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .field select { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .field select[multiple] { @@ -269,7 +269,7 @@ import { .btn--primary { background: linear-gradient(135deg, #14b8a6, #0d9488); - color: white; + color: #1C1200; } .btn:hover:not(:disabled) { @@ -297,7 +297,7 @@ import { flex-direction: column; gap: 0.25rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -305,7 +305,7 @@ import { .summary-card__value { font-size: 1.5rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .summary-card--success .summary-card__value { @@ -321,13 +321,13 @@ import { } .summary-card__label { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } .merge-preview__conflicts, .merge-preview__rules { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -337,7 +337,7 @@ import { .merge-preview__conflicts h3, .merge-preview__rules h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -388,7 +388,7 @@ import { .conflict-path { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .conflict-resolution { @@ -411,7 +411,7 @@ import { .comparison-side { padding: 0.75rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; } @@ -426,7 +426,7 @@ import { .side-label { display: block; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.25rem; } @@ -434,12 +434,12 @@ import { display: block; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); word-break: break-all; } .comparison-arrow { - color: #64748b; + color: #6B5A2E; } .conflict-card__resolved { @@ -483,13 +483,13 @@ import { .rule-name { font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .rule-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .rule-conflict { @@ -511,7 +511,7 @@ import { .sources-label { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .source-tag { @@ -519,19 +519,19 @@ import { background: #1f2937; border-radius: 4px; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .rule-card__value { padding: 0.5rem; - background: #0f172a; + background: #1C1200; border-radius: 6px; } .value-label { display: block; font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 0.25rem; } @@ -539,7 +539,7 @@ import { display: block; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); word-break: break-all; } @@ -548,20 +548,20 @@ import { align-items: center; gap: 0.75rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } .hash-label { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } .hash-value { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; padding: 0.25rem 0.5rem; background: #0b1224; border-radius: 4px; @@ -569,7 +569,7 @@ import { .hash-time { margin-left: auto; - color: #475569; + color: #6B5A2E; font-size: 0.8rem; } @@ -580,7 +580,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .merge-preview__empty svg { @@ -590,7 +590,7 @@ import { .merge-preview__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .merge-preview__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-simulation.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-simulation.component.ts index 39be9a311..6b12615c7 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-simulation.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/policy-simulation.component.ts @@ -98,7 +98,7 @@ import { BatchEvaluationComponent } from './batch-evaluation.component'; flex-wrap: wrap; gap: 0.25rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border-bottom: 1px solid #1f2937; position: sticky; top: 0; @@ -113,7 +113,7 @@ import { BatchEvaluationComponent } from './batch-evaluation.component'; background: transparent; border: 1px solid transparent; border-radius: 8px; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; font-weight: 500; cursor: pointer; @@ -121,14 +121,14 @@ import { BatchEvaluationComponent } from './batch-evaluation.component'; } .nav-tab:hover { - background: #1e293b; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .nav-tab--active { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15)); border-color: #3b82f6; - color: #f8fafc; + color: #FFFCF5; } .nav-tab__icon { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts index 32483e776..4c3c4b492 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/promotion-gate.component.ts @@ -217,13 +217,13 @@ import { .promotion-gate__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .promotion-gate__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -237,12 +237,12 @@ import { .btn--primary { background: linear-gradient(135deg, #10b981, #059669); - color: white; + color: #1C1200; } .btn--success { background: linear-gradient(135deg, #22c55e, #16a34a); - color: white; + color: #1C1200; } .btn--danger { @@ -271,7 +271,7 @@ import { flex-direction: column; gap: 0.25rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -288,7 +288,7 @@ import { .info-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; text-transform: uppercase; letter-spacing: 0.05em; } @@ -296,7 +296,7 @@ import { .info-value { font-size: 1rem; font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .info-card--ready .info-value { @@ -312,7 +312,7 @@ import { justify-content: space-between; align-items: center; padding: 1rem 1.25rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; margin-bottom: 1.5rem; @@ -334,7 +334,7 @@ import { .summary-text { font-weight: 600; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .summary-stats { @@ -360,7 +360,7 @@ import { } .promotion-gate__checklist { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -369,7 +369,7 @@ import { .promotion-gate__checklist h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -385,7 +385,7 @@ import { padding: 1rem; background: #0b1224; border-radius: 8px; - border-left: 3px solid #64748b; + border-left: 3px solid #6B5A2E; } .check-item--passed { @@ -422,7 +422,7 @@ import { } .check-item--skipped .check-item__indicator { - color: #64748b; + color: #6B5A2E; } .check-item__content { @@ -438,7 +438,7 @@ import { .check-name { font-weight: 600; - color: #f8fafc; + color: #FFFCF5; } .check-required { @@ -454,7 +454,7 @@ import { .check-status { margin-left: auto; font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .check-status[data-status='passed'] { @@ -471,13 +471,13 @@ import { .check-description { margin: 0 0 0.25rem; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } .check-message { margin: 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; } @@ -492,7 +492,7 @@ import { } .promotion-gate__override { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -521,7 +521,7 @@ import { .override-warning p { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -539,15 +539,15 @@ import { .field span { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .field textarea { padding: 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); resize: vertical; font-family: inherit; } @@ -569,7 +569,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .promotion-gate__empty svg { @@ -579,7 +579,7 @@ import { .promotion-gate__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .promotion-gate__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts index 56a558738..bc2566ba6 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-dashboard.component.ts @@ -221,13 +221,13 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .shadow-dashboard__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .shadow-dashboard__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .shadow-dashboard__summary { @@ -238,7 +238,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' } .card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -253,12 +253,12 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .card__value { font-size: 1.75rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .card__label { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; } .card--success .card__value { @@ -292,17 +292,17 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .filter-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } .filter-field select { padding: 0.5rem 0.75rem; - background: #0f172a; - border: 1px solid #334155; + background: #1C1200; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); min-width: 150px; } @@ -328,11 +328,11 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' } .btn--secondary { - background: #334155; + background: #3D2E0A; } .shadow-dashboard__breakdown { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -341,7 +341,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .shadow-dashboard__breakdown h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -358,7 +358,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' } .breakdown-item__label { - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.875rem; } @@ -377,13 +377,13 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' } .breakdown-item__count { - color: #94a3b8; + color: #D4C9A8; font-size: 0.875rem; text-align: right; } .shadow-dashboard__table { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -395,13 +395,13 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .table-header h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } .table-header p { margin: 0.25rem 0 0; - color: #64748b; + color: #6B5A2E; font-size: 0.875rem; } @@ -425,7 +425,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' th { background: #0b1224; - color: #94a3b8; + color: #D4C9A8; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; @@ -445,7 +445,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .cell--mono { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .status-badge { @@ -473,7 +473,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' font-size: 0.75rem; font-weight: 500; background: #1f2937; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .decision-chip[data-decision='deny'] { @@ -493,7 +493,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .severity-label { margin-left: 0.5rem; - color: #64748b; + color: #6B5A2E; font-size: 0.75rem; } @@ -509,7 +509,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .shadow-dashboard__empty svg { @@ -519,7 +519,7 @@ import { ShadowModeIndicatorComponent } from './shadow-mode-indicator.component' .shadow-dashboard__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .shadow-dashboard__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts index 7663a21e5..24c185045 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/shadow-mode-indicator.component.ts @@ -86,8 +86,8 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; gap: 0.75rem; padding: 0.5rem 1rem; border-radius: 8px; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; font-size: 0.875rem; } @@ -127,14 +127,14 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; } .shadow-indicator__label { - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .shadow-indicator__status { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 600; } @@ -151,18 +151,18 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; flex-direction: column; gap: 0.125rem; padding-left: 0.75rem; - border-left: 1px solid #475569; + border-left: 1px solid #6B5A2E; margin-left: 0.5rem; } .shadow-indicator__policy { - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; } .shadow-indicator__traffic { - color: #94a3b8; + color: #D4C9A8; font-size: 0.75rem; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts index 09e02758c..24902603c 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-console.component.ts @@ -316,13 +316,13 @@ import { .sim-console__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .sim-console__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .sim-console__status { @@ -337,7 +337,7 @@ import { border-radius: 999px; font-size: 0.8rem; font-weight: 600; - border: 1px solid #334155; + border: 1px solid #3D2E0A; } .status-pill--completed { @@ -356,7 +356,7 @@ import { } .sim-console__time { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -374,7 +374,7 @@ import { } .sim-console__form { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -393,7 +393,7 @@ import { .form-section h3 { margin: 0 0 0.75rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; font-weight: 600; } @@ -411,7 +411,7 @@ import { .field span { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .field--checkbox { @@ -429,9 +429,9 @@ import { textarea { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-family: inherit; } @@ -473,8 +473,8 @@ import { } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn:disabled { @@ -492,7 +492,7 @@ import { .results-diff, .results-findings, .results-explain { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -503,7 +503,7 @@ import { .results-findings h3, .results-explain h3 { margin: 0 0 1rem; - color: #f8fafc; + color: #FFFCF5; font-size: 1rem; } @@ -523,7 +523,7 @@ import { .summary-item__value { font-size: 1.5rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .summary-item--success .summary-item__value { @@ -532,7 +532,7 @@ import { .summary-item__label { font-size: 0.8rem; - color: #64748b; + color: #6B5A2E; } .severity-breakdown, @@ -544,7 +544,7 @@ import { .decision-breakdown h4 { margin: 0 0 0.5rem; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .severity-chips, @@ -560,7 +560,7 @@ import { border-radius: 4px; font-size: 0.8rem; background: #1f2937; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .decision-chip[data-decision='deny'] { @@ -587,7 +587,7 @@ import { .diff-column h4 { margin: 0 0 0.5rem; font-size: 0.9rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .diff-column--added h4 { @@ -622,17 +622,17 @@ import { } .diff-column li.empty { - color: #64748b; + color: #6B5A2E; font-style: italic; } .diff-purl { font-family: 'Monaco', 'Consolas', monospace; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .diff-advisory { - color: #94a3b8; + color: #D4C9A8; } .diff-reason { @@ -660,7 +660,7 @@ import { th { background: #0b1224; - color: #94a3b8; + color: #D4C9A8; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; @@ -722,7 +722,7 @@ import { .score { margin-left: 0.5rem; - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -750,17 +750,17 @@ import { } .explain-step { - color: #64748b; + color: #6B5A2E; font-weight: 600; } .explain-rule { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-family: 'Monaco', 'Consolas', monospace; } .explain-type { - color: #94a3b8; + color: #D4C9A8; font-size: 0.8rem; } @@ -788,7 +788,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .sim-console__empty svg { @@ -798,7 +798,7 @@ import { .sim-console__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .sim-console__empty p { diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts index bc96e197a..6df3459e2 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-dashboard.component.ts @@ -192,12 +192,12 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; margin: 0.25rem 0 0; font-size: 1.75rem; font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } .simulation__subtitle { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.95rem; } @@ -235,7 +235,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; align-items: center; gap: 0.5rem; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .checklist--passed { @@ -280,8 +280,8 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; } .btn--promote:disabled { - background: #334155; - color: #64748b; + background: #3D2E0A; + color: #6B5A2E; cursor: not-allowed; } @@ -292,7 +292,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: thin; - scrollbar-color: #334155 transparent; + scrollbar-color: #3D2E0A transparent; } .simulation__tabs::-webkit-scrollbar { @@ -304,7 +304,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; } .simulation__tabs::-webkit-scrollbar-thumb { - background: #334155; + background: #3D2E0A; border-radius: 2px; } @@ -313,7 +313,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.9rem; font-weight: 500; @@ -354,7 +354,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; font-size: 0.7rem; font-weight: 600; border-radius: 999px; - background: #334155; + background: #3D2E0A; color: #e5e7eb; } @@ -379,7 +379,7 @@ import { ShadowModeConfig } from '../../core/api/policy-simulation.models'; } .simulation__content { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; min-height: 400px; diff --git a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts index 52df12a7a..55c96cf27 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-simulation/simulation-history.component.ts @@ -365,13 +365,13 @@ import { .sim-history__header h1 { margin: 0.25rem 0 0; - color: #f8fafc; + color: #FFFCF5; font-size: 1.5rem; } .sim-history__lede { margin: 0.25rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .header-actions { @@ -390,12 +390,12 @@ import { .btn--primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); - color: white; + color: #1C1200; } .btn--secondary { - background: #334155; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .btn:hover:not(:disabled) { @@ -410,7 +410,7 @@ import { .sim-history__filters { margin-bottom: 1.5rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; } @@ -430,7 +430,7 @@ import { .filter-field span { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -438,9 +438,9 @@ import { .filter-field select { padding: 0.5rem 0.75rem; background: #0b1224; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); min-width: 160px; } @@ -466,7 +466,7 @@ import { display: flex; gap: 1rem; padding: 1rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; transition: all 150ms ease; @@ -513,7 +513,7 @@ import { .sim-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.9rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-weight: 600; } @@ -554,7 +554,7 @@ import { } .timestamp { - color: #64748b; + color: #6B5A2E; font-size: 0.85rem; } @@ -572,11 +572,11 @@ import { } .detail-label { - color: #64748b; + color: #6B5A2E; } .detail-value { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .history-card__findings { @@ -614,7 +614,7 @@ import { } .finding-total { - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } @@ -626,14 +626,14 @@ import { } .hash-label { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } .hash-value { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; background: #0b1224; padding: 0.15rem 0.4rem; border-radius: 4px; @@ -649,14 +649,14 @@ import { .tag { padding: 0.15rem 0.4rem; background: #1f2937; - color: #94a3b8; + color: #D4C9A8; border-radius: 4px; font-size: 0.7rem; } .history-card__notes { margin: 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; font-style: italic; } @@ -674,16 +674,16 @@ import { width: 32px; height: 32px; background: transparent; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 6px; - color: #94a3b8; + color: #D4C9A8; cursor: pointer; transition: all 150ms ease; } .action-btn:hover { - background: #1e293b; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); } .action-btn--active { @@ -725,7 +725,7 @@ import { .comparison-modal__content, .reproducibility-modal__content { position: relative; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1.5rem; @@ -746,19 +746,19 @@ import { .comparison-header h3, .reproducibility-header h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; } .close-btn { background: transparent; border: none; - color: #64748b; + color: #6B5A2E; cursor: pointer; padding: 0.25rem; } .close-btn:hover { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .comparison-summary { @@ -780,11 +780,11 @@ import { .comparison-id { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.85rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .vs { - color: #64748b; + color: #6B5A2E; font-size: 0.8rem; } @@ -809,7 +809,7 @@ import { .match-label { font-size: 0.8rem; - color: #94a3b8; + color: #D4C9A8; } .comparison-section { @@ -818,7 +818,7 @@ import { .comparison-section h4 { margin: 0 0 0.5rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-size: 0.9rem; } @@ -851,7 +851,7 @@ import { } .item-component { - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); flex: 1; font-family: 'Monaco', 'Consolas', monospace; font-size: 0.8rem; @@ -859,7 +859,7 @@ import { .item-advisory, .item-id { - color: #94a3b8; + color: #D4C9A8; } .item-decision, @@ -868,7 +868,7 @@ import { } .item-reason { - color: #64748b; + color: #6B5A2E; font-style: italic; } @@ -935,7 +935,7 @@ import { .discrepancies ul { margin: 0; padding-left: 1.5rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .discrepancies li { @@ -949,7 +949,7 @@ import { justify-content: center; padding: 4rem 2rem; text-align: center; - color: #64748b; + color: #6B5A2E; } .sim-history__empty svg { @@ -959,7 +959,7 @@ import { .sim-history__empty h3 { margin: 0 0 0.5rem; - color: #94a3b8; + color: #D4C9A8; } .sim-history__empty p { 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 6c78159eb..31dace0e1 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 @@ -199,7 +199,7 @@ import { PolicyApiService } from '../services/policy-api.service'; ` :host { display: block; - background: linear-gradient(145deg, #0f172a 0%, #0b1224 60%, #0a0f1f 100%); + background: linear-gradient(145deg, #1C1200 0%, #0b1224 60%, #0a0f1f 100%); color: #e5e7eb; min-height: 100vh; } @@ -230,7 +230,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .approvals__lede { margin: 0.2rem 0 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .approvals__meta { @@ -242,7 +242,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .pill { padding: 0.35rem 0.7rem; border-radius: 999px; - border: 1px solid #334155; + border: 1px solid #3D2E0A; font-weight: 700; } @@ -263,7 +263,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } .card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -277,12 +277,12 @@ import { PolicyApiService } from '../services/policy-api.service'; .card h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; } .card p { margin: 0.2rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .stack { @@ -294,7 +294,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .field span { display: block; margin-bottom: 0.2rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-weight: 600; } @@ -337,20 +337,20 @@ import { PolicyApiService } from '../services/policy-api.service'; .btn--warn { background: #f97316; border-color: #f97316; color: #0b1224; } - .btn--ghost { background: transparent; border-color: #334155; color: #cbd5e1; } + .btn--ghost { background: transparent; border-color: #3D2E0A; color: rgba(212, 201, 168, 0.5); } .approvals__badge { padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.9rem; - border: 1px solid #334155; + border: 1px solid #3D2E0A; } .approvals__badge--ready { border-color: #22c55e; color: #22c55e; } .approvals__badge--missing { border-color: #f59e0b; color: #f59e0b; } .readiness { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -391,16 +391,16 @@ import { PolicyApiService } from '../services/policy-api.service'; .checklist__label { font-weight: 700; - color: #f8fafc; + color: #FFFCF5; } - .checklist__hint { color: #94a3b8; margin-top: 0.1rem; } + .checklist__hint { color: #D4C9A8; margin-top: 0.1rem; } .checklist__pill { align-self: start; padding: 0.25rem 0.55rem; border-radius: 8px; - border: 1px solid #334155; + border: 1px solid #3D2E0A; font-weight: 700; text-transform: capitalize; } @@ -417,14 +417,14 @@ import { PolicyApiService } from '../services/policy-api.service'; } .timeline { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } - .timeline__header h3 { margin: 0; color: #f8fafc; } - .timeline__header p { margin: 0.2rem 0 0; color: #94a3b8; } + .timeline__header h3 { margin: 0; color: #FFFCF5; } + .timeline__header p { margin: 0.2rem 0 0; color: #D4C9A8; } ol { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; } @@ -439,12 +439,12 @@ import { PolicyApiService } from '../services/policy-api.service'; .dot[data-decision='request_changes'] { background: #f59e0b; border-color: #f59e0b; } .timeline__headline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } - .timeline__headline span { color: #94a3b8; } + .timeline__headline span { color: #D4C9A8; } .timeline__time { font-size: 0.9rem; } .timeline__comment { margin: 0.15rem 0 0; color: #e5e7eb; } .comments { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -453,9 +453,9 @@ import { PolicyApiService } from '../services/policy-api.service'; .comments__list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: grid; gap: 0.6rem; } .comments__meta { display: flex; gap: 0.5rem; align-items: baseline; } .comments__body { margin: 0.15rem 0 0; color: #e5e7eb; } - .muted { color: #94a3b8; font-size: 0.9rem; } + .muted { color: #D4C9A8; font-size: 0.9rem; } - .schedule__summary { display: flex; flex-direction: column; gap: 0.15rem; color: #cbd5e1; } + .schedule__summary { display: flex; flex-direction: column; gap: 0.15rem; color: rgba(212, 201, 168, 0.5); } @media (max-width: 960px) { .approvals__header { flex-direction: column; } } `, diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts index 02f773840..52f409a01 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/dashboard/policy-dashboard.component.ts @@ -100,25 +100,25 @@ import { .dash { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .dash__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .dash__eyebrow { margin: 0; color: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } - .dash__lede { margin: 0.2rem 0 0; color: #94a3b8; } + .dash__lede { margin: 0.2rem 0 0; color: #D4C9A8; } .dash__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; } - .pill { border: 1px solid #334155; padding: 0.35rem 0.7rem; border-radius: 999px; } + .pill { border: 1px solid #3D2E0A; padding: 0.35rem 0.7rem; border-radius: 999px; } .dash__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; } - .card { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); } - .card h3 { margin: 0; color: #f8fafc; } - .card p { margin: 0.15rem 0 0; color: #94a3b8; } + .card { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.25); } + .card h3 { margin: 0; color: #FFFCF5; } + .card p { margin: 0.15rem 0 0; color: #D4C9A8; } .run-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .run-list li { padding: 0.5rem 0.4rem; border-bottom: 1px solid #1f2937; } .run-list li:last-child { border-bottom: none; } - .muted { color: #94a3b8; font-size: 0.9rem; } + .muted { color: #D4C9A8; font-size: 0.9rem; } .heatmap { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.65rem; } .heatmap__name { color: #e5e7eb; font-weight: 600; } .heatmap__bar { display: flex; align-items: center; gap: 0.4rem; background: #111827; border-radius: 999px; overflow: hidden; padding: 0.2rem; } .heatmap__fill { display: block; height: 10px; background: linear-gradient(90deg, #22d3ee, #2563eb); border-radius: 999px; } - .heatmap__value { color: #cbd5e1; font-size: 0.85rem; } - .heatmap__latency { color: #94a3b8; font-size: 0.85rem; } + .heatmap__value { color: rgba(212, 201, 168, 0.5); font-size: 0.85rem; } + .heatmap__latency { color: #D4C9A8; font-size: 0.85rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } - .chip { border: 1px solid #334155; border-radius: 999px; padding: 0.25rem 0.6rem; background: #0b162e; } + .chip { border: 1px solid #3D2E0A; border-radius: 999px; padding: 0.25rem 0.6rem; background: #0b162e; } .chip--muted { opacity: 0.8; } `, ], 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 c20411431..7a7dedcf7 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 @@ -205,7 +205,7 @@ interface ChecklistItem { } .policy-editor__meta-item { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 10px; padding: 0.75rem 0.9rem; @@ -226,7 +226,7 @@ interface ChecklistItem { } .policy-editor__main { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -386,7 +386,7 @@ interface ChecklistItem { padding: 0.65rem 0.75rem; border: 1px solid #1f2937; border-radius: 8px; - background: #0f172a; + background: #1C1200; } .diagnostics__severity { @@ -430,7 +430,7 @@ interface ChecklistItem { } .sidebar-card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; 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 9e7e1224a..66b881ec5 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 @@ -71,12 +71,12 @@ import jsPDF from './jspdf.stub'; .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: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } - .expl__lede { margin: 0.2rem 0 0; color: #94a3b8; } + .expl__lede { margin: 0.2rem 0 0; color: #D4C9A8; } .expl__meta { display: flex; gap: 0.5rem; align-items: center; } .expl__btn { display: inline-flex; align-items: center; border: 1px solid #1f2937; border-radius: 8px; padding: 0.35rem 0.65rem; color: #e5e7eb; text-decoration: none; background: #0b1224; } .expl__btn:hover { border-color: #22d3ee; } .expl__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; } - .card { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } + .card { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; 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: #0b1224; border: 1px solid #1f2937; border-radius: 8px; padding: 0.6rem; max-height: 240px; overflow: auto; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts index b3bbda2dc..63c6c2745 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/rule-builder/policy-rule-builder.component.ts @@ -77,12 +77,12 @@ import { ActivatedRoute } from '@angular/router'; .rb { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .rb__header { display: flex; justify-content: space-between; gap: 1rem; } .rb__eyebrow { margin: 0; color: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } - .rb__lede { margin: 0.2rem 0 0; color: #94a3b8; } + .rb__lede { margin: 0.2rem 0 0; color: #D4C9A8; } .rb__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 1rem; margin-top: 1rem; } - .rb__form { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; display: grid; gap: 0.65rem; } - label { display: grid; gap: 0.25rem; color: #cbd5e1; } + .rb__form { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; display: grid; gap: 0.65rem; } + label { display: grid; gap: 0.25rem; color: rgba(212, 201, 168, 0.5); } input, select { background: #0b1224; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 8px; padding: 0.5rem; } - .rb__preview { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } + .rb__preview { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } pre { margin: 0; max-height: 420px; overflow: auto; background: #0b1224; border: 1px solid #1f2937; border-radius: 10px; padding: 0.75rem; } @media (max-width: 1024px) { .rb__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 74f17ece2..c720172e1 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 @@ -225,7 +225,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .sim__lede { margin: 0.25rem 0 0; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .sim__meta { @@ -236,7 +236,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } .pill { - border: 1px solid #334155; + border: 1px solid #3D2E0A; padding: 0.35rem 0.65rem; border-radius: 999px; font-weight: 600; @@ -253,7 +253,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } .sim__timestamp { - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -265,7 +265,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } .sim__form { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -276,7 +276,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .field span { display: block; margin-bottom: 0.25rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); font-weight: 600; } @@ -326,7 +326,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } .card { - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -334,12 +334,12 @@ import { PolicyApiService } from '../services/policy-api.service'; .card h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; } .card p { margin: 0.2rem 0 0; - color: #94a3b8; + color: #D4C9A8; } dl { @@ -349,7 +349,7 @@ import { PolicyApiService } from '../services/policy-api.service'; } dt { - color: #94a3b8; + color: #D4C9A8; font-size: 0.9rem; } @@ -367,7 +367,7 @@ import { PolicyApiService } from '../services/policy-api.service'; .diff-grid h4 { margin: 0 0 0.2rem; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .diff-grid ul { @@ -376,12 +376,12 @@ import { PolicyApiService } from '../services/policy-api.service'; padding: 0; display: grid; gap: 0.25rem; - color: #94a3b8; + color: #D4C9A8; } .table { margin-top: 1.2rem; - background: #0f172a; + background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; @@ -389,12 +389,12 @@ import { PolicyApiService } from '../services/policy-api.service'; .table__header h3 { margin: 0; - color: #f8fafc; + color: #FFFCF5; } .table__header p { margin: 0.2rem 0 0; - color: #94a3b8; + color: #D4C9A8; } .table__scroll { @@ -419,7 +419,7 @@ import { PolicyApiService } from '../services/policy-api.service'; th { background: #0b1224; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); position: sticky; top: 0; } diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts index b393eea6d..1299145dd 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts @@ -105,23 +105,23 @@ import { PolicyPackStore } from '../services/policy-pack.store'; .workspace { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .workspace__header { margin-bottom: 1rem; } .workspace__eyebrow { margin: 0; color: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } - .workspace__lede { margin: 0.2rem 0 0; color: #94a3b8; } + .workspace__lede { margin: 0.2rem 0 0; color: #D4C9A8; } .workspace__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } - .pack-card { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; box-shadow: 0 12px 30px rgba(0,0,0,0.28); display: grid; gap: 0.6rem; } + .pack-card { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; box-shadow: 0 12px 30px rgba(0,0,0,0.28); display: grid; gap: 0.6rem; } .pack-card__head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; } .pack-card__eyebrow { margin: 0; color: #FFCF70; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; } - .pack-card__desc { margin: 0.2rem 0 0; color: #cbd5e1; } - .pack-card__meta { display: grid; justify-items: end; gap: 0.2rem; color: #94a3b8; font-size: 0.9rem; } + .pack-card__desc { margin: 0.2rem 0 0; color: rgba(212, 201, 168, 0.5); } + .pack-card__meta { display: grid; justify-items: end; gap: 0.2rem; color: #D4C9A8; font-size: 0.9rem; } .pack-card__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .pack-card__tags li { padding: 0.2rem 0.45rem; border: 1px solid #1f2937; border-radius: 999px; background: #0b162e; } .pack-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } - .pack-card__actions a { color: #e5e7eb; border: 1px solid #334155; border-radius: 8px; padding: 0.35rem 0.6rem; text-decoration: none; } + .pack-card__actions a { color: #e5e7eb; border: 1px solid #3D2E0A; border-radius: 8px; padding: 0.35rem 0.6rem; text-decoration: none; } .pack-card__actions a:hover { border-color: #22d3ee; } .pack-card__actions a.action-disabled { opacity: 0.5; pointer-events: none; border-style: dashed; } .pack-card__detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.35rem 1rem; margin: 0; } - dt { color: #94a3b8; font-size: 0.85rem; margin: 0; } + dt { color: #D4C9A8; font-size: 0.85rem; margin: 0; } dd { margin: 0; color: #e5e7eb; } - .workspace__banner { background: #1f2937; border: 1px solid #334155; color: #fbbf24; padding: 0.75rem 1rem; border-radius: 10px; margin: 0.5rem 0 1rem; } + .workspace__banner { background: #1f2937; border: 1px solid #3D2E0A; color: #fbbf24; padding: 0.75rem 1rem; border-radius: 10px; margin: 0.5rem 0 1rem; } .workspace__footer { margin-top: 0.8rem; } .workspace__footer button { background: #2563eb; border: 1px solid #2563eb; color: #e5e7eb; border-radius: 8px; padding: 0.45rem 0.8rem; } `, 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 152a6d820..5da515542 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 @@ -72,19 +72,19 @@ interface YamlDiagnostic { .yaml { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .yaml__header { display: flex; justify-content: space-between; gap: 1rem; } .yaml__eyebrow { margin: 0; color: #22d3ee; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; } - .yaml__lede { margin: 0.2rem 0 0; color: #94a3b8; } - .yaml__meta { display: grid; justify-items: end; gap: 0.2rem; color: #94a3b8; } + .yaml__lede { margin: 0.2rem 0 0; color: #D4C9A8; } + .yaml__meta { display: grid; justify-items: end; gap: 0.2rem; color: #D4C9A8; } .yaml__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr; gap: 1rem; margin-top: 1rem; } - .yaml__editor { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; display: grid; gap: 0.5rem; } - label { color: #cbd5e1; font-weight: 600; } + .yaml__editor { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; display: grid; gap: 0.5rem; } + label { color: rgba(212, 201, 168, 0.5); font-weight: 600; } textarea { width: 100%; background: #0b1224; color: #e5e7eb; border: 1px solid #1f2937; border-radius: 10px; padding: 0.75rem; font-family: 'Monaco','Consolas', monospace; } .toolbar { display: flex; gap: 0.5rem; align-items: center; } button { background: #2563eb; border: 1px solid #2563eb; color: #e5e7eb; border-radius: 8px; padding: 0.4rem 0.8rem; cursor: pointer; } button:disabled { opacity: 0.6; cursor: not-allowed; } - .pill { border: 1px solid #334155; padding: 0.3rem 0.6rem; border-radius: 999px; } + .pill { border: 1px solid #3D2E0A; padding: 0.3rem 0.6rem; border-radius: 999px; } .pill--ok { border-color: #22c55e; color: #22c55e; } .diag { list-style: none; margin: 0; padding: 0; color: #f87171; } - .yaml__preview { background: #0f172a; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } + .yaml__preview { background: #1C1200; border: 1px solid #1f2937; border-radius: 12px; padding: 1rem; } pre { margin: 0; max-height: 420px; overflow: auto; background: #0b1224; border: 1px solid #1f2937; border-radius: 10px; padding: 0.75rem; } @media (max-width: 1024px) { .yaml__layout { grid-template-columns: 1fr; } } `, diff --git a/src/Web/StellaOps.Web/src/app/features/policy/policy-studio.component.ts b/src/Web/StellaOps.Web/src/app/features/policy/policy-studio.component.ts index fa825c2c1..2ce6658d3 100644 --- a/src/Web/StellaOps.Web/src/app/features/policy/policy-studio.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/policy/policy-studio.component.ts @@ -531,19 +531,19 @@ type SortOrder = 'asc' | 'desc'; margin: 0 0 0.25rem; font-size: 1.75rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } .policy-studio__subtitle { margin: 0; - color: #64748b; + color: #6B5A2E; } .policy-studio__tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); } .policy-studio__tab { @@ -552,14 +552,14 @@ type SortOrder = 'asc' | 'desc'; background: transparent; font-size: 0.875rem; font-weight: 500; - color: #64748b; + color: #6B5A2E; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; &:hover { - color: #475569; + color: #6B5A2E; } &--active { @@ -573,7 +573,7 @@ type SortOrder = 'asc' | 'desc'; align-items: center; gap: 0.5rem; padding: 1rem; - background: #f1f5f9; + background: #FFF9ED; border-radius: 0.375rem; margin-bottom: 1rem; } @@ -581,7 +581,7 @@ type SortOrder = 'asc' | 'desc'; .policy-studio__spinner { width: 16px; height: 16px; - border: 2px solid #e2e8f0; + border: 2px solid rgba(212, 201, 168, 0.3); border-top-color: #F5A623; border-radius: 50%; animation: spin 0.6s linear infinite; @@ -615,7 +615,7 @@ type SortOrder = 'asc' | 'desc'; .policy-studio__section { background: white; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.5rem; padding: 1.25rem; } @@ -630,14 +630,14 @@ type SortOrder = 'asc' | 'desc'; margin: 0; font-size: 1.125rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } } .policy-studio__empty { text-align: center; padding: 2rem; - color: #64748b; + color: #6B5A2E; p { margin: 0.25rem 0; @@ -656,21 +656,21 @@ type SortOrder = 'asc' | 'desc'; th, td { padding: 0.75rem; text-align: left; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); } th { font-weight: 600; - color: #475569; - background: #f8fafc; + color: #6B5A2E; + background: #FFFCF5; } td { - color: #1e293b; + color: #3D2E0A; } tbody tr:hover { - background: #f8fafc; + background: #FFFCF5; } } @@ -700,18 +700,18 @@ type SortOrder = 'asc' | 'desc'; align-items: center; justify-content: center; padding: 0.5rem 1rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; background: white; font-size: 0.875rem; font-weight: 500; - color: #475569; + color: #6B5A2E; cursor: pointer; transition: background 0.15s, border-color 0.15s; &:hover:not(:disabled) { - background: #f8fafc; - border-color: #cbd5e1; + background: #FFFCF5; + border-color: rgba(212, 201, 168, 0.5); } &:disabled { @@ -722,7 +722,7 @@ type SortOrder = 'asc' | 'desc'; &--primary { background: #F5A623; border-color: #F5A623; - color: white; + color: #1C1200; &:hover:not(:disabled) { background: #E09115; @@ -731,7 +731,7 @@ type SortOrder = 'asc' | 'desc'; } &--secondary { - background: #f1f5f9; + background: #FFF9ED; } &--sm { @@ -748,17 +748,17 @@ type SortOrder = 'asc' | 'desc'; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; - color: #475569; + color: #6B5A2E; } } .form-control { width: 100%; padding: 0.5rem 0.75rem; - border: 1px solid #e2e8f0; + border: 1px solid rgba(212, 201, 168, 0.3); border-radius: 0.375rem; font-size: 0.875rem; - color: #1e293b; + color: #3D2E0A; &:focus { outline: none; @@ -779,7 +779,7 @@ type SortOrder = 'asc' | 'desc'; gap: 1rem; align-items: center; padding: 1rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; margin-bottom: 1rem; } @@ -803,7 +803,7 @@ type SortOrder = 'asc' | 'desc'; label { font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; white-space: nowrap; } } @@ -813,7 +813,7 @@ type SortOrder = 'asc' | 'desc'; user-select: none; &:hover { - background: #f1f5f9; + background: #FFF9ED; } } @@ -824,12 +824,12 @@ type SortOrder = 'asc' | 'desc'; gap: 1rem; margin-top: 1rem; padding-top: 1rem; - border-top: 1px solid #e2e8f0; + border-top: 1px solid rgba(212, 201, 168, 0.3); } .policy-studio__page-info { font-size: 0.875rem; - color: #64748b; + color: #6B5A2E; } .policy-studio__simulation-form, @@ -839,7 +839,7 @@ type SortOrder = 'asc' | 'desc'; align-items: flex-end; margin-bottom: 1.5rem; padding-bottom: 1.5rem; - border-bottom: 1px solid #e2e8f0; + border-bottom: 1px solid rgba(212, 201, 168, 0.3); .form-group { flex: 1; @@ -854,14 +854,14 @@ type SortOrder = 'asc' | 'desc'; margin: 0 0 1rem; font-size: 1rem; font-weight: 600; - color: #1e293b; + color: #3D2E0A; } h4 { margin: 1.5rem 0 0.75rem; font-size: 0.9375rem; font-weight: 600; - color: #475569; + color: #6B5A2E; } } @@ -877,7 +877,7 @@ type SortOrder = 'asc' | 'desc'; flex-direction: column; align-items: center; padding: 1rem; - background: #f8fafc; + background: #FFFCF5; border-radius: 0.375rem; text-align: center; @@ -890,12 +890,12 @@ type SortOrder = 'asc' | 'desc'; .policy-studio__metric-value { font-size: 1.5rem; font-weight: 700; - color: #1e293b; + color: #3D2E0A; } .policy-studio__metric-label { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin-top: 0.25rem; } @@ -903,7 +903,7 @@ type SortOrder = 'asc' | 'desc'; display: flex; gap: 1.5rem; font-size: 0.8125rem; - color: #64748b; + color: #6B5A2E; margin-bottom: 1rem; } @@ -930,14 +930,14 @@ type SortOrder = 'asc' | 'desc'; &--block { background: #fef2f2; color: #991b1b; } &--warn { background: #fff7ed; color: #c2410c; } &--monitor { background: #fefce8; color: #a16207; } - &--ignore { background: #f1f5f9; color: #64748b; } + &--ignore { background: #FFF9ED; color: #6B5A2E; } } .decision-badge { &--allow { background: #f0fdf4; color: #166534; } &--deny { background: #fef2f2; color: #991b1b; } &--warn { background: #fff7ed; color: #c2410c; } - &--pending { background: #f1f5f9; color: #64748b; } + &--pending { background: #FFF9ED; color: #6B5A2E; } } `], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/src/Web/StellaOps.Web/src/app/features/proof-chain/proof-chain.component.ts b/src/Web/StellaOps.Web/src/app/features/proof-chain/proof-chain.component.ts index c36e5b459..67056cd3c 100644 --- a/src/Web/StellaOps.Web/src/app/features/proof-chain/proof-chain.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/proof-chain/proof-chain.component.ts @@ -267,7 +267,7 @@ export class ProofChainComponent implements OnInit, OnDestroy { 'text-valign': 'center', 'text-halign': 'center', 'background-color': '#4A90E2', - color: '#fff', + color: '#1C1200', 'font-size': 10, width: 80, height: 80, diff --git a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-alert-config.component.ts b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-alert-config.component.ts index 1c71db7b0..b5149adbf 100644 --- a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-alert-config.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-alert-config.component.ts @@ -299,7 +299,7 @@ import { QuotaAlertConfig, QuotaAlertThreshold, QuotaAlertChannel, QuotaCategory .btn-primary { background: var(--color-primary); - color: white; + color: #1C1200; border-color: var(--color-primary); } diff --git a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-forecast.component.ts b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-forecast.component.ts index 74b59b22d..5aac6f633 100644 --- a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-forecast.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-forecast.component.ts @@ -242,7 +242,7 @@ import { QuotaForecast, QuotaCategory } from '../../core/api/quota.models'; .btn-primary { background: var(--color-primary); - color: white; + color: #1C1200; border-color: var(--color-primary); } diff --git a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-report-export.component.ts b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-report-export.component.ts index a38863f89..d942a892a 100644 --- a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-report-export.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/quota-report-export.component.ts @@ -435,7 +435,7 @@ import { QuotaReportRequest, QuotaReportResponse, QuotaCategory } from '../../co .btn-primary { background: var(--color-primary); - color: white; + color: #1C1200; border-color: var(--color-primary); } diff --git a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/tenant-quota-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/tenant-quota-detail.component.ts index 03c9065a6..c89cd49f9 100644 --- a/src/Web/StellaOps.Web/src/app/features/quota-dashboard/tenant-quota-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/quota-dashboard/tenant-quota-detail.component.ts @@ -400,7 +400,7 @@ import { TenantQuotaBreakdown, QuotaForecast } from '../../core/api/quota.models .btn-primary { background: var(--color-primary); - color: white; + color: #1C1200; border-color: var(--color-primary); } diff --git a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts index bca6ba1d1..8ea51ed60 100644 --- a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-center.component.ts @@ -176,11 +176,11 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ .reachability__subtitle { margin: 0.25rem 0 0; - color: var(--color-text-secondary, #94a3b8); + color: var(--color-text-secondary, #D4C9A8); } .btn { - border: 1px solid var(--color-border-secondary, #334155); + border: 1px solid var(--color-border-secondary, #3D2E0A); background: transparent; color: var(--color-text-primary, #e5e7eb); border-radius: 10px; @@ -196,7 +196,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ .summary-card { border: 1px solid var(--color-border-primary, #1f2937); - background: var(--color-surface-secondary, #0f172a); + background: var(--color-surface-secondary, #1C1200); border-radius: 14px; padding: 0.9rem 1rem; display: grid; @@ -209,7 +209,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ } .summary-card__label { - color: var(--color-text-secondary, #94a3b8); + color: var(--color-text-secondary, #D4C9A8); font-size: 0.85rem; } @@ -228,8 +228,8 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ } .pill { - border: 1px solid var(--color-border-secondary, #334155); - background: var(--color-surface-secondary, #0f172a); + border: 1px solid var(--color-border-secondary, #3D2E0A); + background: var(--color-surface-secondary, #1C1200); color: var(--color-text-primary, #e5e7eb); border-radius: 999px; padding: 0.35rem 0.75rem; @@ -243,7 +243,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ .reachability__table { border: 1px solid var(--color-border-primary, #1f2937); - background: var(--color-surface-secondary, #0f172a); + background: var(--color-surface-secondary, #1C1200); border-radius: 14px; overflow: hidden; } @@ -262,7 +262,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ } th { - color: var(--color-text-secondary, #94a3b8); + color: var(--color-text-secondary, #D4C9A8); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; @@ -270,7 +270,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ code { font-family: ui-monospace, monospace; - color: var(--color-text-primary, #e2e8f0); + color: var(--color-text-primary, rgba(212, 201, 168, 0.3)); } .status { @@ -278,7 +278,7 @@ const FIXTURE_ROWS: ReachabilityCoverageRow[] = [ padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; - border: 1px solid var(--color-border-secondary, #334155); + border: 1px solid var(--color-border-secondary, #3D2E0A); text-transform: uppercase; letter-spacing: 0.04em; } diff --git a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-explain.component.ts b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-explain.component.ts index 13a5f62d1..519a46e70 100644 --- a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-explain.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-explain.component.ts @@ -213,7 +213,7 @@ export class ReachabilityExplainComponent implements AfterViewInit, OnDestroy { ctx.beginPath(); ctx.moveTo(x + nodeWidth / 2, y + nodeHeight); ctx.lineTo(x + nodeWidth / 2, y + verticalSpacing); - ctx.strokeStyle = '#cbd5e1'; + ctx.strokeStyle = 'rgba(212, 201, 168, 0.5)'; ctx.lineWidth = 2; ctx.stroke(); @@ -223,7 +223,7 @@ export class ReachabilityExplainComponent implements AfterViewInit, OnDestroy { ctx.moveTo(x + nodeWidth / 2 - 6, arrowY - 8); ctx.lineTo(x + nodeWidth / 2, arrowY); ctx.lineTo(x + nodeWidth / 2 + 6, arrowY - 8); - ctx.strokeStyle = '#cbd5e1'; + ctx.strokeStyle = 'rgba(212, 201, 168, 0.5)'; ctx.stroke(); } @@ -251,13 +251,13 @@ export class ReachabilityExplainComponent implements AfterViewInit, OnDestroy { : isEntrypoint ? '#f0fdf4' : isHovered - ? '#f1f5f9' + ? '#FFF9ED' : '#ffffff'; ctx.strokeStyle = isVulnerable ? '#ef4444' : isEntrypoint ? '#22c55e' - : '#e2e8f0'; + : 'rgba(212, 201, 168, 0.3)'; ctx.lineWidth = isVulnerable || isEntrypoint ? 2 : 1; // Rounded rect @@ -270,18 +270,18 @@ export class ReachabilityExplainComponent implements AfterViewInit, OnDestroy { // Icon const icon = isVulnerable ? 'âš ' : isEntrypoint ? 'â–¶' : 'â—‹'; ctx.font = '14px system-ui'; - ctx.fillStyle = isVulnerable ? '#ef4444' : isEntrypoint ? '#22c55e' : '#64748b'; + ctx.fillStyle = isVulnerable ? '#ef4444' : isEntrypoint ? '#22c55e' : '#6B5A2E'; ctx.fillText(icon, x + 10, y + height / 2 + 5); // Name ctx.font = '12px system-ui'; - ctx.fillStyle = '#1e293b'; + ctx.fillStyle = '#3D2E0A'; const name = this.truncateText(node.name, 18); ctx.fillText(name, x + 30, y + 20); // Qualified name (smaller) ctx.font = '10px system-ui'; - ctx.fillStyle = '#64748b'; + ctx.fillStyle = '#6B5A2E'; const qualifiedName = this.truncateText(node.qualifiedName, 24); ctx.fillText(qualifiedName, x + 30, y + 35); diff --git a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-why-drawer.component.ts b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-why-drawer.component.ts index 50a6efc13..cdf93094b 100644 --- a/src/Web/StellaOps.Web/src/app/features/reachability/reachability-why-drawer.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/reachability/reachability-why-drawer.component.ts @@ -157,20 +157,20 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; .why-drawer__confidence { margin-left: 0.5rem; font-size: 0.85rem; - color: #94a3b8; + color: #D4C9A8; } .why-drawer__subtitle { margin: 0.25rem 0 0; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; word-break: break-all; } .why-drawer__close { background: transparent; color: #e5e7eb; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 0.35rem 0.65rem; cursor: pointer; @@ -188,12 +188,12 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; h3 { margin: 0 0 0.5rem; font-size: 0.9rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } .muted { margin: 0; - color: #94a3b8; + color: #D4C9A8; font-size: 0.85rem; } @@ -201,9 +201,9 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; .why-drawer__error, .why-drawer__empty { padding: 0.75rem 1rem; - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 10px; - background: #0f172a; + background: #1C1200; } .timeline { @@ -220,12 +220,12 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; padding: 0.6rem 0.75rem; border: 1px solid #1f2937; border-radius: 10px; - background: #0f172a; + background: #1C1200; } .timeline__when { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; font-family: ui-monospace, monospace; } @@ -241,7 +241,7 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; .path-card { border: 1px solid #1f2937; - background: #0f172a; + background: #1C1200; border-radius: 12px; padding: 0.75rem 0.9rem; } @@ -262,7 +262,7 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; display: flex; gap: 0.75rem; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; font-family: ui-monospace, monospace; } @@ -271,7 +271,7 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; padding-left: 1.25rem; display: grid; gap: 0.35rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); font-size: 0.85rem; } @@ -286,12 +286,12 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; .hop__ep { font-family: ui-monospace, monospace; - color: #cbd5e1; + color: rgba(212, 201, 168, 0.5); } .hop__ts { font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; font-family: ui-monospace, monospace; } @@ -306,7 +306,7 @@ type ReachabilityStatus = 'reachable' | 'unreachable' | 'unknown'; code { font-family: ui-monospace, monospace; font-size: 0.8rem; - color: #e2e8f0; + color: rgba(212, 201, 168, 0.3); } `, ], diff --git a/src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.ts b/src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.ts index e28fcc7e0..3b79ef7c2 100644 --- a/src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/reachability/witness-page.component.ts @@ -307,12 +307,12 @@ interface GraphEdge { .page-subtitle { margin: 0; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .page-subtitle code { font-family: ui-monospace, SFMono-Regular, monospace; padding: 0.125rem 0.375rem; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 4px; font-size: 0.8125rem; } @@ -322,18 +322,18 @@ interface GraphEdge { .panel { padding: 1.25rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; margin-bottom: 1rem; } .panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .panel-title { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; } - .panel-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #64748b); } + .panel-subtitle { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-color-secondary, #6B5A2E); } .section-subtitle { margin: 1rem 0 0.5rem; font-size: 0.875rem; font-weight: 600; } /* State Panel */ .state-panel { - background: linear-gradient(to right, var(--surface-card, #ffffff), var(--surface-ground, #f8fafc)); + background: linear-gradient(to right, var(--surface-card, #ffffff), var(--surface-ground, #FFFCF5)); } .state-summary { display: flex; align-items: center; gap: 2rem; } .state-indicator { @@ -379,7 +379,7 @@ interface GraphEdge { .detail-label { font-size: 0.6875rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; margin-bottom: 0.25rem; } @@ -389,7 +389,7 @@ interface GraphEdge { /* Path Display */ .path-display { padding: 1rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 8px; margin-bottom: 1rem; overflow-x: auto; @@ -410,7 +410,7 @@ interface GraphEdge { .path-node--intermediate { background: var(--gray-100, #f3f4f6); color: var(--gray-700, #374151); } .path-node--gate { background: var(--yellow-100, #fef9c3); color: var(--yellow-700, #a16207); } .path-node--sink { background: var(--red-100, #fee2e2); color: var(--red-700, #b91c1c); } - .path-arrow { color: var(--text-color-secondary, #94a3b8); } + .path-arrow { color: var(--text-color-secondary, #D4C9A8); } .path-details { display: flex; flex-direction: column; gap: 0.5rem; } .path-detail-row { @@ -419,7 +419,7 @@ interface GraphEdge { gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 6px; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8125rem; } @@ -430,18 +430,18 @@ interface GraphEdge { .row-number { width: 1.5rem; text-align: center; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); font-size: 0.75rem; } .row-icon { width: 1.5rem; text-align: center; } .row-info { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; } .row-symbol { font-weight: 500; } - .row-location { font-size: 0.6875rem; color: var(--text-color-secondary, #94a3b8); } - .row-package { font-size: 0.6875rem; color: var(--text-color-secondary, #64748b); } + .row-location { font-size: 0.6875rem; color: var(--text-color-secondary, #D4C9A8); } + .row-package { font-size: 0.6875rem; color: var(--text-color-secondary, #6B5A2E); } .row-confidence { padding: 0.125rem 0.375rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; font-size: 0.6875rem; } @@ -454,7 +454,7 @@ interface GraphEdge { } .explanation-item { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } .explanation-item--full { grid-column: 1 / -1; } @@ -462,7 +462,7 @@ interface GraphEdge { display: block; font-size: 0.6875rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; margin-bottom: 0.25rem; } @@ -490,7 +490,7 @@ interface GraphEdge { align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } .factor-item--positive { border-left: 3px solid var(--green-500, #22c55e); } @@ -511,7 +511,7 @@ interface GraphEdge { .factor-item--neutral .factor-impact { background: var(--gray-100, #f3f4f6); color: var(--gray-500, #6b7280); } .factor-info { flex: 1; } .factor-name { display: block; font-weight: 500; font-size: 0.875rem; } - .factor-desc { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .factor-desc { display: block; font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .factor-weight { font-weight: 600; font-size: 0.875rem; } .factor-item--positive .factor-weight { color: var(--green-600, #16a34a); } .factor-item--negative .factor-weight { color: var(--red-600, #dc2626); } @@ -519,13 +519,13 @@ interface GraphEdge { /* Graph Viewer */ .graph-viewer { padding: 1.5rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 8px; min-height: 300px; } .graph-placeholder { text-align: center; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .graph-legend { display: flex; @@ -541,8 +541,8 @@ interface GraphEdge { .graph-collapsed { padding: 2rem; text-align: center; - color: var(--text-color-secondary, #64748b); - background: var(--surface-ground, #f8fafc); + color: var(--text-color-secondary, #6B5A2E); + background: var(--surface-ground, #FFFCF5); border-radius: 8px; } @@ -557,11 +557,11 @@ interface GraphEdge { border: none; } .btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } - .btn--primary { background: var(--primary-color, #3b82f6); color: white; } + .btn--primary { background: var(--primary-color, #3b82f6); color: #1C1200; } .btn--secondary { background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); - color: var(--text-color, #1e293b); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + color: var(--text-color, #3D2E0A); } @media (max-width: 768px) { diff --git a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-audit.component.ts b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-audit.component.ts index d1644b344..4c65a4469 100644 --- a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-audit.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-audit.component.ts @@ -151,13 +151,13 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad .plan-audit__filter label { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; } .filter-input { padding: 0.5rem 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -177,13 +177,13 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad justify-content: center; padding: 3rem; gap: 1rem; - color: #94a3b8; + color: #D4C9A8; } .spinner { width: 32px; height: 32px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #22d3ee; border-radius: 50%; animation: spin 1s linear infinite; @@ -210,7 +210,7 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad .plan-audit__table th { background: rgba(30, 41, 59, 0.8); - color: #94a3b8; + color: #D4C9A8; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; @@ -222,7 +222,7 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad } .text-muted { - color: #94a3b8; + color: #D4C9A8; } .action-badge { @@ -260,7 +260,7 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad .version-change { font-family: ui-monospace, monospace; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; } .plan-audit__pagination { @@ -273,7 +273,7 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad .pagination-info { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; } .btn { @@ -295,12 +295,12 @@ import { PlanAuditEntry, PaginatedResponse } from '../../../core/api/registry-ad } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } .btn--secondary:hover:not(:disabled) { - background: #475569; + background: #6B5A2E; } .btn--small { diff --git a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-editor.component.ts index ce9169765..ec4654bd0 100644 --- a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-editor.component.ts @@ -241,7 +241,7 @@ import { } .plan-editor__back { - color: #94a3b8; + color: #D4C9A8; text-decoration: none; font-size: 0.875rem; } @@ -262,13 +262,13 @@ import { align-items: center; gap: 1rem; padding: 2rem; - color: #94a3b8; + color: #D4C9A8; } .spinner { width: 24px; height: 24px; - border: 2px solid #334155; + border: 2px solid #3D2E0A; border-top-color: #22d3ee; border-radius: 50%; animation: spin 1s linear infinite; @@ -280,7 +280,7 @@ import { .form-section { background: rgba(30, 41, 59, 0.4); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; @@ -316,15 +316,15 @@ import { display: block; font-size: 0.875rem; font-weight: 500; - color: #94a3b8; + color: #D4C9A8; margin-bottom: 0.375rem; } .form-input { width: 100%; padding: 0.5rem 0.75rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -355,7 +355,7 @@ import { .form-hint { font-size: 0.75rem; - color: #64748b; + color: #6B5A2E; margin: 0.375rem 0 0; } @@ -480,7 +480,7 @@ import { .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:hover:not(:disabled) { @@ -488,12 +488,12 @@ import { } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } .btn--secondary:hover:not(:disabled) { - background: #475569; + background: #6B5A2E; } .btn--danger { diff --git a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-list.component.ts b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-list.component.ts index 0ee756969..bf829e09b 100644 --- a/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/registry-admin/components/plan-list.component.ts @@ -160,8 +160,8 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; .plan-list__search-input { width: 100%; padding: 0.5rem 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -174,8 +174,8 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; .plan-list__filter-select { padding: 0.5rem 1rem; - background: #1e293b; - border: 1px solid #334155; + background: #3D2E0A; + border: 1px solid #3D2E0A; border-radius: 6px; color: #e5e7eb; font-size: 0.875rem; @@ -194,13 +194,13 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; justify-content: center; padding: 3rem; gap: 1rem; - color: #94a3b8; + color: #D4C9A8; } .spinner { width: 32px; height: 32px; - border: 3px solid #334155; + border: 3px solid #3D2E0A; border-top-color: #22d3ee; border-radius: 50%; animation: spin 1s linear infinite; @@ -227,7 +227,7 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; .plan-list__table th { background: rgba(30, 41, 59, 0.8); - color: #94a3b8; + color: #D4C9A8; font-weight: 500; font-size: 0.75rem; text-transform: uppercase; @@ -249,7 +249,7 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; } .text-muted { - color: #94a3b8; + color: #D4C9A8; } .badge { @@ -304,7 +304,7 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; .btn--primary { background: #22d3ee; - color: #0f172a; + color: #1C1200; } .btn--primary:hover { @@ -312,12 +312,12 @@ import { PlanRuleDto } from '../../../core/api/registry-admin.models'; } .btn--secondary { - background: #334155; + background: #3D2E0A; color: #e5e7eb; } .btn--secondary:hover { - background: #475569; + background: #6B5A2E; } .btn--danger { diff --git a/src/Web/StellaOps.Web/src/app/features/registry-admin/registry-admin.component.ts b/src/Web/StellaOps.Web/src/app/features/registry-admin/registry-admin.component.ts index 6420098ee..7dcad0773 100644 --- a/src/Web/StellaOps.Web/src/app/features/registry-admin/registry-admin.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/registry-admin/registry-admin.component.ts @@ -111,7 +111,7 @@ type TabType = 'plans' | 'audit'; .registry-admin__subtitle { font-size: 0.875rem; - color: #94a3b8; + color: #D4C9A8; margin: 0; } @@ -122,7 +122,7 @@ type TabType = 'plans' | 'audit'; .stat-card { background: rgba(30, 41, 59, 0.6); - border: 1px solid #334155; + border: 1px solid #3D2E0A; border-radius: 8px; padding: 0.75rem 1.25rem; text-align: center; @@ -139,7 +139,7 @@ type TabType = 'plans' | 'audit'; .stat-label { display: block; font-size: 0.75rem; - color: #94a3b8; + color: #D4C9A8; text-transform: uppercase; letter-spacing: 0.05em; } @@ -156,7 +156,7 @@ type TabType = 'plans' | 'audit'; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; - color: #94a3b8; + color: #D4C9A8; text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/environment-settings/environment-settings.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/environment-settings/environment-settings.component.ts index 8571726c8..02931a4d8 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/environment-settings/environment-settings.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/environment-settings/environment-settings.component.ts @@ -231,7 +231,7 @@ import type { Environment } from '../../../../../core/api/release-environment.mo .btn-primary { padding: 0.75rem 1.5rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/freeze-window-editor/freeze-window-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/freeze-window-editor/freeze-window-editor.component.ts index 9551daedb..07e107907 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/freeze-window-editor/freeze-window-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/freeze-window-editor/freeze-window-editor.component.ts @@ -168,7 +168,7 @@ import { .btn-primary { padding: 0.5rem 1rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/target-list/target-list.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/target-list/target-list.component.ts index 04176e429..72867b2cb 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/target-list/target-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/components/target-list/target-list.component.ts @@ -173,7 +173,7 @@ import { .btn-primary { padding: 0.5rem 1rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-detail/environment-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-detail/environment-detail.component.ts index 320c955f7..23758b33e 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-detail/environment-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-detail/environment-detail.component.ts @@ -265,7 +265,7 @@ import { getHealthPercentage } from '../../../../core/api/release-environment.mo .btn-primary { padding: 0.5rem 1rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-list/environment-list.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-list/environment-list.component.ts index 3d1e867d0..599e29521 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-list/environment-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/environments/environment-list/environment-list.component.ts @@ -252,7 +252,7 @@ import { .btn-primary { padding: 0.5rem 1rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; font-weight: 500; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/evidence/evidence-detail/evidence-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/evidence/evidence-detail/evidence-detail.component.ts index e673e3361..e454c0000 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/evidence/evidence-detail/evidence-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/evidence/evidence-detail/evidence-detail.component.ts @@ -612,7 +612,7 @@ type TabType = 'overview' | 'content' | 'signature' | 'timeline'; .btn-primary { background: #3b82f6; - color: white; + color: #1C1200; } .btn-primary:hover:not(:disabled) { @@ -1041,8 +1041,8 @@ type TabType = 'overview' | 'content' | 'signature' | 'timeline'; .raw-view { margin: 0; padding: 20px; - background: #1e293b; - color: #e2e8f0; + background: #3D2E0A; + color: rgba(212, 201, 168, 0.3); font-family: monospace; font-size: 13px; overflow-x: auto; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/create-release/create-release.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/create-release/create-release.component.ts index 6e1d3c61c..6c997a1e8 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/create-release/create-release.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/create-release/create-release.component.ts @@ -556,7 +556,7 @@ import { .btn-primary { padding: 0.75rem 1.5rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/release-detail.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/release-detail.component.ts index 84d82cd2a..61b7a3e35 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/release-detail.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-detail/release-detail.component.ts @@ -629,7 +629,7 @@ import { .btn-primary { padding: 0.5rem 1rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-list/release-list.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-list/release-list.component.ts index b3c471e2e..8d4085bb1 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-list/release-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/releases/release-list/release-list.component.ts @@ -449,7 +449,7 @@ import { .btn-primary { padding: 0.75rem 1.5rem; background: var(--primary-color, #0066cc); - color: white; + color: #1C1200; border: none; border-radius: 6px; cursor: pointer; diff --git a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/workflows/workflow-editor/workflow-editor.component.ts b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/workflows/workflow-editor/workflow-editor.component.ts index effdf5182..8f4a9f926 100644 --- a/src/Web/StellaOps.Web/src/app/features/release-orchestrator/workflows/workflow-editor/workflow-editor.component.ts +++ b/src/Web/StellaOps.Web/src/app/features/release-orchestrator/workflows/workflow-editor/workflow-editor.component.ts @@ -177,7 +177,7 @@ interface ConnectionState { [attr.d]="connection.path" class="connection-line" fill="none" - stroke="#94a3b8" + stroke="#D4C9A8" stroke-width="2" /> = { .btn--primary { background: var(--primary, #3b82f6); - color: white; + color: #1C1200; border: none; &:hover { diff --git a/src/Web/StellaOps.Web/src/app/shared/domain/digest-chip/digest-chip.component.ts b/src/Web/StellaOps.Web/src/app/shared/domain/digest-chip/digest-chip.component.ts index 8361616ed..2a6b3ff5c 100644 --- a/src/Web/StellaOps.Web/src/app/shared/domain/digest-chip/digest-chip.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/domain/digest-chip/digest-chip.component.ts @@ -87,7 +87,7 @@ import { CommonModule } from '@angular/common'; } .digest-chip__label { - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .digest-chip__value { diff --git a/src/Web/StellaOps.Web/src/app/shared/domain/evidence-link/evidence-link.component.ts b/src/Web/StellaOps.Web/src/app/shared/domain/evidence-link/evidence-link.component.ts index 9987d4209..d7c7bb93e 100644 --- a/src/Web/StellaOps.Web/src/app/shared/domain/evidence-link/evidence-link.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/domain/evidence-link/evidence-link.component.ts @@ -46,8 +46,8 @@ export type EvidenceType = 'promotion' | 'deployment' | 'release' | 'audit' | 's align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; font-size: 0.75rem; color: var(--primary-color, #3b82f6); @@ -74,7 +74,7 @@ export type EvidenceType = 'promotion' | 'deployment' | 'release' | 'audit' | 's } .evidence-link__type { - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .evidence-link__badges { diff --git a/src/Web/StellaOps.Web/src/app/shared/domain/gate-summary-panel/gate-summary-panel.component.ts b/src/Web/StellaOps.Web/src/app/shared/domain/gate-summary-panel/gate-summary-panel.component.ts index 67939a582..5be8b772d 100644 --- a/src/Web/StellaOps.Web/src/app/shared/domain/gate-summary-panel/gate-summary-panel.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/domain/gate-summary-panel/gate-summary-panel.component.ts @@ -187,7 +187,7 @@ export interface GateResult { .gate-summary { padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } @@ -197,20 +197,20 @@ export interface GateResult { gap: 1rem; margin-bottom: 1rem; padding-bottom: 0.75rem; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .gate-summary__title { margin: 0; font-size: 0.875rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .gate-summary__policy, .gate-summary__snapshot { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .gate-summary__list { @@ -222,7 +222,7 @@ export interface GateResult { .gate-summary__item { padding: 0.5rem; border-radius: 4px; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); } .gate-summary__item--advisory { @@ -239,7 +239,7 @@ export interface GateResult { .gate-summary__rule-hits { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .gate-summary__witness-metrics { @@ -282,7 +282,7 @@ export interface GateResult { .gate-summary__explain { padding: 0.125rem 0.5rem; background: transparent; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; font-size: 0.75rem; color: var(--primary-color, #3b82f6); @@ -299,14 +299,14 @@ export interface GateResult { .gate-summary__reason { margin: 0.5rem 0 0; font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } /* Witness details expandable section */ .gate-summary__witness-details { margin-top: 0.75rem; padding-top: 0.75rem; - border-top: 1px solid var(--surface-border, #e2e8f0); + border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .witness-details__header { @@ -319,7 +319,7 @@ export interface GateResult { .witness-details__title { font-size: 0.75rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .witness-details__advisory-note { @@ -364,11 +364,11 @@ export interface GateResult { .witness-path__vuln { font-family: var(--font-mono, monospace); font-size: 0.6875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .witness-path__route { - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -378,20 +378,20 @@ export interface GateResult { .witness-details__empty { margin: 0; font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); font-style: italic; } .witness-details__footer { margin-top: 0.75rem; padding-top: 0.5rem; - border-top: 1px dashed var(--surface-border, #e2e8f0); + border-top: 1px dashed var(--surface-border, rgba(212, 201, 168, 0.3)); } .gate-summary__footer { margin-top: 1rem; padding-top: 0.75rem; - border-top: 1px solid var(--surface-border, #e2e8f0); + border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .btn { @@ -406,7 +406,7 @@ export interface GateResult { .btn--primary { background: var(--primary-color, #3b82f6); border: none; - color: white; + color: #1C1200; } .btn--primary:hover { @@ -414,13 +414,13 @@ export interface GateResult { } .btn--secondary { - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + color: var(--text-color, #3D2E0A); } .btn--secondary:hover { - background: var(--surface-hover, #f1f5f9); + background: var(--surface-hover, #FFF9ED); } .btn--sm { diff --git a/src/Web/StellaOps.Web/src/app/shared/domain/witness-path-preview/witness-path-preview.component.ts b/src/Web/StellaOps.Web/src/app/shared/domain/witness-path-preview/witness-path-preview.component.ts index dae151bdb..970b51f5f 100644 --- a/src/Web/StellaOps.Web/src/app/shared/domain/witness-path-preview/witness-path-preview.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/domain/witness-path-preview/witness-path-preview.component.ts @@ -58,8 +58,8 @@ export interface GuardSummary { styles: [` .witness-path { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; } @@ -73,7 +73,7 @@ export interface GuardSummary { .witness-path__label { font-size: 0.75rem; font-weight: 600; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .witness-path__deterministic { @@ -97,11 +97,11 @@ export interface GuardSummary { display: block; padding: 0.5rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.75rem; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/Web/StellaOps.Web/src/app/shared/overlays/evidence-packet-drawer/evidence-packet-drawer.component.ts b/src/Web/StellaOps.Web/src/app/shared/overlays/evidence-packet-drawer/evidence-packet-drawer.component.ts index 0ca06099a..5f9c5913c 100644 --- a/src/Web/StellaOps.Web/src/app/shared/overlays/evidence-packet-drawer/evidence-packet-drawer.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/overlays/evidence-packet-drawer/evidence-packet-drawer.component.ts @@ -309,8 +309,8 @@ export interface EvidenceContentItem { align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--color-border-primary, #e2e8f0); - background: var(--color-surface-secondary, #f8fafc); + border-bottom: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); + background: var(--color-surface-secondary, #FFFCF5); } .drawer__title-row { @@ -323,7 +323,7 @@ export interface EvidenceContentItem { margin: 0; font-size: 1.125rem; font-weight: 600; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } .drawer__badges { @@ -363,14 +363,14 @@ export interface EvidenceContentItem { background: none; border: none; border-radius: 6px; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); cursor: pointer; transition: all 0.15s ease; } .drawer__close:hover { - background: var(--color-surface-tertiary, #f1f5f9); - color: var(--color-text-primary, #1e293b); + background: var(--color-surface-tertiary, #FFF9ED); + color: var(--color-text-primary, #3D2E0A); } .drawer__body { @@ -409,7 +409,7 @@ export interface EvidenceContentItem { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .section__header .section__title { @@ -443,12 +443,12 @@ export interface EvidenceContentItem { .summary-label { font-size: 0.75rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .summary-value { font-size: 0.875rem; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); display: flex; align-items: center; gap: 0.5rem; @@ -473,14 +473,14 @@ export interface EvidenceContentItem { padding: 0.25rem; background: none; border: none; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); cursor: pointer; border-radius: 4px; } .copy-btn:hover { - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-primary, #1e293b); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-primary, #3D2E0A); } .type-badge { @@ -510,13 +510,13 @@ export interface EvidenceContentItem { align-items: center; gap: 0.75rem; padding: 0.625rem; - background: var(--color-surface-secondary, #f8fafc); + background: var(--color-surface-secondary, #FFFCF5); border-radius: 6px; } .content-item__icon { flex-shrink: 0; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .content-item__info { @@ -530,7 +530,7 @@ export interface EvidenceContentItem { .content-item__name { font-size: 0.8125rem; font-weight: 500; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -538,15 +538,15 @@ export interface EvidenceContentItem { .content-item__meta { font-size: 0.6875rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); } .content-item__digest { flex-shrink: 0; font-size: 0.6875rem; font-family: ui-monospace, monospace; - color: var(--color-text-secondary, #64748b); - background: var(--color-surface-tertiary, #f1f5f9); + color: var(--color-text-secondary, #6B5A2E); + background: var(--color-surface-tertiary, #FFF9ED); padding: 0.125rem 0.375rem; border-radius: 4px; } @@ -589,8 +589,8 @@ export interface EvidenceContentItem { } .verification-result--neutral { - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-secondary, #64748b); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-secondary, #6B5A2E); } .drawer__footer { @@ -598,8 +598,8 @@ export interface EvidenceContentItem { align-items: center; justify-content: space-between; padding: 1rem 1.5rem; - border-top: 1px solid var(--color-border-primary, #e2e8f0); - background: var(--color-surface-secondary, #f8fafc); + border-top: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); + background: var(--color-surface-secondary, #FFFCF5); } .drawer__footer-actions { @@ -623,7 +623,7 @@ export interface EvidenceContentItem { .btn--primary { background: var(--color-brand-600, #2563eb); - color: white; + color: #1C1200; } .btn--primary:hover { @@ -632,12 +632,12 @@ export interface EvidenceContentItem { .btn--secondary { background: white; - color: var(--color-text-primary, #1e293b); - border: 1px solid var(--color-border-primary, #e2e8f0); + color: var(--color-text-primary, #3D2E0A); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); } .btn--secondary:hover { - background: var(--color-surface-secondary, #f8fafc); + background: var(--color-surface-secondary, #FFFCF5); } `], }) diff --git a/src/Web/StellaOps.Web/src/app/shared/overlays/finding-detail-drawer/finding-detail-drawer.component.ts b/src/Web/StellaOps.Web/src/app/shared/overlays/finding-detail-drawer/finding-detail-drawer.component.ts index d161f737e..e51f7efa7 100644 --- a/src/Web/StellaOps.Web/src/app/shared/overlays/finding-detail-drawer/finding-detail-drawer.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/overlays/finding-detail-drawer/finding-detail-drawer.component.ts @@ -274,7 +274,7 @@ export interface AppliedExceptioni { .drawer__header { padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); position: relative; } @@ -296,7 +296,7 @@ export interface AppliedExceptioni { .drawer__subtitle { margin: 0; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .drawer__close { @@ -307,13 +307,13 @@ export interface AppliedExceptioni { border: none; padding: 0.5rem; cursor: pointer; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); border-radius: 4px; transition: background-color 0.15s; } .drawer__close:hover { - background: var(--surface-hover, #f1f5f9); + background: var(--surface-hover, #FFF9ED); } .severity-badge { @@ -345,7 +345,7 @@ export interface AppliedExceptioni { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .summary-grid { @@ -364,7 +364,7 @@ export interface AppliedExceptioni { .summary-label { font-size: 0.625rem; text-transform: uppercase; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } .summary-value { @@ -381,7 +381,7 @@ export interface AppliedExceptioni { margin: 0; font-size: 0.8125rem; line-height: 1.5; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } /* Reachability styles */ @@ -407,11 +407,11 @@ export interface AppliedExceptioni { .reachability-icon { font-size: 1.25rem; } .reachability-info { display: flex; flex-direction: column; gap: 0.25rem; } .reachability-state { font-weight: 600; font-size: 0.875rem; } - .reachability-confidence { font-size: 0.75rem; color: var(--text-color-secondary, #64748b); } + .reachability-confidence { font-size: 0.75rem; color: var(--text-color-secondary, #6B5A2E); } .witness-preview { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; } @@ -419,7 +419,7 @@ export interface AppliedExceptioni { display: block; font-size: 0.625rem; text-transform: uppercase; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); margin-bottom: 0.5rem; } @@ -434,12 +434,12 @@ export interface AppliedExceptioni { font-size: 0.625rem; padding: 0.25rem 0.5rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; } .witness-arrow { - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); font-size: 0.75rem; } @@ -474,7 +474,7 @@ export interface AppliedExceptioni { .vex-justification { margin: 0; font-size: 0.8125rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); font-style: italic; } @@ -487,7 +487,7 @@ export interface AppliedExceptioni { .exception-item { padding: 0.75rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); border-radius: 6px; border-left: 3px solid var(--primary-color, #3b82f6); } @@ -513,7 +513,7 @@ export interface AppliedExceptioni { .exception-expiry { font-size: 0.625rem; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } .exception-reason { @@ -523,7 +523,7 @@ export interface AppliedExceptioni { .exception-granted { font-size: 0.625rem; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } /* Impacts styles */ @@ -538,7 +538,7 @@ export interface AppliedExceptioni { justify-content: space-between; align-items: center; padding: 0.5rem 0; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .impact-item:last-child { @@ -565,7 +565,7 @@ export interface AppliedExceptioni { .impact-env { font-size: 0.75rem; padding: 0.125rem 0.375rem; - background: var(--surface-ground, #f1f5f9); + background: var(--surface-ground, #FFF9ED); border-radius: 4px; } @@ -594,7 +594,7 @@ export interface AppliedExceptioni { .no-data { margin: 0; font-size: 0.875rem; - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); font-style: italic; } @@ -603,7 +603,7 @@ export interface AppliedExceptioni { display: flex; gap: 0.75rem; padding: 1rem 1.5rem; - border-top: 1px solid var(--surface-border, #e2e8f0); + border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .btn { @@ -626,7 +626,7 @@ export interface AppliedExceptioni { .btn--primary { background: var(--primary-color, #3b82f6); - color: white; + color: #1C1200; border: none; } @@ -635,30 +635,30 @@ export interface AppliedExceptioni { } .btn--secondary { - background: var(--surface-ground, #f8fafc); - border: 1px solid var(--surface-border, #e2e8f0); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFFCF5); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); + color: var(--text-color, #3D2E0A); } .btn--secondary:hover:not(:disabled) { - background: var(--surface-hover, #f1f5f9); + background: var(--surface-hover, #FFF9ED); } /* Dark mode */ @media (prefers-color-scheme: dark) { .drawer { - background: var(--surface-card-dark, #1e293b); + background: var(--surface-card-dark, #3D2E0A); } .drawer__header { - border-color: var(--surface-border-dark, #334155); + border-color: var(--surface-border-dark, #3D2E0A); } .drawer__title, .summary-value, .reachability-state, .exception-reason { - color: var(--text-color-dark, #f1f5f9); + color: var(--text-color-dark, #FFF9ED); } .drawer__subtitle, @@ -670,36 +670,36 @@ export interface AppliedExceptioni { .exception-expiry, .exception-granted, .no-data { - color: var(--text-color-secondary-dark, #94a3b8); + color: var(--text-color-secondary-dark, #D4C9A8); } .witness-preview, .exception-item { - background: var(--surface-ground-dark, #0f172a); + background: var(--surface-ground-dark, #1C1200); } .witness-node { - background: var(--surface-card-dark, #1e293b); - border-color: var(--surface-border-dark, #334155); + background: var(--surface-card-dark, #3D2E0A); + border-color: var(--surface-border-dark, #3D2E0A); } .impact-env { - background: var(--surface-ground-dark, #334155); - color: var(--text-color-dark, #f1f5f9); + background: var(--surface-ground-dark, #3D2E0A); + color: var(--text-color-dark, #FFF9ED); } .drawer__footer { - border-color: var(--surface-border-dark, #334155); + border-color: var(--surface-border-dark, #3D2E0A); } .btn--secondary { - background: var(--surface-ground-dark, #0f172a); - border-color: var(--surface-border-dark, #334155); - color: var(--text-color-dark, #f1f5f9); + background: var(--surface-ground-dark, #1C1200); + border-color: var(--surface-border-dark, #3D2E0A); + color: var(--text-color-dark, #FFF9ED); } .btn--secondary:hover:not(:disabled) { - background: var(--surface-hover-dark, #334155); + background: var(--surface-hover-dark, #3D2E0A); } } `] diff --git a/src/Web/StellaOps.Web/src/app/shared/services/graph-export.service.ts b/src/Web/StellaOps.Web/src/app/shared/services/graph-export.service.ts index 45aa6af99..e7d195080 100644 --- a/src/Web/StellaOps.Web/src/app/shared/services/graph-export.service.ts +++ b/src/Web/StellaOps.Web/src/app/shared/services/graph-export.service.ts @@ -39,7 +39,7 @@ export class GraphExportService { scale: 1, includeLegend: true, includeMetadata: true, - backgroundColor: '#ffffff', + backgroundcolor: '#1C1200', ...options, }; diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/copy-to-clipboard/copy-to-clipboard.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/copy-to-clipboard/copy-to-clipboard.component.ts index 5ed6e9aa7..b8d859682 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/copy-to-clipboard/copy-to-clipboard.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/copy-to-clipboard/copy-to-clipboard.component.ts @@ -41,16 +41,16 @@ import { CommonModule } from '@angular/common'; justify-content: center; padding: 0.375rem; background: transparent; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); cursor: pointer; transition: all 0.15s; } .copy-btn:hover { - background: var(--surface-ground, #f8fafc); - color: var(--text-color, #1e293b); + background: var(--surface-ground, #FFFCF5); + color: var(--text-color, #3D2E0A); } .copy-btn--copied { diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/empty-state/empty-state.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/empty-state/empty-state.component.ts index 96685b9a5..2329f73af 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/empty-state/empty-state.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/empty-state/empty-state.component.ts @@ -68,7 +68,7 @@ import { CommonModule } from '@angular/common'; } .empty-state__icon { - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); margin-bottom: 1rem; } @@ -76,13 +76,13 @@ import { CommonModule } from '@angular/common'; margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .empty-state__description { margin: 0 0 1.5rem; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); max-width: 400px; } diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts index d362930ff..6dae45e05 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/filter-bar/filter-bar.component.ts @@ -83,7 +83,7 @@ export interface ActiveFilter { gap: 0.75rem; padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; margin-bottom: 1rem; } @@ -99,16 +99,16 @@ export interface ActiveFilter { left: 0.75rem; top: 50%; transform: translateY(-50%); - color: var(--text-color-secondary, #94a3b8); + color: var(--text-color-secondary, #D4C9A8); } .filter-bar__search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); } .filter-bar__search-input:focus { @@ -125,13 +125,13 @@ export interface ActiveFilter { .filter-bar__select { padding: 0.5rem 2rem 0.5rem 0.75rem; - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 6px; font-size: 0.875rem; - background: var(--surface-ground, #f8fafc); + background: var(--surface-ground, #FFFCF5); cursor: pointer; appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5A2E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; } @@ -142,7 +142,7 @@ export interface ActiveFilter { gap: 0.5rem; width: 100%; padding-top: 0.5rem; - border-top: 1px solid var(--surface-border, #e2e8f0); + border-top: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); } .filter-bar__chip { diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/inline-code/inline-code.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/inline-code/inline-code.component.ts index 63fa6e63e..ac3cc61e1 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/inline-code/inline-code.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/inline-code/inline-code.component.ts @@ -17,12 +17,12 @@ import { CommonModule } from '@angular/common'; styles: [` .inline-code { padding: 0.125rem 0.375rem; - background: var(--surface-ground, #f1f5f9); - border: 1px solid var(--surface-border, #e2e8f0); + background: var(--surface-ground, #FFF9ED); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875em; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } `] }) diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/metric-card/metric-card.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/metric-card/metric-card.component.ts index c39b13273..96710b2b7 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/metric-card/metric-card.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/metric-card/metric-card.component.ts @@ -37,7 +37,7 @@ import { CommonModule } from '@angular/common'; .metric-card { padding: 1rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 8px; } @@ -51,7 +51,7 @@ import { CommonModule } from '@angular/common'; .metric-card__label { font-size: 0.75rem; font-weight: 500; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); text-transform: uppercase; letter-spacing: 0.025em; } @@ -76,14 +76,14 @@ import { CommonModule } from '@angular/common'; .metric-card__value { font-size: 2rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); line-height: 1.2; } .metric-card__subtitle { margin-top: 0.25rem; font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } `] }) diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/page-header/page-header.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/page-header/page-header.component.ts index 1e8b7764a..c69ae7f73 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/page-header/page-header.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/page-header/page-header.component.ts @@ -44,13 +44,13 @@ import { CommonModule } from '@angular/common'; margin: 0 0 0.375rem; font-size: 1.5rem; font-weight: 600; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .page-header__subtitle { margin: 0; font-size: 0.875rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .page-header__actions { diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/split-pane/split-pane.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/split-pane/split-pane.component.ts index 3fd9cd81e..136aafb98 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/split-pane/split-pane.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/split-pane/split-pane.component.ts @@ -40,7 +40,7 @@ import { CommonModule } from '@angular/common'; .split-pane__left { flex-shrink: 0; - border-right: 1px solid var(--surface-border, #e2e8f0); + border-right: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); overflow: auto; transition: width 0.2s, margin-left 0.2s; } @@ -58,17 +58,17 @@ import { CommonModule } from '@angular/common'; margin-left: -0.75rem; margin-right: -0.75rem; background: var(--surface-card, #ffffff); - border: 1px solid var(--surface-border, #e2e8f0); + border: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .split-pane__toggle:hover { - background: var(--surface-hover, #f1f5f9); + background: var(--surface-hover, #FFF9ED); } .split-pane__right { diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts index 147dc6464..6f0eae0ab 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/tabbed-nav/tabbed-nav.component.ts @@ -63,7 +63,7 @@ export interface TabItem { .tabbed-nav { display: flex; gap: 0.25rem; - border-bottom: 1px solid var(--surface-border, #e2e8f0); + border-bottom: 1px solid var(--surface-border, rgba(212, 201, 168, 0.3)); margin-bottom: 1rem; } @@ -78,14 +78,14 @@ export interface TabItem { margin-bottom: -1px; font-size: 0.875rem; font-weight: 500; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); cursor: pointer; transition: color 0.15s, border-color 0.15s; text-decoration: none; } .tabbed-nav__tab:hover:not(.tabbed-nav__tab--disabled) { - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .tabbed-nav__tab--active { diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/timeline-list/timeline-list.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/timeline-list/timeline-list.component.ts index 04fbe007c..d08089ec5 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/timeline-list/timeline-list.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/timeline-list/timeline-list.component.ts @@ -68,7 +68,7 @@ export interface TimelineEvent { top: 1.25rem; bottom: 0; width: 2px; - background: var(--surface-border, #e2e8f0); + background: var(--surface-border, rgba(212, 201, 168, 0.3)); } .timeline__item--last::before { @@ -127,25 +127,25 @@ export interface TimelineEvent { .timeline__title { font-size: 0.875rem; font-weight: 500; - color: var(--text-color, #1e293b); + color: var(--text-color, #3D2E0A); } .timeline__time { font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); white-space: nowrap; } .timeline__description { margin: 0.25rem 0 0; font-size: 0.75rem; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } .timeline__empty { padding: 2rem; text-align: center; - color: var(--text-color-secondary, #64748b); + color: var(--text-color-secondary, #6B5A2E); } `] }) diff --git a/src/Web/StellaOps.Web/src/app/shared/ui/witness-viewer/witness-viewer.component.ts b/src/Web/StellaOps.Web/src/app/shared/ui/witness-viewer/witness-viewer.component.ts index 8bcd8e815..e40644cd8 100644 --- a/src/Web/StellaOps.Web/src/app/shared/ui/witness-viewer/witness-viewer.component.ts +++ b/src/Web/StellaOps.Web/src/app/shared/ui/witness-viewer/witness-viewer.component.ts @@ -305,7 +305,7 @@ interface WitnessEvidence { .btn--primary { background: var(--primary-color, #3b82f6); - color: white; + color: #1C1200; border: none; } diff --git a/src/Web/StellaOps.Web/src/styles/_forms.scss b/src/Web/StellaOps.Web/src/styles/_forms.scss index bed168b72..af45b9555 100644 --- a/src/Web/StellaOps.Web/src/styles/_forms.scss +++ b/src/Web/StellaOps.Web/src/styles/_forms.scss @@ -144,7 +144,7 @@ textarea { select { appearance: none; padding-right: 2.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5A2E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px; diff --git a/src/Web/StellaOps.Web/src/styles/_mixins.scss b/src/Web/StellaOps.Web/src/styles/_mixins.scss index 740e1060c..51d2a881a 100644 --- a/src/Web/StellaOps.Web/src/styles/_mixins.scss +++ b/src/Web/StellaOps.Web/src/styles/_mixins.scss @@ -81,7 +81,7 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; padding: $padding; background: var(--color-surface-primary, #ffffff); border-radius: $radius-lg; - border: 1px solid var(--color-border-primary, #e2e8f0); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); box-shadow: var(--shadow-md, 0 1px 3px rgba(0, 0, 0, 0.1)); } @@ -111,7 +111,7 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; /// Base input styling @mixin input-base { padding: $spacing-sm $spacing-md; - border: 1px solid var(--color-border-primary, #e2e8f0); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); border-radius: $radius-md; font-size: 0.875rem; background: var(--color-surface-primary, #ffffff); @@ -124,7 +124,7 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; } &::placeholder { - color: var(--color-text-muted, #94a3b8); + color: var(--color-text-muted, #D4C9A8); } } @@ -151,7 +151,7 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; label, &__label { font-size: 0.75rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); font-weight: 500; } } @@ -164,24 +164,24 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; margin: 0; font-size: 1.75rem; font-weight: 600; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } @mixin heading-md { margin: 0; font-size: 1.25rem; font-weight: 600; - color: var(--color-text-primary, #1e293b); + color: var(--color-text-primary, #3D2E0A); } @mixin text-secondary { - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); font-size: 0.875rem; } @mixin text-label { font-size: 0.75rem; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); text-transform: uppercase; letter-spacing: 0.05em; } @@ -321,23 +321,23 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; @mixin btn-secondary { @include btn-base; - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-primary, #1e293b); - border: 1px solid var(--color-border-primary, #e2e8f0); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-primary, #3D2E0A); + border: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); &:hover:not(:disabled) { - background: var(--color-surface-tertiary, #f1f5f9); + background: var(--color-surface-tertiary, #FFF9ED); } } @mixin btn-ghost { @include btn-base; background: transparent; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); &:hover:not(:disabled) { - background: var(--color-surface-secondary, #f8fafc); - color: var(--color-text-primary, #1e293b); + background: var(--color-surface-secondary, #FFFCF5); + color: var(--color-text-primary, #3D2E0A); } } @@ -360,23 +360,23 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; } @mixin table-header { - background: var(--color-surface-secondary, #f8fafc); + background: var(--color-surface-secondary, #FFFCF5); font-size: 0.75rem; font-weight: 600; - color: var(--color-text-secondary, #64748b); + color: var(--color-text-secondary, #6B5A2E); text-transform: uppercase; letter-spacing: 0.05em; } @mixin table-cell { padding: $spacing-md; - border-bottom: 1px solid var(--color-border-primary, #e2e8f0); + border-bottom: 1px solid var(--color-border-primary, rgba(212, 201, 168, 0.3)); font-size: 0.875rem; } @mixin table-row-hover { &:hover { - background: var(--color-surface-secondary, #f8fafc); + background: var(--color-surface-secondary, #FFFCF5); } } @@ -395,11 +395,11 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; } &::-webkit-scrollbar-thumb { - background: var(--color-scrollbar-thumb, #e2e8f0); + background: var(--color-scrollbar-thumb, rgba(212, 201, 168, 0.3)); border-radius: $width; &:hover { - background: var(--color-scrollbar-thumb-hover, #94a3b8); + background: var(--color-scrollbar-thumb-hover, #D4C9A8); } } } @@ -433,9 +433,9 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; @mixin skeleton { background: linear-gradient( 90deg, - var(--color-surface-secondary, #f8fafc) 25%, - var(--color-border-primary, #e2e8f0) 50%, - var(--color-surface-secondary, #f8fafc) 75% + var(--color-surface-secondary, #FFFCF5) 25%, + var(--color-border-primary, rgba(212, 201, 168, 0.3)) 50%, + var(--color-surface-secondary, #FFFCF5) 75% ); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; @@ -457,6 +457,6 @@ $shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1) !default; align-items: center; justify-content: center; padding: $spacing-xl * 2; - color: var(--color-text-muted, #94a3b8); + color: var(--color-text-muted, #D4C9A8); text-align: center; } diff --git a/src/Web/StellaOps.Web/src/styles/tokens/_colors.scss b/src/Web/StellaOps.Web/src/styles/tokens/_colors.scss index c00b11990..2604f9b29 100644 --- a/src/Web/StellaOps.Web/src/styles/tokens/_colors.scss +++ b/src/Web/StellaOps.Web/src/styles/tokens/_colors.scss @@ -28,7 +28,8 @@ // --------------------------------------------------------------------------- // Text Colors // --------------------------------------------------------------------------- - --color-text-primary: #1C1200; + --color-text-primary: #3D2E0A; + --color-text-heading: #1C1200; --color-text-secondary: #6B5A2E; --color-text-muted: #D4C9A8; --color-text-inverse: #F5F0E6; @@ -51,6 +52,10 @@ --color-brand-secondary: #D4920A; --color-brand-light: rgba(245, 166, 35, 0.1); --color-brand-muted: rgba(245, 166, 35, 0.15); + --color-brand-soft: #FEF3E2; + --color-surface-subtle: #FEFBF3; + --color-border-emphasis: rgba(245, 166, 35, 0.4); + --color-card-heading: #977813; // --------------------------------------------------------------------------- // Severity Colors (consistent across themes) @@ -120,11 +125,11 @@ // --------------------------------------------------------------------------- // Shadows // --------------------------------------------------------------------------- - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1); - --shadow-dropdown: 0 12px 28px rgba(0, 0, 0, 0.3); + --shadow-sm: 0 1px 2px rgba(28, 18, 0, 0.08), 0 1px 1px rgba(61, 46, 10, 0.04); + --shadow-md: 0 4px 8px rgba(28, 18, 0, 0.08), 0 2px 4px rgba(61, 46, 10, 0.04); + --shadow-lg: 0 8px 24px rgba(28, 18, 0, 0.08), 0 4px 8px rgba(61, 46, 10, 0.04); + --shadow-xl: 0 16px 48px rgba(28, 18, 0, 0.08), 0 8px 16px rgba(61, 46, 10, 0.04); + --shadow-dropdown: 0 12px 28px rgba(28, 18, 0, 0.25); // Brand shadows --shadow-brand-sm: 0 2px 8px rgba(245, 166, 35, 0.15); @@ -135,8 +140,8 @@ // Scrollbar // --------------------------------------------------------------------------- --color-scrollbar-track: transparent; - --color-scrollbar-thumb: #cbd5e1; - --color-scrollbar-thumb-hover: #94a3b8; + --color-scrollbar-thumb: #D4C9A8; + --color-scrollbar-thumb-hover: #9A8F78; // --------------------------------------------------------------------------- // Skeleton Loading @@ -278,6 +283,11 @@ --color-brand-secondary: #FFD369; --color-brand-light: rgba(245, 184, 74, 0.12); --color-brand-muted: rgba(245, 184, 74, 0.2); + --color-surface-subtle: #0A0F1A; + --color-brand-soft: rgba(245, 184, 74, 0.12); + --color-border-emphasis: rgba(245, 184, 74, 0.3); + --color-card-heading: #d5a00f; + --color-text-heading: #F5F0E6; // --------------------------------------------------------------------------- // Severity Colors (adjusted backgrounds for dark mode) @@ -469,6 +479,11 @@ --color-brand-secondary: #FFD369; --color-brand-light: rgba(245, 184, 74, 0.12); --color-brand-muted: rgba(245, 184, 74, 0.2); + --color-surface-subtle: #0A0F1A; + --color-brand-soft: rgba(245, 184, 74, 0.12); + --color-border-emphasis: rgba(245, 184, 74, 0.3); + --color-card-heading: #d5a00f; + --color-text-heading: #F5F0E6; // Status backgrounds --color-status-success-bg: rgba(34, 197, 94, 0.15);