create-pmos 0.512.0 → 0.514.0

package/workspace/public/pm/cozy-viewer.css

@@ -1,11 +1,11 @@
 /* pm/cozy-viewer.css — the Agreed design's look for the shared dialog and the Viewer (initiative premium-agreed-design, area viewer).
- * premium-viewer.js loads it once (it is not a premium-vw-* sheet: the Agreed design's Nunito and weights are not the console's type). It changes nothing on a page without <body class="cz"> (cozy-nav.js mountNav adds the class).
+ * premium-viewer.js loads it once (it is not a premium-vw-* sheet: the workspace face and role weights are not the console's type). It changes nothing on a page without <body class="cz"> (cozy-nav.js mountNav adds the class).
  * The Viewer frame of the design (Viewer.dc.html) re-points the premium tokens (--ink, --ember, --spot, --solid ...) to the cozy palette;
  * this file does the same for the dialog, its Viewer tabs, its menus and the toast, so every view (doc, slides, Jira, meeting, notes,
  * calendar, report) takes the cozy look from the tokens it already reads. Motion: only the cz-dot levels move (cozy.css). */
 
 .cz .dlg, .cz .veil, .cz .toast, .cz .vmenu, .cz .crmenu, .cz .tbmenu, .cz .czi-tok, .cz .cz-vw {   /* .cz-vw: the Home Viewer (cozy-viewer.js), whose views read the same tokens */
-  --sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
+  --sans: var(--cz-sans);
   --ink: var(--cz-c-2a2e35); --ink-2: var(--cz-c-4a4f58); --ink-3: var(--cz-c-646a74);
   --card: var(--cz-c-ffffff); --card-solid: var(--cz-c-ffffff); --well: var(--cz-c-f4f3f0); --hair: rgba(42,46,53,.1);
   --ember: var(--cz-c-4894ea); --ember-ink: var(--cz-c-2f5fb3); --solid: var(--cz-c-2f5fb3); --on-solid: var(--cz-c-ffffff); --spot: var(--cz-c-eef5fc);
@@ -37,43 +37,43 @@
 .cz .veil { background: rgba(42,46,53,.22); -webkit-backdrop-filter: none; backdrop-filter: none; }
 .cz .dlg { background: var(--card-solid); border: 1px solid var(--hair); border-radius: 28px; box-shadow: 0 30px 70px -36px rgba(42,46,53,.28), 0 2px 6px rgba(42,46,53,.06);
   -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
-.cz .dlg .dhead h2 { font-size: var(--fs-5); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
-.cz .dlg .dsub { font-size: var(--fs-2); color: var(--ink-3); }
-.cz .dlg .label, .cz .dlg #dEye { font: 700 var(--fs-2) var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
+.cz .dlg .dhead h2 { font-size: var(--fs-panel); line-height: 1.25; font-weight: var(--fw-strong); letter-spacing: -.01em; }
+.cz .dlg .dsub { font-size: var(--fs-meta); color: var(--ink-3); line-height: var(--lh-meta); }
+.cz .dlg .label, .cz .dlg #dEye { font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
 .cz .dlg .dx2 { background: transparent; border-radius: 999px; color: var(--ink-2); }
 .cz .dlg .dx2:hover { background: var(--well); }
 .cz .dlg .dx2[aria-pressed="true"] { background: var(--spot); color: var(--ember-ink); }
 .cz .dlg .p-out { background: var(--well); border-radius: 20px; }
 .cz .dlg .otop { background: var(--well); }
-.cz .dlg .ol { font-weight: 800; }
+.cz .dlg .ol { font-weight: var(--fw-strong); }
 .cz .dlg .paper.doc { background: var(--card-solid); border: 1px solid var(--hair); border-radius: 16px; box-shadow: none; }
 .cz .dlg .note, .cz .dlg .xn { color: var(--ink-3); }
 .cz .dlg .lede { color: var(--ink-2); }
 
 /* the Viewer tabs: the design's tab strip on the well, the current tab a white pill */
-.cz .vtab { height: 34px; border-radius: 12px 12px 0 0; font-weight: 700; color: var(--ink-3); }
+.cz .vtab { height: 34px; border-radius: 12px 12px 0 0; font-weight: var(--fw-strong); color: var(--ink-3); }
 .cz .vtab:hover { background: var(--card-solid); }
-.cz .vtab[aria-selected="true"] { background: var(--card-solid); color: var(--ink); font-weight: 800; box-shadow: none; }
+.cz .vtab[aria-selected="true"] { background: var(--card-solid); color: var(--ink); font-weight: var(--fw-strong); box-shadow: none; }
 .cz .vtab .vx { border-radius: 999px; }
 /* a phone: every tab is a 44 px press (premium-viewer R7) */
 @media (max-width: 640px) { .cz .vtab { height: 44px; } }
-.cz .vmore { border-radius: 999px; font-weight: 800; }
+.cz .vmore { border-radius: 999px; font-weight: var(--fw-strong); }
 .cz .vmenu, .cz .crmenu, .cz .tbmenu { background: var(--card-solid); border: 1px solid var(--hair); border-radius: 20px; box-shadow: 0 24px 60px -24px rgba(42,46,53,.45);
   -webkit-backdrop-filter: none; backdrop-filter: none; font-family: var(--sans); }
 
 /* presses: solid blue for the one primary, quiet wells for the rest; no lift on hover */
-.cz .dlg .cta, .cz .dlg .btn { background: var(--solid); color: var(--on-solid); font-weight: 800; border-radius: 999px; }
+.cz .dlg .cta, .cz .dlg .btn { background: var(--solid); color: var(--on-solid); font-weight: var(--fw-strong); border-radius: 999px; }
 .cz .dlg .cta.alt, .cz .dlg .btn.sec { background: var(--card-solid); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
 .cz .dlg .cta:hover, .cz .dlg .round:hover, .cz .dlg .lift:hover { transform: none; }
 .cz .dlg .seg { background: var(--well); }
 .cz .dlg .seg .pill { background: var(--card-solid); box-shadow: 0 1px 3px rgba(42,46,53,.12); }
-.cz .dlg .seg button { font-weight: 700; color: var(--ink-3); }
+.cz .dlg .seg button { font-weight: var(--fw-strong); color: var(--ink-3); }
 .cz .dlg .seg button[aria-pressed="true"] { color: var(--ink); }
 .cz .dlg input, .cz .dlg select, .cz .dlg textarea { font-family: var(--sans); }
 .cz .dlg .vcf { border-radius: 16px; background: var(--spot); }
 
 /* the toast: a white pill */
-.cz .toast { background: var(--card-solid); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 14px 34px -12px rgba(42,46,53,.35); font-weight: 700;
+.cz .toast { background: var(--card-solid); color: var(--ink); border: 1px solid var(--hair); box-shadow: 0 14px 34px -12px rgba(42,46,53,.35); font-weight: var(--fw-strong);
   -webkit-backdrop-filter: none; backdrop-filter: none; }
 
 /* motion signals importance only: nothing in the dialog rises, blurs or springs */
@@ -87,34 +87,34 @@
 /* ── the views: what the tokens cannot say (weights, radii) ── */
 /* Jira ticket and sprint (premium-vw-jira) */
 .cz .jbar{border-radius:14px}
-.cz .jbtn{border-radius:999px;font-weight:700}
+.cz .jbtn{border-radius:999px;font-weight:var(--fw-strong)}
 .cz .jtk{border-radius:20px;box-shadow:none}
-.cz .jtk h1{font-size:var(--fs-5);font-weight:800;letter-spacing:-.01em}
-.cz .jtk h3{font-weight:800}
-.cz .jst{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:800;font-size:var(--fs-2)}
+.cz .jtk h1{font-size:var(--fs-page);font-weight:var(--fw-strong);letter-spacing:-.01em;line-height:var(--lh-page);}
+.cz .jtk h3{font-weight:var(--fw-strong)}
+.cz .jst{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:var(--fw-strong);font-size:var(--fs-label);line-height:var(--lh-label);}
 .cz .jst.doing{background:var(--spot);color:var(--ember-ink)}
-.cz .jchip{border-radius:999px;font-weight:700}
+.cz .jchip{border-radius:999px;font-weight:var(--fw-strong)}
 .cz .jpts{border-radius:999px}
 .cz .jempty{border-radius:16px}
 .cz .jcrd{border-radius:14px}
 .cz .jcol{border-radius:16px}
 
-.cz .jfd dt { font-size: var(--fs-1); font-weight: 800; }
-.cz .jfd dd { font-size: var(--fs-3); font-weight: 700; }
+.cz .jfd dt { font-size: var(--fs-badge); font-weight: var(--fw-strong); line-height: var(--lh-badge); }
+.cz .jfd dd { font-size: var(--fs-row); font-weight: var(--fw-strong); line-height: var(--lh-row); }
 
-/* Every view: Nunito headings at 800, bold at 700, as Viewer.dc.html, Meeting.dc.html and ReportPanel.dc.html set them */
-.cz .dlg .obody h1, .cz .dlg .obody h2, .cz .dlg .obody h3, .cz .dlg .obody h4 { font-family: var(--sans); font-weight: 800; letter-spacing: -.01em; }
-.cz .dlg .obody b, .cz .dlg .obody strong { font-weight: 700; }
+/* Every view: headings and bold at the strong weight, as Viewer.dc.html, Meeting.dc.html and ReportPanel.dc.html set them */
+.cz .dlg .obody h1, .cz .dlg .obody h2, .cz .dlg .obody h3, .cz .dlg .obody h4 { font-family: var(--sans); font-weight: var(--fw-strong); letter-spacing: -.01em; }
+.cz .dlg .obody b, .cz .dlg .obody strong { font-weight: var(--fw-strong); }
 
 /* the small caps labels of the views read as the design's 12px labels, not mono capitals (times, keys and code stay mono) */
 .cz .vm .vm-cap, .cz .vm .vm-ser, .cz .vm .vm-st, .cz .vm .vm-tg, .cz .vm .vm-tb th, .cz .vm .vm-shots figcaption,
 .cz .vn-g h4, .cz .vn-t small, .cz .vc .vc-cap, .cz .vc .vc-mh span, .cz .vc .vc-more, .cz .vc .vc-none, .cz .vc .vc-hrs,
 .cz .rt-eye, .cz .rt-tag, .cz .vwi .vwi-l, .cz .vwcl, .cz .vwlab, .cz .vwsh, .cz .lz {
-  font-family: var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 800; }
-/* the calendar (AgCalendar): day heads, hours and event times in Nunito */
+  font-family: var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: var(--fw-strong); }
+/* the calendar (AgCalendar): day heads, hours and event times in the workspace face */
 .cz .vc .vc-dn b, .cz .vc .vc-dn i, .cz .vc .vc-dl b, .cz .vc .vc-db, .cz .vc .vc-adl, .cz .vc .vc-gut i, .cz .vc .vc-ev small, .cz .vc .vc-ar time, .cz .vc .vc-me time {
   font-family: var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
-.cz .vc .vc-dn b { font-weight: 800; }
+.cz .vc .vc-dn b { font-weight: var(--fw-strong); }
 /* the dialog takes focus when it opens; its own frame shows no ring (its first control does when tabbed to) */
 .cz .dlg:focus, .cz .dlg:focus-visible { outline: none; }
 
@@ -134,10 +134,10 @@
 .cz .rt-frame { box-shadow: none; border: 1px solid var(--hair); }
 .cz .rt-cyc li { background: var(--well); border: 0; }
 /* ReportPanel.dc.html: the primary and secondary presses are 12px rounded, the segmented control 12/9px, the menus 18px */
-.cz .rt .btn, .cz .obody:has(> .rt) > .vcf .btn { border-radius: 12px; font-weight: 700; }
+.cz .rt .btn, .cz .obody:has(> .rt) > .vcf .btn { border-radius: 12px; font-weight: var(--fw-strong); }
 .cz .rt .rt-seg { border-radius: 12px; }
 .cz .rt-seg .btn { border-radius: 9px; }
 .cz .rt-menu { border-radius: 18px; padding: 8px; }
 .cz .rt-menu > button { border-radius: 10px; min-height: 40px; }
-.cz .rt-chip { font-weight: 700; }
+.cz .rt-chip { font-weight: var(--fw-strong); }
 /* the recording dot (.rvdot) keeps its pulse: a live recording is the critical level of motion (cozy.css m-crit) */