davide
88cba13e77
Rebuilt the purple color palette from scratch using a 4-level luminance scale (~3-5x jump per level: #06000f → #110028 → #1d0845 → #3a158a), matching the approach of high-contrast Bootswatch dark themes (Darkly, Cyborg). All contrast ratios are now WCAG-compliant: body text 16:1, card header white text 8.5:1, primary button 5.5:1. Chart axis improvements: Y-axis large numbers abbreviated (1.4M, 568K), X-axis max 6 ticks at 30° rotation, Inter font throughout, dark-glass tooltips, network_charts settings added to settings.json.tmpl with transparent canvas background
163 lines
9.5 KiB
SCSS
163 lines
9.5 KiB
SCSS
// BitcoinPurple Theme
|
|
// Contrast-aware dark palette inspired by Darkly + Cyborg structure
|
|
//
|
|
// Luminance scale (each level ~3-5x the previous):
|
|
// $gray-900 #06000f 0.1% body background
|
|
// $gray-800 #110028 0.6% navbar / sidebar
|
|
// $gray-700 #1d0845 2.4% card body
|
|
// $gray-600 #3a158a 7.3% card header / table thead
|
|
// $gray-500 #7c3aed 18% borders / interactive
|
|
// $gray-400 #9d6ae8 31% secondary interactive
|
|
// $gray-300 #c084fc 47% links / accent labels
|
|
// $gray-200 #ddb8ff 63% secondary text
|
|
// $gray-100 #f0e8ff 79% near-white text
|
|
//
|
|
// Key contrast ratios:
|
|
// body text (#ece0ff) on bg (#06000f) → 16:1 ✓ AAA
|
|
// white on card header (#3a158a) → 8.5:1 ✓ AAA
|
|
// white on primary (#9333ea) → 5.5:1 ✓ AA
|
|
// link (#c084fc) on bg (#06000f) → 10:1 ✓ AAA
|
|
// link (#c084fc) on card (#1d0845) → 7:1 ✓ AA
|
|
|
|
@use "sass:color";
|
|
|
|
$theme: "purple" !default;
|
|
|
|
// ── Color scale ───────────────────────────────────────────────────────────────
|
|
$white: #fff !default;
|
|
$gray-100: #f0e8ff !default;
|
|
$gray-200: #ddb8ff !default;
|
|
$gray-300: #c084fc !default;
|
|
$gray-400: #9d6ae8 !default;
|
|
$gray-500: #7c3aed !default;
|
|
$gray-600: #3a158a !default;
|
|
$gray-700: #1d0845 !default;
|
|
$gray-800: #110028 !default;
|
|
$gray-900: #06000f !default;
|
|
$black: #020008 !default;
|
|
|
|
// ── Named colors ──────────────────────────────────────────────────────────────
|
|
$blue: #60a5fa !default;
|
|
$indigo: #818cf8 !default;
|
|
$purple: #c084fc !default;
|
|
$pink: #f0abfc !default;
|
|
$red: #f87171 !default;
|
|
$orange: #fb923c !default;
|
|
$yellow: #fbbf24 !default;
|
|
$green: #4ade80 !default;
|
|
$teal: #2dd4bf !default;
|
|
$cyan: #22d3ee !default;
|
|
|
|
// ── Theme colors ──────────────────────────────────────────────────────────────
|
|
// Primary: #9333ea → white contrast 5.5:1 (AA ✓)
|
|
$primary: #9333ea !default;
|
|
$secondary: $gray-600 !default;
|
|
$success: $green !default;
|
|
$info: $blue !default;
|
|
$warning: $yellow !default;
|
|
$danger: $red !default;
|
|
$light: $gray-200 !default;
|
|
$dark: $gray-900 !default;
|
|
|
|
$min-contrast-ratio: 2.5 !default;
|
|
|
|
// ── Body ──────────────────────────────────────────────────────────────────────
|
|
$body-bg: $gray-900 !default;
|
|
$body-color: #ece0ff !default; // 16:1 contrast on body-bg
|
|
|
|
// ── Links ─────────────────────────────────────────────────────────────────────
|
|
$link-color: $gray-300 !default;
|
|
$link-hover-color: $white !default;
|
|
$link-decoration: none !default;
|
|
$link-hover-decoration: underline !default;
|
|
|
|
// ── Typography ────────────────────────────────────────────────────────────────
|
|
$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
|
$text-muted: $gray-400 !default;
|
|
|
|
// ── Tables ────────────────────────────────────────────────────────────────────
|
|
$table-color: $body-color !default;
|
|
$table-border-color: rgba($gray-500, .35) !default;
|
|
$table-bg-scale: 0 !default;
|
|
|
|
// ── Forms ─────────────────────────────────────────────────────────────────────
|
|
$input-bg: $gray-800 !default;
|
|
$input-color: $gray-100 !default;
|
|
$input-border-color: rgba($gray-500, .6) !default;
|
|
$input-placeholder-color: rgba($gray-300, .6) !default;
|
|
$input-group-addon-color: $gray-200 !default;
|
|
$input-group-addon-bg: $gray-600 !default;
|
|
|
|
$form-check-input-bg: $gray-800 !default;
|
|
$form-check-input-border: 1px solid rgba($gray-500, .6) !default;
|
|
|
|
// ── Nav ───────────────────────────────────────────────────────────────────────
|
|
$nav-link-padding-x: 1.2rem !default;
|
|
$nav-link-disabled-color: $gray-500 !default;
|
|
$nav-tabs-border-color: $gray-500 !default;
|
|
$nav-tabs-link-active-color:$white !default;
|
|
|
|
// ── Navbar ────────────────────────────────────────────────────────────────────
|
|
$navbar-dark-color: rgba($white, .7) !default;
|
|
$navbar-dark-hover-color: $white !default;
|
|
|
|
// ── Dropdowns ────────────────────────────────────────────────────────────────
|
|
$dropdown-bg: $gray-700 !default;
|
|
$dropdown-border-color: $gray-500 !default;
|
|
$dropdown-divider-bg: $gray-600 !default;
|
|
$dropdown-link-color: $gray-200 !default;
|
|
$dropdown-link-hover-color: $white !default;
|
|
$dropdown-link-hover-bg: $primary !default;
|
|
|
|
// ── Pagination ────────────────────────────────────────────────────────────────
|
|
$pagination-color: $white !default;
|
|
$pagination-bg: $gray-700 !default;
|
|
$pagination-border-width: 1px !default;
|
|
$pagination-border-color: rgba($gray-500, .55) !default;
|
|
$pagination-hover-color: $white !default;
|
|
$pagination-hover-bg: $primary !default;
|
|
$pagination-hover-border-color: $primary !default;
|
|
$pagination-active-bg: $primary !default;
|
|
$pagination-active-border-color: $primary !default;
|
|
$pagination-disabled-color: $gray-500 !default;
|
|
$pagination-disabled-bg: rgba($gray-700, .5) !default;
|
|
$pagination-disabled-border-color:rgba($gray-500, .3) !default;
|
|
|
|
// ── Cards ─────────────────────────────────────────────────────────────────────
|
|
$card-cap-bg: $gray-600 !default;
|
|
$card-bg: $gray-700 !default;
|
|
$card-border-color: rgba($gray-500, .55) !default;
|
|
$card-cap-color: $white !default;
|
|
|
|
// ── Modals ────────────────────────────────────────────────────────────────────
|
|
$modal-content-bg: $gray-700 !default;
|
|
$modal-content-border-color: $gray-500 !default;
|
|
$modal-header-border-color: $gray-500 !default;
|
|
|
|
// ── Popovers ─────────────────────────────────────────────────────────────────
|
|
$popover-bg: $gray-700 !default;
|
|
$popover-header-bg: $gray-600 !default;
|
|
|
|
// ── Progress ─────────────────────────────────────────────────────────────────
|
|
$progress-bg: $gray-600 !default;
|
|
|
|
// ── List group ───────────────────────────────────────────────────────────────
|
|
$list-group-color: $body-color !default;
|
|
$list-group-bg: $gray-700 !default;
|
|
$list-group-border-color: $gray-500 !default;
|
|
$list-group-hover-bg: $gray-600 !default;
|
|
$list-group-action-hover-color: $white !default;
|
|
$list-group-action-active-bg: $gray-900 !default;
|
|
|
|
// ── Breadcrumbs ───────────────────────────────────────────────────────────────
|
|
$breadcrumb-padding-y: .375rem !default;
|
|
$breadcrumb-padding-x: .75rem !default;
|
|
$breadcrumb-bg: $gray-700 !default;
|
|
$breadcrumb-border-radius:.25rem !default;
|
|
|
|
// ── Misc ──────────────────────────────────────────────────────────────────────
|
|
$btn-close-color: $white !default;
|
|
$btn-close-opacity: .5 !default;
|
|
$btn-close-hover-opacity:1 !default;
|
|
$pre-color: inherit !default;
|