graph-explorer/style.css at viewer · jpablo/graph-explorer · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@import "tailwindcss";
/* Only the built-ins the theme selector actually offers. `all` compiled CSS for
 * 35 themes, of which the menu offered 35 and most were a slightly different
 * pastel; the curated set lives in ThemeSelect.daisyThemes and these two lists
 * must agree — a name here that is missing there is dead CSS, a name there that
 * is missing here selects but does not paint. The app-native themes
 * (workbench / drafting / signal) are declared below via `daisyui/theme` and
 * are not affected by this list. */
@plugin "daisyui" {
    themes: light, dark, cupcake, nord, retro, night, synthwave;
}

/* ── App-native themes ─────────────────────────────────────────────────────
 * The three adoptable directions from the July visual-direction study
 * ("Graph Explorer — five visual directions"), expressed as daisyUI themes.
 * Chrome only: palette, radii, border weight. Each theme's beyond-token
 * treatments (canvas surface, chrome typeface, hard shadows) live in
 * style.scss under the matching [data-theme] scope; the diagram's own look
 * (node ink, drafting typography) is a later, separate layer.
 */

/* 03 · Workbench — dark chrome, the canvas is the only lit object.
 * Amber marks the single active thing; mono chrome type via style.scss. */
@plugin "daisyui/theme" {
    name: "workbench";
    default: false;
    prefersdark: false;
    color-scheme: dark;
    --color-base-100: #1d2021;
    --color-base-200: #191b1c;
    --color-base-300: #2f3436;
    --color-base-content: #e6e4df;
    --color-primary: #d9a441;
    --color-primary-content: #191b1c;
    --color-secondary: #7fb2d9;
    --color-secondary-content: #191b1c;
    --color-accent: #8fbf7f;
    --color-accent-content: #191b1c;
    --color-neutral: #242829;
    --color-neutral-content: #e6e4df;
    --color-info: #7fb2d9;
    --color-info-content: #191b1c;
    --color-success: #8fbf7f;
    --color-success-content: #191b1c;
    --color-warning: #d9a441;
    --color-warning-content: #191b1c;
    --color-error: #d9776b;
    --color-error-content: #191b1c;
    --radius-selector: 0.125rem;
    --radius-field: 0.125rem;
    --radius-box: 0.125rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

/* 02 · Drafting table — vellum surfaces, cyan drafting ink, zero radii.
 * The gridded canvas and condensed labels ride style.scss; the in-diagram
 * "ink on paper" nodes are the deferred half of this direction. */
@plugin "daisyui/theme" {
    name: "drafting";
    /* The app's default theme: what an install with nothing stored lands on, and
     * what an unrecognized stored theme falls back to (ThemeSelect.defaultTheme,
     * index.html's data-theme seed). Marked here too so the CSS default matches,
     * rather than daisyUI falling back to `light` if data-theme were ever absent. */
    default: true;
    prefersdark: false;
    color-scheme: light;
    --color-base-100: #f7f8f6;
    --color-base-200: #f2f4f2;
    --color-base-300: #c3ccc6;
    --color-base-content: #1d3640;
    --color-primary: #0b5e7d;
    --color-primary-content: #eaf3f7;
    --color-secondary: #5c7480;
    --color-secondary-content: #f7f8f6;
    --color-accent: #8a5a12;
    --color-accent-content: #f7f8f6;
    --color-neutral: #1d3640;
    --color-neutral-content: #f2f4f2;
    --color-info: #0b5e7d;
    --color-info-content: #eaf3f7;
    --color-success: #4a6b2f;
    --color-success-content: #f7f8f6;
    --color-warning: #8a5a12;
    --color-warning-content: #f7f8f6;
    --color-error: #a8322a;
    --color-error-content: #f7f8f6;
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

/* 05 · Signal — flat primaries, 2px black keylines, state unmissable.
 * Hard offset shadows and the geometric sans are style.scss treatments. */
@plugin "daisyui/theme" {
    name: "signal";
    default: false;
    prefersdark: false;
    color-scheme: light;
    --color-base-100: #ffffff;
    --color-base-200: #f5f2e8;
    --color-base-300: #e2ded0;
    --color-base-content: #111111;
    --color-primary: #1f4fd8;
    --color-primary-content: #ffffff;
    --color-secondary: #e4322b;
    --color-secondary-content: #ffffff;
    --color-accent: #f5c518;
    --color-accent-content: #111111;
    --color-neutral: #111111;
    --color-neutral-content: #ffffff;
    --color-info: #1f4fd8;
    --color-info-content: #ffffff;
    --color-success: #0f7b3a;
    --color-success-content: #ffffff;
    --color-warning: #f5c518;
    --color-warning-content: #111111;
    --color-error: #e4322b;
    --color-error-content: #ffffff;
    --radius-selector: 0rem;
    --radius-field: 0rem;
    --radius-box: 0rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 2px;
    --depth: 0;
    --noise: 0;
}