@boopkit/cap-web 0.1.0 → 0.1.1
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.
- package/package.json +2 -1
- package/styles/base.css +27 -0
- package/styles/theme.css +35 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@boopkit/cap-web",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Express view engine configuration, Handlebars helpers, and static asset middleware",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"dist/",
|
|
9
9
|
"scaffold/",
|
|
10
10
|
"skills/",
|
|
11
|
+
"styles/",
|
|
11
12
|
"capability.json"
|
|
12
13
|
],
|
|
13
14
|
"boopkit": {
|
package/styles/base.css
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/* @boopkit/cap-web — Base semantic classes backed by @theme tokens.
|
|
2
|
+
* Override tokens in your project's @theme block to restyle all components. */
|
|
3
|
+
|
|
4
|
+
.app-shell {
|
|
5
|
+
background-color: var(--color-surface);
|
|
6
|
+
color: var(--color-on-surface);
|
|
7
|
+
@apply min-h-screen flex flex-col;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.btn-primary {
|
|
11
|
+
background-color: var(--color-brand-600);
|
|
12
|
+
border-radius: var(--radius-lg);
|
|
13
|
+
@apply px-5 py-2.5 text-white font-medium transition-colors;
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
background-color: var(--color-brand-700);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.btn-secondary {
|
|
21
|
+
border-radius: var(--radius-lg);
|
|
22
|
+
@apply px-5 py-2.5 border border-gray-300 font-medium transition-colors;
|
|
23
|
+
|
|
24
|
+
&:hover {
|
|
25
|
+
background-color: var(--color-surface-alt);
|
|
26
|
+
}
|
|
27
|
+
}
|
package/styles/theme.css
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* @boopkit/cap-web — Default design tokens for boop projects.
|
|
2
|
+
* Override any token in your project's styles.css with a later @theme block. */
|
|
3
|
+
@theme {
|
|
4
|
+
/* Brand color scale — emerald base, override for your brand */
|
|
5
|
+
--color-brand-50: #ecfdf5;
|
|
6
|
+
--color-brand-100: #d1fae5;
|
|
7
|
+
--color-brand-200: #a7f3d0;
|
|
8
|
+
--color-brand-300: #6ee7b7;
|
|
9
|
+
--color-brand-400: #34d399;
|
|
10
|
+
--color-brand-500: #10b981;
|
|
11
|
+
--color-brand-600: #059669;
|
|
12
|
+
--color-brand-700: #047857;
|
|
13
|
+
--color-brand-800: #065f46;
|
|
14
|
+
--color-brand-900: #064e3b;
|
|
15
|
+
|
|
16
|
+
/* Surface & text — warm neutrals that complement emerald */
|
|
17
|
+
--color-surface: #fafaf9;
|
|
18
|
+
--color-surface-alt: #f5f5f4;
|
|
19
|
+
--color-on-surface: #1c1917;
|
|
20
|
+
--color-on-surface-muted: #78716c;
|
|
21
|
+
|
|
22
|
+
/* Typography */
|
|
23
|
+
--font-sans: "Inter", system-ui, sans-serif;
|
|
24
|
+
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
25
|
+
|
|
26
|
+
/* Border radii */
|
|
27
|
+
--radius-sm: 0.25rem;
|
|
28
|
+
--radius-md: 0.5rem;
|
|
29
|
+
--radius-lg: 0.75rem;
|
|
30
|
+
--radius-xl: 1rem;
|
|
31
|
+
|
|
32
|
+
/* Layout spacing */
|
|
33
|
+
--spacing-page: 2rem;
|
|
34
|
+
--spacing-section: 3rem;
|
|
35
|
+
}
|