@techrox/page-studio-blocks 1.0.0 → 1.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.
- package/README.md +5 -0
- package/package.json +1 -1
- package/src/styles.css +173 -15
package/README.md
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
# @techrox/page-studio-blocks
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@techrox/page-studio-blocks)
|
|
4
|
+
[](https://www.npmjs.com/package/@techrox/page-studio-blocks)
|
|
5
|
+
[](https://bundlephobia.com/package/@techrox/page-studio-blocks)
|
|
6
|
+
[](../../LICENSE)
|
|
7
|
+
|
|
3
8
|
50 production-ready content blocks + the Puck config builder + the StudioProvider context.
|
|
4
9
|
|
|
5
10
|
Shared by both `@techrox/page-studio` (editor) and `@techrox/page-studio-renderer` (public render).
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@techrox/page-studio-blocks",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "50 production-ready content blocks (Hero, Pricing, FAQ, Contact, …) plus the Puck config builder for @techrox/page-studio. SSR-safe, brand-themable via CSS variables, host-extensible.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "techrox",
|
package/src/styles.css
CHANGED
|
@@ -1,21 +1,179 @@
|
|
|
1
|
-
/* @techrox/page-studio-blocks —
|
|
2
|
-
* need at runtime. Block typography classes (.tps-h1, .tps-section, etc.) are
|
|
3
|
-
* NOT shipped here — host applications provide them via their own stylesheet.
|
|
4
|
-
* See README "Required host CSS" for the list of classes blocks reference.
|
|
1
|
+
/* @techrox/page-studio-blocks — base styles for the block library.
|
|
5
2
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
3
|
+
* Includes:
|
|
4
|
+
* - CSS variable defaults (override at :root in your host to theme)
|
|
5
|
+
* - Layout primitives (.tps-container, .tps-section, .tps-h1, …) that
|
|
6
|
+
* block render functions reference at runtime
|
|
7
|
+
* - Picker UI styles
|
|
8
|
+
* - Scroll-reveal animations */
|
|
8
9
|
|
|
9
10
|
:root {
|
|
10
|
-
--tps-primary:
|
|
11
|
-
--tps-primary-dark:
|
|
12
|
-
--tps-
|
|
13
|
-
--tps-
|
|
14
|
-
--tps-
|
|
15
|
-
--tps-
|
|
16
|
-
--tps-
|
|
17
|
-
--tps-
|
|
18
|
-
--tps-
|
|
11
|
+
--tps-primary: #0b60d8;
|
|
12
|
+
--tps-primary-dark: #0848a3;
|
|
13
|
+
--tps-primary-light: #3b82f6;
|
|
14
|
+
--tps-primary-soft: #dbeafe;
|
|
15
|
+
--tps-accent: #f59e0b;
|
|
16
|
+
--tps-accent-dark: #d97706;
|
|
17
|
+
--tps-ink: #0f172a;
|
|
18
|
+
--tps-ink-2: #334155;
|
|
19
|
+
--tps-muted: #64748b;
|
|
20
|
+
--tps-hint: #94a3b8;
|
|
21
|
+
--tps-line: #e2e8f0;
|
|
22
|
+
--tps-bg: #ffffff;
|
|
23
|
+
--tps-bg-soft: #fafaf7;
|
|
24
|
+
--tps-bg-section: #f8fafc;
|
|
25
|
+
--tps-max: 1240px;
|
|
26
|
+
--tps-radius: 14px;
|
|
27
|
+
--tps-radius-lg: 20px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* -------------------------------------------------------------------------
|
|
31
|
+
Layout primitives — referenced by block render functions
|
|
32
|
+
------------------------------------------------------------------------- */
|
|
33
|
+
.tps-container {
|
|
34
|
+
max-width: var(--tps-max);
|
|
35
|
+
margin: 0 auto;
|
|
36
|
+
padding: 0 24px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.tps-section {
|
|
40
|
+
padding: clamp(64px, 8vw, 112px) 24px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.tps-section-soft {
|
|
44
|
+
background: var(--tps-bg-soft);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.tps-eyebrow {
|
|
48
|
+
display: inline-block;
|
|
49
|
+
font-size: 12px;
|
|
50
|
+
font-weight: 700;
|
|
51
|
+
letter-spacing: 2px;
|
|
52
|
+
text-transform: uppercase;
|
|
53
|
+
color: var(--tps-primary);
|
|
54
|
+
margin-bottom: 16px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.tps-h1 {
|
|
58
|
+
font-size: clamp(36px, 5.5vw, 60px);
|
|
59
|
+
letter-spacing: -0.02em;
|
|
60
|
+
color: var(--tps-ink);
|
|
61
|
+
margin: 0 0 16px;
|
|
62
|
+
font-weight: 800;
|
|
63
|
+
line-height: 1.15;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.tps-h2 {
|
|
67
|
+
font-size: clamp(28px, 4vw, 42px);
|
|
68
|
+
letter-spacing: -0.02em;
|
|
69
|
+
color: var(--tps-ink);
|
|
70
|
+
margin: 0 0 16px;
|
|
71
|
+
font-weight: 800;
|
|
72
|
+
line-height: 1.15;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.tps-h3 {
|
|
76
|
+
font-size: clamp(22px, 2.5vw, 28px);
|
|
77
|
+
letter-spacing: -0.02em;
|
|
78
|
+
color: var(--tps-ink);
|
|
79
|
+
margin: 0 0 16px;
|
|
80
|
+
font-weight: 800;
|
|
81
|
+
line-height: 1.15;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.tps-lede {
|
|
85
|
+
font-size: clamp(16px, 1.5vw, 19px);
|
|
86
|
+
line-height: 1.65;
|
|
87
|
+
color: var(--tps-muted);
|
|
88
|
+
max-width: 720px;
|
|
89
|
+
margin: 0 0 28px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Hero — soft radial glow in primary + accent colours, dot-grid overlay */
|
|
93
|
+
.tps-hero {
|
|
94
|
+
position: relative;
|
|
95
|
+
padding: clamp(72px, 10vw, 128px) 24px clamp(64px, 8vw, 112px);
|
|
96
|
+
background:
|
|
97
|
+
radial-gradient(1100px 480px at 8% -10%, rgba(11, 96, 216, 0.06), transparent 60%),
|
|
98
|
+
radial-gradient(900px 420px at 100% 0%, rgba(245, 158, 11, 0.04), transparent 60%),
|
|
99
|
+
var(--tps-bg);
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.tps-hero::before {
|
|
104
|
+
content: '';
|
|
105
|
+
position: absolute;
|
|
106
|
+
inset: 0;
|
|
107
|
+
background-image: radial-gradient(
|
|
108
|
+
circle at 1px 1px,
|
|
109
|
+
rgba(15, 23, 42, 0.04) 1px,
|
|
110
|
+
transparent 0
|
|
111
|
+
);
|
|
112
|
+
background-size: 24px 24px;
|
|
113
|
+
mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 70%);
|
|
114
|
+
-webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 70%);
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.tps-hero-inner {
|
|
119
|
+
position: relative;
|
|
120
|
+
max-width: var(--tps-max);
|
|
121
|
+
margin: 0 auto;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* <em> inside a hero heading renders as a gradient text fill */
|
|
125
|
+
.tps-hero h1 em {
|
|
126
|
+
font-style: normal;
|
|
127
|
+
background: linear-gradient(
|
|
128
|
+
120deg,
|
|
129
|
+
var(--tps-primary) 0%,
|
|
130
|
+
var(--tps-primary-light) 100%
|
|
131
|
+
);
|
|
132
|
+
-webkit-background-clip: text;
|
|
133
|
+
background-clip: text;
|
|
134
|
+
-webkit-text-fill-color: transparent;
|
|
135
|
+
color: transparent;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.tps-service-icon {
|
|
139
|
+
display: inline-flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
justify-content: center;
|
|
142
|
+
width: 48px;
|
|
143
|
+
height: 48px;
|
|
144
|
+
border-radius: 12px;
|
|
145
|
+
background: var(--tps-primary-soft);
|
|
146
|
+
color: var(--tps-primary);
|
|
147
|
+
font-size: 22px;
|
|
148
|
+
margin-bottom: 18px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.tps-service-hero {
|
|
152
|
+
background: linear-gradient(180deg, var(--tps-bg) 0%, var(--tps-bg-soft) 100%);
|
|
153
|
+
padding: clamp(60px, 8vw, 96px) 24px clamp(40px, 5vw, 64px);
|
|
154
|
+
border-bottom: 1px solid var(--tps-line);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.tps-form-card {
|
|
158
|
+
background: var(--tps-bg);
|
|
159
|
+
border: 1px solid var(--tps-line);
|
|
160
|
+
border-radius: var(--tps-radius);
|
|
161
|
+
padding: clamp(24px, 4vw, 40px);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.tps-overlay-card {
|
|
165
|
+
position: relative;
|
|
166
|
+
overflow: hidden;
|
|
167
|
+
border-radius: var(--tps-radius);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.tps-card-hover {
|
|
171
|
+
transition: transform 200ms ease, box-shadow 200ms ease;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.tps-card-hover:hover {
|
|
175
|
+
transform: translateY(-2px);
|
|
176
|
+
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
|
19
177
|
}
|
|
20
178
|
|
|
21
179
|
/* --- Picker block-card (drawerItem override) ---------------------------- */
|