style: scale evaluation and conclusion visuals
This commit is contained in:
@@ -81,6 +81,7 @@ export const PresentationAssistantPane = ({
|
|||||||
throughPhase={phase}
|
throughPhase={phase}
|
||||||
activePhase={phase}
|
activePhase={phase}
|
||||||
surface="stage"
|
surface="stage"
|
||||||
|
scrollMode="start"
|
||||||
requestOverrides={submittedOverrides}
|
requestOverrides={submittedOverrides}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ describe("ConclusionScene", () => {
|
|||||||
render(<ConclusionScene scene={scene} beat={beat(beatId)} />);
|
render(<ConclusionScene scene={scene} beat={beat(beatId)} />);
|
||||||
const map = screen.getByRole("region", { name: "thesis contribution boundary" });
|
const map = screen.getByRole("region", { name: "thesis contribution boundary" });
|
||||||
expect(map).toHaveAttribute("data-visual-role", "contribution-boundary");
|
expect(map).toHaveAttribute("data-visual-role", "contribution-boundary");
|
||||||
|
expect(map).toHaveAttribute("data-presentation-surface", "editorial");
|
||||||
expect(map).toHaveAttribute("data-conclusion-beat", beatId);
|
expect(map).toHaveAttribute("data-conclusion-beat", beatId);
|
||||||
for (const label of [
|
for (const label of [
|
||||||
"External planner",
|
"External planner",
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ export const ConclusionScene: FC<ConclusionSceneProps> = ({ scene, beat }) => {
|
|||||||
aria-label="thesis contribution boundary"
|
aria-label="thesis contribution boundary"
|
||||||
data-conclusion-beat={beatId}
|
data-conclusion-beat={beatId}
|
||||||
data-visual-role="contribution-boundary"
|
data-visual-role="contribution-boundary"
|
||||||
|
data-presentation-surface="editorial"
|
||||||
>
|
>
|
||||||
<div className="conclusion-map__flow" aria-label="contribution flow">
|
<div className="conclusion-map__flow" aria-label="contribution flow">
|
||||||
<div className="conclusion-map__flow-unit conclusion-map__flow-unit--planner" data-flow-unit="planner">
|
<div className="conclusion-map__flow-unit conclusion-map__flow-unit--planner" data-flow-unit="planner">
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ describe("EvaluationEvidenceScene", () => {
|
|||||||
render(<EvaluationEvidenceScene scene={scene} beat={beat(beatId)} />);
|
render(<EvaluationEvidenceScene scene={scene} beat={beat(beatId)} />);
|
||||||
const board = screen.getByRole("group", { name: /evaluation evidence board/i });
|
const board = screen.getByRole("group", { name: /evaluation evidence board/i });
|
||||||
expect(board).toHaveAttribute("data-visual-role", "evaluation-summary");
|
expect(board).toHaveAttribute("data-visual-role", "evaluation-summary");
|
||||||
|
expect(board).toHaveAttribute("data-presentation-surface", "editorial");
|
||||||
expect(board).toHaveAttribute(
|
expect(board).toHaveAttribute(
|
||||||
"data-evaluation-beat",
|
"data-evaluation-beat",
|
||||||
beatId,
|
beatId,
|
||||||
|
|||||||
@@ -34,6 +34,7 @@ export const EvaluationEvidenceScene: FC<EvaluationEvidenceSceneProps> = ({ scen
|
|||||||
data-evaluation-beat={beatId}
|
data-evaluation-beat={beatId}
|
||||||
data-evaluation-focus={beatId}
|
data-evaluation-focus={beatId}
|
||||||
data-visual-role="evaluation-summary"
|
data-visual-role="evaluation-summary"
|
||||||
|
data-presentation-surface="editorial"
|
||||||
>
|
>
|
||||||
<div className="evaluation-board__cohort" aria-label="campaign cohort equation">
|
<div className="evaluation-board__cohort" aria-label="campaign cohort equation">
|
||||||
<span className="evaluation-board__cohort-total">{evaluationEvidence.totalTrials}</span>
|
<span className="evaluation-board__cohort-total">{evaluationEvidence.totalTrials}</span>
|
||||||
|
|||||||
@@ -127,6 +127,7 @@
|
|||||||
--evaluation-paper: oklch(0.96 0.018 85);
|
--evaluation-paper: oklch(0.96 0.018 85);
|
||||||
--evaluation-rule: oklch(0.74 0.05 75);
|
--evaluation-rule: oklch(0.74 0.05 75);
|
||||||
display: grid;
|
display: grid;
|
||||||
|
min-height: min(24rem, 58vh);
|
||||||
grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.2fr);
|
grid-template-columns: minmax(14rem, 0.8fr) minmax(20rem, 1.2fr);
|
||||||
gap: 0;
|
gap: 0;
|
||||||
margin: 0.25rem 0 0.5rem;
|
margin: 0.25rem 0 0.5rem;
|
||||||
@@ -204,7 +205,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.evaluation-board__cohort-total {
|
.evaluation-board__cohort-total {
|
||||||
font: 3.7rem/0.9 "Barlow Condensed", sans-serif;
|
font: 4.8rem/0.86 "Barlow Condensed", sans-serif;
|
||||||
letter-spacing: -0.04em;
|
letter-spacing: -0.04em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -247,7 +248,7 @@
|
|||||||
.evaluation-board__outcome--fail { border-color: oklch(0.58 0.16 25); }
|
.evaluation-board__outcome--fail { border-color: oklch(0.58 0.16 25); }
|
||||||
|
|
||||||
.evaluation-board__outcome strong {
|
.evaluation-board__outcome strong {
|
||||||
font: 2.2rem/0.9 "Barlow Condensed", sans-serif;
|
font: 2.8rem/0.86 "Barlow Condensed", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.evaluation-board__outcome span,
|
.evaluation-board__outcome span,
|
||||||
@@ -356,6 +357,17 @@
|
|||||||
color: oklch(0.93 0.015 250);
|
color: oklch(0.93 0.015 250);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] {
|
||||||
|
--conclusion-paper: var(--color-editorial-paper, oklch(0.975 0.012 82));
|
||||||
|
--conclusion-ink: var(--color-editorial-ink, oklch(0.19 0.015 65));
|
||||||
|
--conclusion-muted: var(--color-editorial-muted, oklch(0.48 0.025 65));
|
||||||
|
--conclusion-rule: color-mix(in oklch, var(--conclusion-muted) 38%, transparent);
|
||||||
|
min-height: min(22rem, 56vh);
|
||||||
|
border-color: var(--conclusion-rule);
|
||||||
|
background: var(--conclusion-paper);
|
||||||
|
color: var(--conclusion-ink);
|
||||||
|
}
|
||||||
|
|
||||||
.conclusion-map__flow {
|
.conclusion-map__flow {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
@@ -467,6 +479,45 @@
|
|||||||
transition: opacity 180ms ease, transform 180ms ease;
|
transition: opacity 180ms ease, transform 180ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__node {
|
||||||
|
border-color: var(--conclusion-rule);
|
||||||
|
background: color-mix(in oklch, var(--conclusion-paper) 88%, var(--conclusion-muted));
|
||||||
|
color: var(--conclusion-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__node[data-emphasis="substrate"] {
|
||||||
|
border-color: var(--conclusion-ink);
|
||||||
|
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--conclusion-ink) 16%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__node-index,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__node small,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__future small {
|
||||||
|
color: var(--conclusion-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__flow-unit--planner::after,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__flow-unit--substrate-stack::after,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__node--evidence::before {
|
||||||
|
border-color: var(--conclusion-muted);
|
||||||
|
color: var(--conclusion-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__non-claims li,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__future li,
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__statement {
|
||||||
|
border-color: var(--conclusion-rule);
|
||||||
|
color: var(--conclusion-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__future svg {
|
||||||
|
color: var(--conclusion-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.conclusion-map[data-presentation-surface="editorial"] .conclusion-map__statement {
|
||||||
|
border-top-color: var(--conclusion-ink);
|
||||||
|
}
|
||||||
|
|
||||||
.conclusion-map[data-conclusion-beat="limits"] .conclusion-map__future,
|
.conclusion-map[data-conclusion-beat="limits"] .conclusion-map__future,
|
||||||
.conclusion-map[data-conclusion-beat="conclusion"] .conclusion-map__future,
|
.conclusion-map[data-conclusion-beat="conclusion"] .conclusion-map__future,
|
||||||
.conclusion-map[data-conclusion-beat="future"] .conclusion-map__non-claims,
|
.conclusion-map[data-conclusion-beat="future"] .conclusion-map__non-claims,
|
||||||
@@ -3936,3 +3987,62 @@
|
|||||||
.authoring-bindings__rows code:last-child {
|
.authoring-bindings__rows code:last-child {
|
||||||
color: var(--accent-cyan);
|
color: var(--accent-cyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Keep the editorial problem comparison readable after the shared chat rules. */
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .assistant-operator-thread[data-surface="dock"] .assistant-thread,
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .assistant-thread {
|
||||||
|
border-color: var(--problem-rule);
|
||||||
|
background: color-mix(in oklch, var(--problem-paper) 92%, var(--problem-muted));
|
||||||
|
color: var(--problem-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .assistant-thread__viewport,
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .assistant-message[data-role="assistant"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .assistant-message[data-role="assistant"] p,
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-group-root"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-root"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-args-value"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-result-content"] {
|
||||||
|
color: var(--problem-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-args-value"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-result-content"] {
|
||||||
|
border-color: var(--problem-rule);
|
||||||
|
background: color-mix(in oklch, var(--problem-paper) 86%, var(--problem-muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-group-trigger"],
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-trigger"] {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--problem-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-group-content"] > div,
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-fallback-content"] > div {
|
||||||
|
border-color: var(--problem-rule);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] [data-slot="tool-group-content"] [data-slot="tool-fallback-root"] {
|
||||||
|
border-color: var(--problem-rule);
|
||||||
|
background: color-mix(in oklch, var(--problem-paper) 90%, var(--problem-muted));
|
||||||
|
}
|
||||||
|
|
||||||
|
@container presentation-canvas (max-width: 1050px) {
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] {
|
||||||
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .problem-loop-scene__bridge {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .problem-chat-card,
|
||||||
|
.problem-loop-scene[data-presentation-surface="editorial"] .problem-blueprint {
|
||||||
|
width: 100%;
|
||||||
|
height: min(22rem, 56vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user