@incodetech/prizma-core-screens 0.1.3 → 0.2.4

package/src/DemoScreensLayout.css

@@ -0,0 +1,542 @@
+/* Demo screens — module layout additions.
+ *
+ * Two of the five Demo App screens are not an archetype: the SPLASH (a brand
+ * stage with the wordmark on it, no nav, no tag) and the START screen (a
+ * language block and a menu affordance in the header row, the wordmark in the
+ * middle, one CTA). Everything else in the family is archetype C or F and
+ * declares nothing here. Every value below is a Core token, or a literal
+ * measured off the Figma frame and named as such — the same idiom as
+ * `ScreenNav.css`'s 44px row.
+ *
+ * Figma: `Demo App - Latest Design` (FA4ZXKH3meKQnFmDsBsMdk) · `Web › Mobile`
+ * `demo_1` (2010:5868) and `demo_2` (2010:5925); the desktop pair draws the
+ * same column centred in a 1440 browser window.
+ */
+
+/* ── Splash — `demo_1` ───────────────────────────────────────────────────────
+ * The whole stage is Surface/Brand/500 (Figma: #006AFF, the brand blue at the
+ * time of the frame; the token is what the app ships). The wordmark and the
+ * caption go white through the two opt-in hooks Core already exposes:
+ * `--prizma-logo-fill` on Logo, Text/Body/0 static on the caption.
+ * Doubled selector on purpose: `.prizma-screen-shell` paints Surface/Neutral/0
+ * at (0,1,0) and the sheets load in whatever order the bundler picks, so the
+ * stage colour has to outrank it rather than out-order it. */
+.prizma-screen-shell.demo-screens-splash {
+  background: var(--prizma-surface-brand-500);
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-screens-splash .demo-screens-wordmark {
+  --prizma-logo-fill: var(--prizma-text-body-0-static);
+}
+
+.demo-screens-splash .demo-screens-wordmark__caption {
+  color: var(--prizma-text-body-0-static);
+}
+
+/* On a device panel wider than the phone (Core Lab's `screenOnDevice`, the
+ * Demo App's desktop) the splash is the whole window, not a blue column on
+ * white — `demo_1`'s desktop twin (2010:6362) fills the 1440 frame. The panel
+ * paints itself and the column lets go of its 390 (Elena, 2026-09-24: "aquí
+ * tiene que ser todo azul"). `:has()` because the panel is the host's element
+ * and the screen can only reach it from below; `!important` because the host
+ * sizes the column inline. */
+[data-pcs-device-area]:has(> [data-pcs-device-content] > .demo-screens-splash) {
+  background: var(--prizma-surface-brand-500) !important;
+}
+
+[data-pcs-device-content]:has(> .demo-screens-splash) {
+  left: 0 !important;
+  width: 100% !important;
+}
+
+/* ── The wordmark block — splash and start ──────────────────────────────────
+ * Logo 187 × 51 on the frame, caption H4 (18 / 500) at Spacing/4 beneath it
+ * (Figma: logo box 60 tall, caption at +65). Core's Logo is authored at 88 × 24
+ * and scales with its box, so the width is the ONE literal: 187 is the frame's
+ * measure, not a token, and it is written once. */
+.demo-screens-wordmark {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+}
+
+.demo-screens-wordmark .prizma-logo > svg {
+  width: 187px; /* measured — Figma `Logo / Incode` 187 × 51 on demo_1 / demo_2 */
+  height: auto;
+}
+
+.demo-screens-wordmark__caption {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h4-font-size);
+  font-weight: var(--prizma-headline-h4-font-weight);
+  line-height: var(--prizma-headline-h4-line-height);
+  letter-spacing: var(--prizma-headline-h4-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── Start — `demo_2` header row ─────────────────────────────────────────────
+ * Sits where every other screen puts its logo nav (same status-bar offset,
+ * same 44 row, same gutters), but carries the language block on the left and
+ * the menu affordance on the right instead of a centred wordmark. */
+.demo-screens-start__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  min-height: 44px; /* the nav row — GUIDELINES §3, same literal as ScreenNav.css */
+  padding-inline: var(--prizma-spacing-24);
+}
+
+.demo-screens-start__language {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-2);
+  font-family: var(--prizma-body-family);
+}
+
+.demo-screens-start__language-label {
+  font-size: var(--prizma-label-m-font-size);
+  font-weight: var(--prizma-label-m-font-weight);
+  line-height: var(--prizma-label-m-line-height);
+  letter-spacing: var(--prizma-label-m-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-start__language-value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prizma-spacing-4);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  letter-spacing: var(--prizma-label-m-regular-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-start__language-value img {
+  height: 12px; /* the flag raster at the label's cap height — measured, demo_2 */
+  width: auto;
+}
+
+/* The menu affordance: Core's nav icon button, reused by class so the hit
+ * area, the colour and the focus ring are Navigation's own — nothing new. */
+.demo-screens-start__menu {
+  margin-inline-end: calc(-1 * var(--prizma-spacing-8));
+}
+
+/* The wordmark block fills the flexible middle, centred. */
+.demo-screens-start__middle {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Settings — `demo_3` header row ─────────────────────────────────────────
+ * Core's Navigation with the logo off and the close X on: the bar keeps the
+ * nav row's offset so the title lands where every other screen's first block
+ * lands. */
+.demo-screens-settings__nav {
+  flex-shrink: 0;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  height: 44px; /* the nav row — GUIDELINES §3 */
+  padding-inline: var(--prizma-spacing-24);
+  display: flex;
+  align-items: center;
+}
+
+.demo-screens-settings__nav .prizma-nav {
+  position: static;
+  width: 100%;
+}
+
+/* Title → dropdown Spacing/32: Figma puts the field 31 under the H2 (113 → 172). */
+.demo-screens-settings__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-32);
+  flex: 1;
+  min-height: 0;
+}
+
+/* The language rows carry the flag raster at the label's cap height. */
+.demo-screens-settings__flag {
+  height: 12px; /* measured, demo_4 rows */
+  width: auto;
+  display: inline-block;
+}
+
+/* ── The tag-less CTA band — Start and Settings ──────────────────────────────
+ * `__band--bare` gives the Spacing/24 to the bottom; as a shell child the band
+ * still needs the column's gutters, which `--result` carries and `--bare` does
+ * not. Nothing else: the button is Core's, the gap is the band's. */
+.demo-screens-band {
+  padding-inline: var(--prizma-spacing-24);
+}
+
+/* ── Native flow ─────────────────────────────────────────────────────────────
+ * Figma: `Demo App - Latest Design` › `iOS` (2010:4692). Android draws the same
+ * screens; the reference is iOS (Elena, 2026-09-24). */
+
+/* Configuration — a field stack under the logo nav, archetype E's own
+ * measures: Spacing/16 between fields, the CTA in the bare band. Figma puts
+ * the first field 44 under the nav row (62+44 → 148); the content column's
+ * 24 plus this 20 reach it. */
+.demo-screens-config__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-20);
+  flex: 1;
+  min-height: 0;
+}
+
+/* Terms — the logo sits LEFT (Figma 32 / 85), the document scrolls, and the
+ * consent row + CTA ride the bare band. */
+.demo-screens-terms__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-12));
+  min-height: 44px; /* the nav row — GUIDELINES §3 */
+  padding-inline: var(--prizma-spacing-24);
+}
+
+.demo-screens-terms__meta {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-terms__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-top: var(--prizma-spacing-16);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+  white-space: pre-line;
+}
+
+/* The consent row above the CTA takes the band's own Spacing/16. */
+.demo-screens-terms__consent {
+  display: flex;
+}
+
+/* Launch — the caption under the CTA: "Environment: Stage", value in brand. */
+.demo-screens-launch__env {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-launch__env b {
+  font-weight: inherit;
+  color: var(--prizma-text-accent-brand);
+}
+
+/* The header's left text on Launch ("Flow: Digital ID Flow"). */
+.demo-screens-start__flow {
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+/* A snackbar over the top of a screen (Launch "Flow saved", the sheet's
+ * "settings saved"): Core's Snackbar, anchored where the frame draws it — the
+ * nav row, full gutter width. */
+.demo-screens-toast {
+  position: absolute;
+  z-index: 3;
+  left: var(--prizma-spacing-24);
+  right: var(--prizma-spacing-24);
+  top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-8));
+  display: flex;
+}
+
+.demo-screens-toast .prizma-snackbar {
+  width: 100%;
+}
+
+/* ── The two sheets ──────────────────────────────────────────────────────────
+ * Same idiom as Document Capture's method sheet (DEVIATIONS #DC-30): the
+ * screen owns the scrim, Core's `PrizmaBottomSheetContent` owns the panel. The
+ * frame draws the sheet from 74 down (grabber at 79), so the panel starts at
+ * the status bar plus Spacing/24 and fills to the bottom. */
+.demo-screens-sheet-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: var(--prizma-surface-overlay);
+}
+
+.demo-screens-sheet-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: calc(var(--pcs-status-bar, 47px) + var(--prizma-spacing-24));
+  z-index: 2;
+  display: flex;
+}
+
+.demo-screens-sheet-panel .prizma-bottom-sheet {
+  flex: 1;
+  min-height: 0;
+}
+
+.demo-screens-sheet-panel .prizma-bottom-sheet__content,
+.demo-screens-sheet-panel .prizma-bottom-sheet__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.demo-screens-sheet__nav {
+  flex-shrink: 0;
+  height: 44px; /* the nav row — GUIDELINES §3 */
+  display: flex;
+  align-items: center;
+}
+
+.demo-screens-sheet__nav .prizma-nav {
+  position: static;
+  width: 100%;
+}
+
+/* Title 16 under the nav row (Figma 152 → 168); fields Spacing/32 under the
+ * title block, as archetype E. */
+.demo-screens-sheet__title {
+  padding-top: var(--prizma-spacing-16);
+}
+
+.demo-screens-sheet__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-top: var(--prizma-spacing-32);
+  flex: 1;
+  min-height: 0;
+}
+
+/* The two read-only lines under the flow picker. */
+.demo-screens-sheet__line {
+  margin: 0;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-800-primary);
+}
+
+.demo-screens-sheet__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+/* CTA band at the foot of the sheet: primary → tertiary link → build caption,
+ * at the band's flat Spacing/16, then Spacing/24 to the bottom (bare). */
+.demo-screens-sheet__band {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-16);
+  padding-bottom: var(--prizma-spacing-24);
+}
+
+.demo-screens-sheet__band .prizma-button {
+  width: 100%;
+}
+
+.demo-screens-build {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-label-m-regular-font-size);
+  font-weight: var(--prizma-label-m-regular-font-weight);
+  line-height: var(--prizma-label-m-regular-line-height);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* ── Redirect — the desktop page (4272:11166) ────────────────────────────────
+ * One card, 800 wide on the frame with a 752 content column (24 gutters),
+ * centred in the window on a Surface/Neutral/50 page. The shell IS the page;
+ * the card is the only thing on it. Inside, archetype F's skeleton: nav →
+ * centred title block → the leg → CTA band → tag. */
+.prizma-screen-shell.demo-screens-redirect {
+  background: var(--prizma-surface-neutral-50);
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-screens-redirect__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px; /* measured — the frame's card */
+  background: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-medium); /* Figma `Content`: r16 */
+}
+
+/* The card's nav row has no status bar above it: the offset collapses to the
+ * frame's 24 (logo at 212, card at 188). */
+.demo-screens-redirect__card .prizma-screen-nav {
+  margin-top: var(--prizma-spacing-24);
+}
+
+/* Doubled selector: the foundation reserves the anchored footer's space on
+ * every content column (`:has(.__band__tag)` → 88px of padding-bottom) and
+ * flexes it to fill the shell. Here nothing is anchored — the card hugs its
+ * content and the tag rides in the band — so the column keeps only its own
+ * height and the band's Spacing/24 is the whole gap to the CTA (Elena,
+ * 2026-09-24: "hay un spacing innecesario"). */
+.demo-screens-redirect .demo-screens-redirect__content {
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--prizma-spacing-32);
+  padding-top: var(--prizma-spacing-8);
+  padding-bottom: 0;
+}
+
+/* Tabs — Core has no Tabs primitive yet (DEVIATIONS #GEN-15). Two text
+ * buttons over a hairline; the active one carries the brand underline. Type is
+ * the H5 ramp the frame uses (16 / 500), colours the body tokens. */
+.demo-screens-tabs {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 676px; /* measured — the frame's `tabs` row inside the 752 column */
+  border-bottom: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+}
+
+.demo-screens-tabs__tab {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: var(--prizma-spacing-8) var(--prizma-spacing-12);
+  margin-bottom: calc(-1 * var(--prizma-border-width-regular));
+  border-bottom: var(--prizma-border-width-bold) solid transparent;
+  cursor: pointer;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.demo-screens-tabs__tab--active {
+  color: var(--prizma-text-body-800-primary);
+  border-bottom-color: var(--prizma-border-brand-500);
+}
+
+.demo-screens-redirect__leg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--prizma-spacing-16);
+  width: 100%;
+}
+
+/* The phone leg lines up with the CTA band below it: one 352 column for the
+ * field, the Send button and "Continue on desktop" (Figma draws the form at
+ * 326 and the CTAs at 352; Elena, 2026-09-24: keep the longer one, but make
+ * everything match). */
+.demo-screens-redirect__leg--form {
+  max-width: 352px; /* the CTAs group on the frame — the form joins it */
+}
+
+.demo-screens-redirect__leg--form .prizma-button {
+  width: 100%;
+}
+
+.demo-screens-redirect__hint {
+  margin: 0;
+  text-align: center;
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-headline-h5-font-size);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+/* The QR well: 200 square, a hairline, radius small (Figma 312 → 512). The
+ * image inside is the host's. */
+.demo-screens-redirect__qr {
+  width: 200px; /* measured — the frame's QR well */
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--prizma-spacing-12);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  background: var(--prizma-surface-neutral-0);
+}
+
+.demo-screens-redirect__qr > * {
+  width: 100%;
+  height: 100%;
+}
+
+/* The CTA band inside the card: F's own band, static (the card hugs its
+ * content, nothing is anchored), at the field's 352 (Figma 544 → 896) and
+ * Spacing/24 to the card's bottom. The tag rides in the band, as on F. */
+.demo-screens-redirect__band {
+  align-self: stretch;
+  align-items: center;
+  /* The band carries the column's 24 gutters itself (it is a shell child, not
+   * inside the content column), so on the phone its 352 clips to the same 342
+   * the form gets — the button and the field share one edge (Elena,
+   * 2026-09-24: "el botón está más alargado que el resto"). */
+  padding: var(--prizma-spacing-24) var(--prizma-spacing-24) var(--prizma-spacing-24);
+}
+
+.demo-screens-redirect__band > * {
+  width: 100%;
+  max-width: 352px; /* measured — the CTAs group on the frame */
+}
+
+.demo-screens-redirect__band .prizma-screen-layout__band__tag {
+  position: static;
+  display: flex;
+  justify-content: center;
+}
+
+/* The snackbar on a desktop page: hugging, centred, 32 from the top (Figma). */
+.demo-screens-toast--desktop {
+  left: 0;
+  right: 0;
+  top: var(--prizma-spacing-32);
+  justify-content: center;
+}
+
+.demo-screens-toast--desktop .prizma-snackbar {
+  width: auto;
+}