rustio-admin 0.13.0

Django Admin, but for Rust. A small, focused admin framework.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

/* ============================================================
 * rustio-admin / themes / dark
 *
 * Dark mode — soft graphite, never near-black.
 *
 * RustIO's dark theme is a calm nighttime workspace, not a hacker
 * terminal. Page bg and surfaces sit on a desaturated blue-graphite
 * scale (~hsl 218°) that lifts in 4–5% steps; depth comes from
 * layering, not shadows. No #000, no #111 — the floor is #2B313C.
 *
 * Tokens are duplicated under both `prefers-color-scheme: dark` (for
 * users who never touch the toggle) and `[data-rio-theme="dark"]`
 * (for explicit overrides) so the cascade is symmetric.
 *
 * Dark mode color tuning — three deliberate shifts vs. the light
 * palette:
 *
 *  1. Accent is lifted from `#0F8C7E` (light teal-emerald) to
 *     `#3FAA9D` (mid teal). The deep light-mode teal disappears into
 *     the graphite surface (~1.4:1 contrast); the lifted variant
 *     pops (~3.2:1) while keeping the same hue family so the brand
 *     reads identically across modes. White-on-accent stays above
 *     4.5:1 (passes WCAG AA body text).
 *
 *  2. Danger is shifted from `#F87171` (Tailwind red-400, reads
 *     pink-pastel on graphite) to `#DC4444` — a serious, saturated
 *     red that actually communicates destructive intent. White on
 *     it hits 4.7:1 (passes AA body), good enough for the solid
 *     "Yes, delete" button that uses it as background.
 *
 *  3. `text-strong` is pushed to pure `#FFFFFF` so page titles
 *     stand clearly above the `#F3F4F6` body. Without that gap
 *     the two reads as one tone.
 * ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --rio-bg:        #2B313C;
    --rio-surface:   #343B48;
    --rio-surface-2: #3B4352;
    --rio-surface-3: #444D5E;

    --rio-accent:       #3FAA9D;
    --rio-accent-hover: #5FBFB3;
    --rio-accent-rgb:   63 170 157;

    --rio-text-strong: #FFFFFF;
    --rio-text:        #F3F4F6;
    --rio-text-muted:  #D2D6DC;
    --rio-text-subtle: #B2B8C2;

    --rio-border-soft:   #404A5D;
    --rio-border:        #4F5868;
    --rio-border-strong: #626C7D;

    --rio-success: #34D399;
    --rio-warning: #FBBF24;
    --rio-danger:  #DC4444;
    --rio-success-bg: #1F3D33;
    --rio-warning-bg: #3D2F18;
    --rio-danger-bg:  #3D2226;
    --rio-info-bg:    #3A2A22;

    --rio-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --rio-shadow:    0 1px 3px rgba(0, 0, 0, 0.20),
                     0 1px 2px rgba(0, 0, 0, 0.14);
    --rio-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.32),
                     0 2px 8px  rgba(0, 0, 0, 0.18);
  }
}

html[data-rio-theme="dark"] {
  --rio-bg:        #2B313C;
  --rio-surface:   #343B48;
  --rio-surface-2: #3B4352;
  --rio-surface-3: #444D5E;

  --rio-accent:       #3FAA9D;
  --rio-accent-hover: #5FBFB3;
  --rio-accent-rgb:   63 170 157;

  --rio-text-strong: #FFFFFF;
  --rio-text:        #F3F4F6;
  --rio-text-muted:  #D2D6DC;
  --rio-text-subtle: #B2B8C2;

  --rio-border-soft:   #404A5D;
  --rio-border:        #4F5868;
  --rio-border-strong: #626C7D;

  --rio-success: #34D399;
  --rio-warning: #FBBF24;
  --rio-danger:  #DC4444;
  --rio-success-bg: #1F3D33;
  --rio-warning-bg: #3D2F18;
  --rio-danger-bg:  #3D2226;
  --rio-info-bg:    #3A2A22;

  --rio-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --rio-shadow:    0 1px 3px rgba(0, 0, 0, 0.20),
                   0 1px 2px rgba(0, 0, 0, 0.14);
  --rio-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.32),
                   0 2px 8px  rgba(0, 0, 0, 0.18);
}