zebflow 0.8.5

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
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
105
106
107
108
109

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  /* Zebflow design direction: Melbourne gray-blue + signal orange. */
  --color-zeb-ink:          #1b1f24;
  --color-zeb-ink-soft:     #525d68;
  --color-zeb-ink-muted:    #8e9cad;
  --color-zeb-bg:           #e9edf3;
  --color-zeb-bg-soft:      #f4f6f9;
  --color-zeb-border:       #dce3ec;
  --color-zeb-border-strong:#cdd6e1;
  --color-zeb-grid:         #dde3eb;
  --color-zeb-dark:         #14171b;
  --color-zeb-dark-2:       #16191e;
  --color-zeb-dark-3:       #1b2026;
  --color-zeb-dark-border:  #232932;
  --color-zeb-dark-border-2:#2a313c;

  /* Brand colors */
  --color-brand-orange:     #ea5a0c;
  --color-brand-orange-ink: #d24f08;
  --color-brand-blue:       #1e66d6;
  --color-brand-blue-ink:   #035fab;
  --color-dark-menus:       #0f1115;
  --color-dark-background:  var(--color-zeb-dark);
  --color-dark-border:      var(--color-zeb-dark-border);
  --color-dark-accent1:     var(--color-brand-orange);
  --color-dark-accent2:     var(--color-brand-blue);
  --color-dark-accent3:     #7cd3a0;
  --color-dark-accent4:     #f2a33d;
  --color-dark-accent5:     #c46255;
  --color-dark-text1:       #6b7785;

  /* Fonts */
  --font-display:
    "Space Grotesk", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-sans:
    "Space Grotesk", "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-text:
    "Hanken Grotesk", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:
    "JetBrains Mono", "SFMono-Regular", "Roboto Mono", monospace;

  --radius-panel: 0.875rem;
  --rwe-nav-color: var(--color-brand-blue);

  /* Global UI component tokens — light defaults, overridden by [data-studio-theme] */
  --color-ui-bg:            #ffffff;
  --color-ui-bg-subtle:     var(--color-zeb-bg-soft);
  --color-ui-bg-muted:      var(--color-zeb-bg);
  --color-ui-border:        var(--color-zeb-border);
  --color-ui-border-subtle: var(--color-zeb-border);
  --color-ui-text:          var(--color-zeb-ink);
  --color-ui-text-soft:     var(--color-zeb-ink-soft);
  --color-ui-text-muted:    var(--color-zeb-ink-muted);
}

:root[data-theme="dark"] {
}

html {
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  accent-color: var(--color-brand-orange);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
}

::selection {
  background: var(--color-zeb-border-strong);
  color: var(--color-zeb-ink);
}

a {
  text-underline-offset: 0.16em;
}

button,
input,
textarea,
select {
  font: inherit;
}

[data-zf-surface="panel"] {
  border-radius: var(--radius-panel);
}

@keyframes zf-spin {
  to {
    transform: rotate(360deg);
  }
}