@techrox/page-studio-blocks 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techrox/page-studio-blocks",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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.",
   "license": "MIT",
   "author": "techrox",

package/src/styles.css

@@ -44,6 +44,102 @@
   background: var(--tps-bg-soft);
 }
 
+/* -------------------------------------------------------------------------
+   Themes
+   -------------------------------------------------------------------------
+   A theme is nothing more than a re-scoped set of the *neutral* tokens
+   (ink / muted / line / bg / …). Brand tokens (--tps-primary, --tps-accent)
+   are deliberately left alone, so every vendor keeps its hue in every theme.
+
+   Apply a theme by setting `data-tps-theme="<name>"` on ANY container — the
+   renderer root, a page wrapper, a single section. Every descendant block
+   reads var(--tps-*) and re-paints automatically: no per-block code, no
+   re-render, just the CSS cascade. That's the whole mechanism, and it scales
+   — adding a new theme is one rule below, nothing else changes.
+
+       <div data-tps-theme="dark"> … blocks … </div>
+
+   The same token set also backs the per-section opt-in `background:'dark'`
+   (.tps-section-dark) so a single light page can drop one dark section.
+
+   To ADD a theme (e.g. "sepia"): copy the dark rule, rename the selector to
+   `[data-tps-theme="sepia"], .tps-section-sepia`, and change the values.
+   Nothing in the blocks needs to know the theme exists.
+   ------------------------------------------------------------------------- */
+
+/* Explicit light = the :root defaults, restated so a light island can be
+   nested inside a dark container via data-tps-theme="light". */
+[data-tps-theme="light"] {
+  --tps-ink:          #0f172a;
+  --tps-ink-2:        #334155;
+  --tps-muted:        #64748b;
+  --tps-hint:         #94a3b8;
+  --tps-line:         #e2e8f0;
+  --tps-bg:           #ffffff;
+  --tps-bg-soft:      #fafaf7;
+  --tps-bg-section:   #f8fafc;
+}
+
+/* Dark theme. Shared by the container scope and the per-section opt-in. */
+[data-tps-theme="dark"],
+.tps-section-dark {
+  --tps-ink:          #f1f5f9;
+  --tps-ink-2:        #cbd5e1;
+  --tps-muted:        #94a3b8;
+  --tps-hint:         #64748b;
+  --tps-line:         #262626;
+  --tps-bg:           #141414;
+  --tps-bg-soft:      #1a1a1a;
+  --tps-bg-section:   #0a0a0a;
+  --tps-primary-soft: #1a1a1a;
+}
+/* A container theme paints its own backdrop; the per-section variant paints
+   its surface (it's a section wrapper, not just a token scope). */
+[data-tps-theme="dark"] {
+  background: var(--tps-bg-section);
+  color: var(--tps-ink);
+}
+.tps-section-dark {
+  background: #0a0a0a;
+  color: var(--tps-ink);
+}
+/* Eyebrows are primary by default — low contrast on dark, so flip to accent. */
+[data-tps-theme="dark"] .tps-eyebrow,
+.tps-section-dark .tps-eyebrow {
+  color: var(--tps-accent);
+}
+/* AntD form controls on a dark surface (form blocks). */
+[data-tps-theme="dark"] .ant-input,
+[data-tps-theme="dark"] .ant-input-number,
+[data-tps-theme="dark"] .ant-input-affix-wrapper,
+[data-tps-theme="dark"] .ant-picker,
+[data-tps-theme="dark"] .ant-select-selector,
+.tps-section-dark .ant-input,
+.tps-section-dark .ant-input-number,
+.tps-section-dark .ant-input-affix-wrapper,
+.tps-section-dark .ant-picker,
+.tps-section-dark .ant-select-selector {
+  background: #1a1a1a !important;
+  border-color: #2e2e2e !important;
+  color: #f1f5f9 !important;
+}
+[data-tps-theme="dark"] .ant-input::placeholder,
+[data-tps-theme="dark"] .ant-select-selection-placeholder,
+[data-tps-theme="dark"] .ant-picker-input > input::placeholder,
+.tps-section-dark .ant-input::placeholder,
+.tps-section-dark .ant-select-selection-placeholder,
+.tps-section-dark .ant-picker-input > input::placeholder {
+  color: #64748b !important;
+}
+[data-tps-theme="dark"] .ant-form-item-label > label,
+[data-tps-theme="dark"] .ant-checkbox-wrapper,
+[data-tps-theme="dark"] .ant-radio-wrapper,
+.tps-section-dark .ant-form-item-label > label,
+.tps-section-dark .ant-checkbox-wrapper,
+.tps-section-dark .ant-radio-wrapper {
+  color: #cbd5e1 !important;
+}
+
 .tps-eyebrow {
   display: inline-block;
   font-size: 12px;
@@ -203,7 +299,7 @@
   padding: 0;
   border: 1px solid var(--tps-line);
   border-radius: var(--tps-radius);
-  background: #fff;
+  background: var(--tps-bg);
   overflow: hidden;
   transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
 }