@protolabsai/ui 0.7.0 → 0.8.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 (38) hide show
  1. package/package.json +10 -2
  2. package/src/AppShell.full.stories.tsx +4 -2
  3. package/src/AppShell.stories.tsx +3 -2
  4. package/src/Badge.stories.tsx +2 -2
  5. package/src/Blog.stories.tsx +4 -2
  6. package/src/Button.stories.tsx +2 -2
  7. package/src/Content.stories.tsx +4 -2
  8. package/src/Data.stories.tsx +2 -1
  9. package/src/Forms.stories.tsx +1 -1
  10. package/src/Introduction.stories.tsx +3 -13
  11. package/src/Menu.stories.tsx +2 -1
  12. package/src/Overlays.stories.tsx +3 -10
  13. package/src/Primitives.stories.tsx +2 -2
  14. package/src/Process.stories.tsx +3 -2
  15. package/src/Row.stories.tsx +2 -2
  16. package/src/Skeleton.stories.tsx +2 -2
  17. package/src/Surface.stories.tsx +3 -2
  18. package/src/app-shell.tsx +309 -0
  19. package/src/data.tsx +126 -0
  20. package/src/forms.tsx +109 -0
  21. package/src/internal.ts +11 -0
  22. package/src/layout.tsx +57 -0
  23. package/src/marketing.tsx +95 -0
  24. package/src/menu.tsx +141 -0
  25. package/src/navigation.tsx +94 -0
  26. package/src/overlays.tsx +299 -0
  27. package/src/primitives.tsx +90 -0
  28. package/src/styles/app-shell.css +212 -0
  29. package/src/styles/data.css +185 -0
  30. package/src/styles/forms.css +193 -0
  31. package/src/styles/layout.css +98 -0
  32. package/src/styles/marketing.css +249 -0
  33. package/src/styles/menu.css +90 -0
  34. package/src/styles/navigation.css +173 -0
  35. package/src/styles/overlays.css +295 -0
  36. package/src/styles/primitives.css +219 -0
  37. package/src/styles.css +12 -1510
  38. package/src/index.tsx +0 -1329
package/src/styles/primitives.css ADDED
@@ -0,0 +1,219 @@
1
+ /* @protolabsai/ui — primitives styles (over @protolabsai/design --pl-* tokens). */
2
+
3
+ .pl-btn {
4
+ display: inline-flex;
5
+ align-items: center;
6
+ gap: 0.4rem;
7
+ padding: 0.5rem 0.9rem;
8
+ font-family: var(--pl-font-sans);
9
+ font-size: 13px;
10
+ font-weight: 400;
11
+ color: var(--pl-color-fg);
12
+ background: transparent;
13
+ border: var(--pl-border-width) solid var(--pl-color-border-strong);
14
+ border-radius: var(--pl-radius);
15
+ cursor: pointer;
16
+ text-decoration: none;
17
+ transition:
18
+ border-color var(--pl-motion-fast) var(--pl-motion-ease),
19
+ color var(--pl-motion-fast) var(--pl-motion-ease),
20
+ background var(--pl-motion-fast) var(--pl-motion-ease);
21
+ }
22
+
23
+ .pl-btn:hover {
24
+ border-color: var(--pl-color-fg);
25
+ }
26
+
27
+ /* Primary ships as a stronger border, not a lavender fill — brand restraint. */
28
+ .pl-btn--primary {
29
+ border-color: var(--pl-color-fg);
30
+ }
31
+
32
+ .pl-btn--primary:hover {
33
+ background: var(--pl-color-fg);
34
+ color: var(--pl-color-bg);
35
+ }
36
+
37
+ .pl-btn:disabled {
38
+ opacity: 0.5;
39
+ cursor: not-allowed;
40
+ }
41
+
42
+ .pl-badge {
43
+ display: inline-flex;
44
+ align-items: center;
45
+ gap: 0.35rem;
46
+ padding: 0.15rem 0.5rem;
47
+ font-family: var(--pl-font-mono);
48
+ font-size: 11px;
49
+ line-height: 1.4;
50
+ text-transform: lowercase;
51
+ letter-spacing: 0.02em;
52
+ color: var(--pl-color-fg-muted);
53
+ background: var(--pl-color-bg-raised);
54
+ border: var(--pl-border-width) solid var(--pl-color-border);
55
+ border-radius: var(--pl-radius);
56
+ }
57
+
58
+ .pl-badge--success {
59
+ color: var(--pl-color-status-success);
60
+ border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
61
+ }
62
+
63
+ .pl-badge--warning {
64
+ color: var(--pl-color-status-warning);
65
+ border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
66
+ }
67
+
68
+ .pl-badge--error {
69
+ color: var(--pl-color-status-error);
70
+ border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
71
+ }
72
+
73
+ .pl-badge--info {
74
+ color: var(--pl-color-status-info);
75
+ border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
76
+ }
77
+
78
+ .pl-card {
79
+ background: var(--pl-color-bg-raised);
80
+ border: var(--pl-border-width) solid var(--pl-color-border);
81
+ border-radius: var(--pl-radius);
82
+ padding: var(--pl-space-4);
83
+ }
84
+
85
+ .pl-eyebrow {
86
+ font-family: var(--pl-font-mono);
87
+ font-size: 11px;
88
+ font-weight: var(--pl-font-weight-medium);
89
+ text-transform: uppercase;
90
+ letter-spacing: 0.08em;
91
+ color: var(--pl-color-fg-muted);
92
+ }
93
+
94
+ /* ── empty state ── */
95
+ .pl-empty {
96
+ color: var(--pl-color-fg-muted);
97
+ font-family: var(--pl-font-mono);
98
+ font-size: 13px;
99
+ padding: 1rem 0;
100
+ }
101
+
102
+ /* ── divider ── */
103
+ .pl-divider {
104
+ border: 0;
105
+ border-top: var(--pl-border-width) solid var(--pl-color-border);
106
+ margin: 2rem 0;
107
+ }
108
+
109
+ /* ── callout (note block) ── */
110
+ .pl-callout {
111
+ background: var(--pl-color-bg-raised);
112
+ border: var(--pl-border-width) solid var(--pl-color-border);
113
+ border-left-width: 2px;
114
+ border-radius: var(--pl-radius);
115
+ padding: 0.85rem 1rem;
116
+ }
117
+
118
+ .pl-callout__title {
119
+ font-family: var(--pl-font-mono);
120
+ font-size: 12px;
121
+ text-transform: lowercase;
122
+ letter-spacing: 0.02em;
123
+ color: var(--pl-color-fg);
124
+ margin-bottom: 0.35rem;
125
+ }
126
+
127
+ .pl-callout__body {
128
+ font-size: 14px;
129
+ line-height: 1.6;
130
+ color: var(--pl-color-fg-muted);
131
+ }
132
+
133
+ .pl-callout--success {
134
+ border-left-color: var(--pl-color-status-success);
135
+ }
136
+
137
+ .pl-callout--warning {
138
+ border-left-color: var(--pl-color-status-warning);
139
+ }
140
+
141
+ .pl-callout--error {
142
+ border-left-color: var(--pl-color-status-error);
143
+ }
144
+
145
+ .pl-callout--info {
146
+ border-left-color: var(--pl-color-status-info);
147
+ }
148
+
149
+ /* ── kbd / inline token ── */
150
+ .pl-kbd {
151
+ font-family: var(--pl-font-mono);
152
+ font-size: 0.82em;
153
+ padding: 0.1rem 0.4rem;
154
+ color: var(--pl-color-fg);
155
+ background: var(--pl-color-bg-raised);
156
+ border: var(--pl-border-width) solid var(--pl-color-border);
157
+ border-bottom-width: 2px;
158
+ border-radius: var(--pl-radius);
159
+ }
160
+
161
+ /* ── standalone link ── */
162
+ .pl-link {
163
+ color: inherit;
164
+ text-decoration: underline;
165
+ text-underline-offset: 3px;
166
+ text-decoration-color: var(--pl-color-border-strong);
167
+ transition:
168
+ text-decoration-color var(--pl-motion-fast) var(--pl-motion-ease),
169
+ color var(--pl-motion-fast) var(--pl-motion-ease);
170
+ }
171
+
172
+ .pl-link:hover {
173
+ text-decoration-color: var(--pl-color-fg);
174
+ }
175
+
176
+ /* Destructive confirm — error-toned border, fills error on hover. */
177
+ .pl-btn--danger {
178
+ border-color: color-mix(in oklch, var(--pl-color-status-error) 60%, transparent);
179
+ color: var(--pl-color-status-error);
180
+ }
181
+
182
+ .pl-btn--danger:hover {
183
+ background: var(--pl-color-status-error);
184
+ border-color: var(--pl-color-status-error);
185
+ color: var(--pl-color-bg);
186
+ }
187
+
188
+ /* Ghost — transparent until hover, for toolbars / inline actions. */
189
+ .pl-btn--ghost {
190
+ border-color: transparent;
191
+ }
192
+
193
+ .pl-btn--ghost:hover {
194
+ border-color: var(--pl-color-border-strong);
195
+ background: var(--pl-color-bg-hover);
196
+ }
197
+
198
+ .pl-btn--sm {
199
+ padding: 0.3rem 0.6rem;
200
+ font-size: 12px;
201
+ }
202
+
203
+ /* Icon-only — square, centered glyph. */
204
+ .pl-btn--icon {
205
+ padding: 0;
206
+ width: 30px;
207
+ height: 30px;
208
+ justify-content: center;
209
+ }
210
+
211
+ .pl-btn--icon.pl-btn--sm {
212
+ width: 26px;
213
+ height: 26px;
214
+ }
215
+
216
+ .pl-btn--icon svg {
217
+ width: 16px;
218
+ height: 16px;
219
+ }