@atelic-action/ui 0.17.2 → 1.0.0

package/src/styles/gate.css

@@ -1,10 +1,10 @@
 /* The access gate's two faces: the sign in screen (GateLogin) and the
    confidential watermark (Watermark). Every value is a theme token, so the
-   gate recolors with the rest of a site. Scoped under `.mkt` or
-   `.atelic-ui`, which also lifts each rule over the base heading and
-   paragraph rules inside this layer. */
+   gate recolors with the rest of a site. Scoped under `.atelic-ui`,
+   which also lifts each rule over the base heading and paragraph rules
+   inside this layer. */
 @layer atelic-ui {
-	:is(.mkt, .atelic-ui) .gate-screen {
+	.atelic-ui .gate-screen {
 		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
@@ -12,20 +12,20 @@
 		color: var(--ink);
 	}
 
-	:is(.mkt, .atelic-ui) .gate-brand {
+	.atelic-ui .gate-brand {
 		display: flex;
 		align-items: baseline;
 		gap: 10px;
 		padding: 22px 32px;
 		border-bottom: 1px solid var(--neutral-100);
 	}
-	:is(.mkt, .atelic-ui) .gate-brand-name {
+	.atelic-ui .gate-brand-name {
 		font-family: var(--font-serif);
 		font-style: italic;
 		font-size: 24px;
 		color: var(--ui-primary, var(--primary));
 	}
-	:is(.mkt, .atelic-ui) .gate-brand-sub {
+	.atelic-ui .gate-brand-sub {
 		font-family: var(--font-mono);
 		font-size: 11px;
 		letter-spacing: 0.22em;
@@ -33,7 +33,7 @@
 		color: var(--ink-soft);
 	}
 
-	:is(.mkt, .atelic-ui) .gate-body {
+	.atelic-ui .gate-body {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
@@ -42,7 +42,7 @@
 		text-align: center;
 		padding: 52px 24px 44px;
 	}
-	:is(.mkt, .atelic-ui) .gate-eyebrow {
+	.atelic-ui .gate-eyebrow {
 		font-family: var(--font-mono);
 		font-size: 12px;
 		letter-spacing: 0.18em;
@@ -50,7 +50,7 @@
 		color: var(--ui-primary, var(--primary));
 		margin: 0 0 16px;
 	}
-	:is(.mkt, .atelic-ui) .gate-headline {
+	.atelic-ui .gate-headline {
 		font-family: var(--font-serif);
 		font-size: clamp(2rem, 4.4vw, 2.7rem);
 		line-height: 1.08;
@@ -59,7 +59,7 @@
 		text-wrap: balance;
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .gate-lead {
+	.atelic-ui .gate-lead {
 		font-size: 1.05rem;
 		color: var(--ink-soft);
 		max-width: 46ch;
@@ -67,7 +67,7 @@
 		text-wrap: pretty;
 	}
 
-	:is(.mkt, .atelic-ui) .gate-form {
+	.atelic-ui .gate-form {
 		display: flex;
 		gap: 10px;
 		width: 100%;
@@ -75,7 +75,7 @@
 		flex-wrap: wrap;
 		justify-content: center;
 	}
-	:is(.mkt, .atelic-ui) .gate-input {
+	.atelic-ui .gate-input {
 		flex: 1;
 		min-width: 220px;
 		font-family: var(--font-sans);
@@ -89,29 +89,29 @@
 		color: var(--ink);
 		outline: none;
 	}
-	:is(.mkt, .atelic-ui) .gate-input:focus-visible {
+	.atelic-ui .gate-input:focus-visible {
 		border-color: var(--ui-primary, var(--primary));
 		box-shadow: 0 0 0 3px var(--primary-focus-ring);
 	}
-	:is(.mkt, .atelic-ui) .gate-input::placeholder {
+	.atelic-ui .gate-input::placeholder {
 		color: var(--neutral-500);
 	}
 
-	:is(.mkt, .atelic-ui) .gate-fine {
+	.atelic-ui .gate-fine {
 		margin: 26px 0 0;
 		font-family: var(--font-mono);
 		font-size: 11.5px;
 		color: var(--neutral-500);
 	}
-	:is(.mkt, .atelic-ui) .gate-fine a {
+	.atelic-ui .gate-fine a {
 		color: var(--ui-primary, var(--primary));
 		text-decoration: none;
 	}
-	:is(.mkt, .atelic-ui) .gate-fine a:hover {
+	.atelic-ui .gate-fine a:hover {
 		text-decoration: underline;
 	}
 
-	:is(.mkt, .atelic-ui) .gate-sent {
+	.atelic-ui .gate-sent {
 		margin: 4px auto 0;
 		max-width: 440px;
 		border: 1px solid var(--neutral-100);
@@ -121,10 +121,10 @@
 		text-align: left;
 		color: var(--ink-soft);
 	}
-	:is(.mkt, .atelic-ui) .gate-sent strong {
+	.atelic-ui .gate-sent strong {
 		color: var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .gate-error {
+	.atelic-ui .gate-error {
 		margin: 0 0 22px;
 		max-width: 44ch;
 		font-size: 0.95rem;
@@ -136,7 +136,7 @@
 	}
 
 	/* The "Start over" control reads as a link in the fine print. */
-	:is(.mkt, .atelic-ui) .gate-link-button {
+	.atelic-ui .gate-link-button {
 		background: none;
 		border: none;
 		color: var(--ui-primary, var(--primary));
@@ -145,13 +145,13 @@
 		padding: 0;
 	}
 	/* The failure line under the form, where the default bottom margin is spare. */
-	:is(.mkt, .atelic-ui) .gate-error.gate-error-after {
+	.atelic-ui .gate-error.gate-error-after {
 		margin-top: 22px;
 		margin-bottom: 0;
 	}
 
 	/* ---- Watermark ---- */
-	:is(.mkt, .atelic-ui) .gate-wm {
+	.atelic-ui .gate-wm {
 		position: fixed;
 		right: 16px;
 		bottom: 16px;
@@ -170,24 +170,24 @@
 		box-shadow: var(--shadow-md, 0 8px 24px -10px rgba(0, 0, 0, 0.5));
 		pointer-events: none;
 	}
-	:is(.mkt, .atelic-ui) .gate-wm b {
+	.atelic-ui .gate-wm b {
 		color: #fff;
 		font-weight: 600;
 	}
-	:is(.mkt, .atelic-ui) .gate-wm-dot {
+	.atelic-ui .gate-wm-dot {
 		width: 7px;
 		height: 7px;
 		border-radius: 50%;
 		background: var(--primary-bright);
 		flex-shrink: 0;
 	}
-	:is(.mkt, .atelic-ui) .gate-wm-text {
+	.atelic-ui .gate-wm-text {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
-	:is(.mkt, .atelic-ui) .gate-wm-tile-layer {
+	.atelic-ui .gate-wm-tile-layer {
 		position: fixed;
 		inset: 0;
 		z-index: 2147482000;
@@ -195,7 +195,7 @@
 		overflow: hidden;
 		opacity: 0.5;
 	}
-	:is(.mkt, .atelic-ui) .gate-wm-tile {
+	.atelic-ui .gate-wm-tile {
 		position: absolute;
 		font-family: var(--font-mono);
 		font-size: 12px;

package/src/styles/primitives.css

@@ -4,7 +4,7 @@
    writes outside a layer still wins over them whatever its specificity. */
 @layer atelic-ui {
 	/* CTA buttons: primary (brand), dark (ink), ghost (outline). */
-	:is(.mkt, .atelic-ui) .btn {
+	.atelic-ui .btn {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
@@ -22,56 +22,56 @@
 		text-align: center;
 		line-height: 1;
 	}
-	:is(.mkt, .atelic-ui) .btn:active {
+	.atelic-ui .btn:active {
 		transform: translateY(1px) scale(0.99);
 	}
-	:is(.mkt, .atelic-ui) .btn-primary {
+	.atelic-ui .btn-primary {
 		background: var(--primary);
 		color: #fff;
 		box-shadow: var(--primary-shadow);
 	}
-	:is(.mkt, .atelic-ui) .btn-primary:hover {
+	.atelic-ui .btn-primary:hover {
 		background: var(--primary-deep);
 		box-shadow: var(--primary-shadow-hover);
 		transform: translateY(-1px);
 	}
-	:is(.mkt, .atelic-ui) .btn-dark {
+	.atelic-ui .btn-dark {
 		background: var(--ink);
 		color: var(--surface);
 	}
-	:is(.mkt, .atelic-ui) .btn-dark:hover {
+	.atelic-ui .btn-dark:hover {
 		background: #000;
 		transform: translateY(-1px);
 	}
-	:is(.mkt, .atelic-ui) .btn-ghost {
+	.atelic-ui .btn-ghost {
 		background: transparent;
 		color: var(--ink);
 		box-shadow: inset 0 0 0 1.5px var(--neutral-300);
 	}
-	:is(.mkt, .atelic-ui) .btn-ghost:hover {
+	.atelic-ui .btn-ghost:hover {
 		box-shadow: inset 0 0 0 1.5px var(--ink);
 	}
-	:is(.mkt, .atelic-ui) .btn-ghost.on-dark {
+	.atelic-ui .btn-ghost.on-dark {
 		color: #fff;
 		box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
 	}
-	:is(.mkt, .atelic-ui) .btn-ghost.on-dark:hover {
+	.atelic-ui .btn-ghost.on-dark:hover {
 		box-shadow: inset 0 0 0 1.5px #fff;
 		background: rgba(255, 255, 255, 0.08);
 	}
-	:is(.mkt, .atelic-ui) .btn-lg {
+	.atelic-ui .btn-lg {
 		padding: 1.1em 2em;
 		font-size: 1.08rem;
 	}
-	:is(.mkt, .atelic-ui) .btn .arrow {
+	.atelic-ui .btn .arrow {
 		transition: transform 0.2s ease;
 	}
-	:is(.mkt, .atelic-ui) .btn:hover .arrow {
+	.atelic-ui .btn:hover .arrow {
 		transform: translateX(3px);
 	}
 
 	/* Chip: small mono tag for credentials, feature tags, service areas. */
-	:is(.mkt, .atelic-ui) .chip {
+	.atelic-ui .chip {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.5em;
@@ -86,16 +86,16 @@
 		box-shadow: inset 0 0 0 1px var(--neutral-200);
 		white-space: nowrap;
 	}
-	:is(.mkt, .atelic-ui) .chip .dot {
+	.atelic-ui .chip .dot {
 		width: 6px;
 		height: 6px;
 		border-radius: 50%;
 		background: var(--primary);
 	}
-	:is(.mkt, .atelic-ui) .chip svg {
+	.atelic-ui .chip svg {
 		flex: none;
 	}
-	:is(.mkt, .atelic-ui) .chip.on-dark {
+	.atelic-ui .chip.on-dark {
 		background: rgba(255, 255, 255, 0.08);
 		color: #efe7da;
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
@@ -104,7 +104,7 @@
 	/* Eyebrow: mono uppercase kicker trailed by a bar that fades off to the
 	   right — the wordmark's signature, in the brand's primary. This fade is
 	   the only rendering; the old leading-dash mode is retired. */
-	:is(.mkt, .atelic-ui) .eyebrow {
+	.atelic-ui .eyebrow {
 		font-family: var(--font-mono);
 		font-size: 0.74rem;
 		font-weight: 500;
@@ -115,13 +115,13 @@
 		align-items: center;
 		gap: 0.6em;
 	}
-	:is(.mkt, .atelic-ui) .eyebrow.on-dark {
+	.atelic-ui .eyebrow.on-dark {
 		color: var(--primary-bright);
 	}
-	:is(.mkt, .atelic-ui) .eyebrow.center {
+	.atelic-ui .eyebrow.center {
 		justify-content: center;
 	}
-	:is(.mkt, .atelic-ui) .eyebrow::after {
+	.atelic-ui .eyebrow::after {
 		content: "";
 		width: 40px;
 		height: 2px;
@@ -131,23 +131,188 @@
 		background: linear-gradient(90deg, var(--rule-accent, currentColor), transparent);
 	}
 
-	:is(.mkt, .atelic-ui) .lead {
+	.atelic-ui .lead {
 		font-size: clamp(1.05rem, 2vw, 1.3rem);
 		color: var(--ink-soft);
 		line-height: 1.55;
 	}
 
-	:is(.mkt, .atelic-ui) .section-head {
+	.atelic-ui .section-head {
 		/* Width is constrained on the lead only: titles size to their section so
 		   they never wrap early into dead space (the 60ch cap here was measured
 		   at the body font size, boxing every title into ~510px). */
 		max-width: none;
 	}
-	:is(.mkt, .atelic-ui) .section-head.center {
+	.atelic-ui .section-head.center {
 		margin-inline: auto;
 	}
-	:is(.mkt, .atelic-ui) .section-head .section-head-lead {
+	.atelic-ui .section-head .section-head-lead {
 		margin-top: 16px;
 		max-width: 60ch;
 	}
 }
+
+/* The five primitives that came from template-marketing in 0.19.0 (ATE-643):
+   the image frame, the prose body, the quote card, the star row, and the tick
+   list. Scoped .atelic-ui alone. */
+@layer atelic-ui {
+	/* ---- ImageFrame (image-frame.css) ---- */
+	/* Image frame: rounded, shadowed media container. Auto margins keep a
+	   maxWidth-constrained frame centered when its column is wider than it is
+	   (single-column mobile stacks); full-width frames are unaffected. */
+	.atelic-ui .imgframe {
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		box-shadow: var(--shadow-md);
+		background: var(--surface-inset);
+		position: relative;
+		margin-inline: auto;
+	}
+	/* Lifted variant. A photograph sitting on a warm band reads flat under the
+	   default frame shadow; this raises it a step. Passed through `className`. */
+	.atelic-ui .imgframe.is-lifted {
+		box-shadow: var(--shadow-lg);
+	}
+	.atelic-ui .imgframe img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	/* Placeholder block for imagery that does not exist yet. */
+	.atelic-ui .ph {
+		position: relative;
+		border-radius: var(--radius-lg);
+		background:
+			repeating-linear-gradient(
+				135deg,
+				rgba(138, 124, 104, 0.1) 0 10px,
+				rgba(138, 124, 104, 0.04) 10px 20px
+			),
+			var(--surface-inset);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--neutral-600);
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		text-align: center;
+		padding: 20px;
+		box-shadow: inset 0 0 0 1px rgba(138, 124, 104, 0.2);
+	}
+
+	/* ---- ProseBlocks (prose-blocks.css) ---- */
+	/* Body prose for ported documents: legal pages and blog posts. Measure is
+	   capped tighter than the marketing sections and the type steps down, because
+	   this is read continuously rather than scanned. Tokens only. */
+
+	.atelic-ui .prose-blocks {
+		max-width: 70ch;
+	}
+
+	.atelic-ui .pb-heading {
+		margin: 40px 0 14px;
+		font-size: 1.15rem;
+		line-height: 1.3;
+		letter-spacing: 0.01em;
+	}
+
+	.atelic-ui .pb-heading:first-child {
+		margin-top: 0;
+	}
+
+	.atelic-ui .pb-body {
+		margin: 0 0 16px;
+		font-size: 1rem;
+		line-height: 1.75;
+		color: var(--neutral-700);
+	}
+
+	/* The base reset strips list markers site wide, which suits nav and card
+	   lists but not running prose: a bulleted list of symptoms reads as a set of
+	   orphaned sentences without them. Restore markers here only. */
+	.atelic-ui .pb-list {
+		margin: 0 0 16px;
+		padding-left: 22px;
+		list-style: disc outside;
+		color: var(--neutral-700);
+	}
+
+	.atelic-ui .pb-list li {
+		margin-bottom: 8px;
+		font-size: 1rem;
+		line-height: 1.75;
+	}
+
+	/* Ported prose carries long unbroken strings (URLs, citations, defined terms
+	   in caps) that would otherwise push the column past the viewport on a phone. */
+	.atelic-ui .pb-body,
+	.atelic-ui .pb-list li {
+		overflow-wrap: break-word;
+	}
+
+	/* ---- QuoteCard (quote-card.css) ---- */
+	.atelic-ui .quote-card {
+		background: var(--card);
+		border-radius: var(--radius-lg);
+		padding: clamp(28px, 5vw, 52px);
+		box-shadow: var(--shadow-sm);
+		border: 1px solid var(--hairline);
+		margin: 0;
+	}
+	.atelic-ui .quote-card blockquote {
+		font-family: var(--font-serif);
+		font-style: italic;
+		font-size: clamp(1.4rem, 3.4vw, 2.1rem);
+		line-height: 1.34;
+		color: var(--ink);
+		margin: 0;
+	}
+	.atelic-ui .quote-card .by {
+		margin-top: 22px;
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--neutral-600);
+	}
+
+	/* ---- StarRow (star-row.css) ---- */
+	/* Star row: filled rating stars, brand colored. Size comes from the
+	   component's `size` prop so one row can be small in a card and larger
+	   beside an aggregate score. */
+	.atelic-ui .star-row {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+		flex: 0 0 auto;
+		color: var(--primary);
+	}
+
+	/* ---- TickList (tick-list.css) ---- */
+	.atelic-ui ul.ticks {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+	.atelic-ui ul.ticks li {
+		display: flex;
+		gap: 12px;
+		align-items: flex-start;
+		color: var(--ink-soft);
+	}
+	.atelic-ui ul.ticks li .tick {
+		flex: 0 0 auto;
+		width: 22px;
+		height: 22px;
+		border-radius: 50%;
+		margin-top: 1px;
+		background: var(--primary-tint);
+		color: var(--primary);
+		display: grid;
+		place-items: center;
+		box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent);
+	}
+}