@agentconsent/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs +2292 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +1047 -0
  4. package/dist/index.d.ts +1047 -0
  5. package/dist/index.js +2243 -0
  6. package/dist/index.js.map +1 -0
  7. package/package.json +74 -0
  8. package/src/theme.css +1711 -0
  9. package/src/tokens.css +145 -0
package/src/tokens.css ADDED
@@ -0,0 +1,145 @@
1
+ /**
2
+ * @agentconsent/react — design tokens
3
+ *
4
+ * Every themable value in the component library resolves to one of these
5
+ * custom properties. Override them (globally or per-subtree) to retheme;
6
+ * theme.css consumes only these variables. Namespace: --acp-*.
7
+ *
8
+ * Dark mode: automatic via prefers-color-scheme, with explicit
9
+ * [data-theme="light" | "dark"] overrides winning in both directions.
10
+ * data-theme works on any element, so a subtree (e.g. a demo frame) can
11
+ * be themed independently of the page.
12
+ */
13
+
14
+ :root,
15
+ [data-theme="light"] {
16
+ /* ── Color: neutrals ─────────────────────────────────────────── */
17
+ --acp-color-surface: #fdfdfc;
18
+ --acp-color-surface-raised: #f4f4f2;
19
+ --acp-color-surface-sunken: #ececea;
20
+ --acp-color-ink: #1a1a18;
21
+ --acp-color-ink-muted: #5f5f5a;
22
+ --acp-color-ink-faint: #6f6f69;
23
+ --acp-color-line: #d9d9d5;
24
+ --acp-color-line-strong: #b0b0aa;
25
+
26
+ /* ── Color: consent semantics ────────────────────────────────── */
27
+ /* Approve: affirmative but deliberately not celebratory green */
28
+ --acp-color-approve: #1f6f43;
29
+ --acp-color-approve-ink: #ffffff;
30
+ /* Reject / cancel: neutral, never alarming — declining is safe */
31
+ --acp-color-reject: transparent;
32
+ --acp-color-reject-ink: #1a1a18;
33
+ /* Irreversible / destructive consequence */
34
+ --acp-color-danger: #b3261e;
35
+ --acp-color-danger-ink: #ffffff;
36
+ --acp-color-danger-surface: #fceeed;
37
+ /* Untrusted content (injection flag, quoted instructions) */
38
+ --acp-color-untrusted: #8a5a00;
39
+ --acp-color-untrusted-surface: #fdf3e1;
40
+ /* Agent identity accent (who is asking) */
41
+ --acp-color-agent: #3d4f9e;
42
+ --acp-color-agent-surface: #eef0fa;
43
+ /* Focus ring */
44
+ --acp-color-focus: #2456d6;
45
+
46
+ /* ── Type ────────────────────────────────────────────────────── */
47
+ --acp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
48
+ Roboto, sans-serif;
49
+ --acp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
50
+ monospace;
51
+ --acp-text-xs: 0.75rem;
52
+ --acp-text-sm: 0.875rem;
53
+ --acp-text-base: 1rem;
54
+ --acp-text-lg: 1.125rem;
55
+ --acp-leading-tight: 1.3;
56
+ --acp-leading-normal: 1.55;
57
+ --acp-weight-normal: 400;
58
+ --acp-weight-medium: 500;
59
+ --acp-weight-semibold: 600;
60
+
61
+ /* ── Space (4px base) ────────────────────────────────────────── */
62
+ --acp-space-1: 0.25rem;
63
+ --acp-space-2: 0.5rem;
64
+ --acp-space-3: 0.75rem;
65
+ --acp-space-4: 1rem;
66
+ --acp-space-5: 1.25rem;
67
+ --acp-space-6: 1.5rem;
68
+ --acp-space-8: 2rem;
69
+
70
+ /* ── Radius ──────────────────────────────────────────────────── */
71
+ --acp-radius-sm: 4px;
72
+ --acp-radius-md: 8px;
73
+ --acp-radius-lg: 12px;
74
+
75
+ /* ── Elevation ───────────────────────────────────────────────── */
76
+ --acp-shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--acp-color-line);
77
+ --acp-shadow-modal: 0 8px 30px rgb(0 0 0 / 0.18), 0 0 0 1px var(--acp-color-line);
78
+
79
+ /* ── Motion ──────────────────────────────────────────────────── */
80
+ --acp-duration-fast: 120ms;
81
+ --acp-duration-base: 200ms;
82
+ --acp-ease: cubic-bezier(0.2, 0, 0, 1);
83
+ }
84
+
85
+ /* Dark palette, defined once and applied two ways (media + attribute) */
86
+ @media (prefers-color-scheme: dark) {
87
+ :root:not([data-theme="light"]) {
88
+ --acp-color-surface: #161615;
89
+ --acp-color-surface-raised: #1f1f1e;
90
+ --acp-color-surface-sunken: #101010;
91
+ --acp-color-ink: #ececea;
92
+ --acp-color-ink-muted: #a3a39d;
93
+ --acp-color-ink-faint: #8c8c86;
94
+ --acp-color-line: #33332f;
95
+ --acp-color-line-strong: #4d4d47;
96
+
97
+ --acp-color-approve: #37a266;
98
+ --acp-color-approve-ink: #0c1f14;
99
+ --acp-color-reject-ink: #ececea;
100
+ --acp-color-danger: #e5655e;
101
+ --acp-color-danger-ink: #260503;
102
+ --acp-color-danger-surface: #2c1513;
103
+ --acp-color-untrusted: #d9a13f;
104
+ --acp-color-untrusted-surface: #2a2011;
105
+ --acp-color-agent: #93a4e8;
106
+ --acp-color-agent-surface: #1c2136;
107
+ --acp-color-focus: #7da2f5;
108
+
109
+ --acp-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px var(--acp-color-line);
110
+ --acp-shadow-modal: 0 8px 30px rgb(0 0 0 / 0.55), 0 0 0 1px var(--acp-color-line);
111
+ }
112
+ }
113
+
114
+ [data-theme="dark"] {
115
+ --acp-color-surface: #161615;
116
+ --acp-color-surface-raised: #1f1f1e;
117
+ --acp-color-surface-sunken: #101010;
118
+ --acp-color-ink: #ececea;
119
+ --acp-color-ink-muted: #a3a39d;
120
+ --acp-color-ink-faint: #7a7a74;
121
+ --acp-color-line: #33332f;
122
+ --acp-color-line-strong: #4d4d47;
123
+
124
+ --acp-color-approve: #37a266;
125
+ --acp-color-approve-ink: #0c1f14;
126
+ --acp-color-reject-ink: #ececea;
127
+ --acp-color-danger: #e5655e;
128
+ --acp-color-danger-ink: #260503;
129
+ --acp-color-danger-surface: #2c1513;
130
+ --acp-color-untrusted: #d9a13f;
131
+ --acp-color-untrusted-surface: #2a2011;
132
+ --acp-color-agent: #93a4e8;
133
+ --acp-color-agent-surface: #1c2136;
134
+ --acp-color-focus: #7da2f5;
135
+
136
+ --acp-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1px var(--acp-color-line);
137
+ --acp-shadow-modal: 0 8px 30px rgb(0 0 0 / 0.55), 0 0 0 1px var(--acp-color-line);
138
+ }
139
+
140
+ @media (prefers-reduced-motion: reduce) {
141
+ :root {
142
+ --acp-duration-fast: 0ms;
143
+ --acp-duration-base: 0ms;
144
+ }
145
+ }