@synqauth/react 0.3.0 → 0.4.0

package/dist/styles.css

@@ -13,7 +13,23 @@
 
 :where(.synq) {
   --synq-font-family: inherit;
-  --synq-font-size: 0.9375rem;
+  /*
+   * Kelvin's type scale (AERO-2765), as Synq's own apps have it: nothing
+   * under 13px, 13px (xs) only for incidental metadata, 14px (sm) for what a
+   * person reads to decide (labels, a row's second line, badges, notes), 16px
+   * (base) for body, rows, inputs and buttons. In px, so an app's own root
+   * size (62.5% is common) can't shrink them under the floor; from 1024px
+   * wide every step goes up one (below). Set any of them to retheme, and
+   * --synq-font-size for the components' body text.
+   */
+  --synq-text-xs: 13px;
+  --synq-text-sm: 14px;
+  --synq-text-base: 16px;
+  --synq-text-lg: 18px;
+  --synq-text-xl: 20px;
+  --synq-text-2xl: 24px;
+  --synq-text-3xl: 28px;
+  --synq-font-size: var(--synq-text-base);
   --synq-color-text: #f5f5f7;
   --synq-color-muted: #b8a5c9;
   /* Inputs, addresses and the cards inside a section. */
@@ -45,7 +61,7 @@
   --synq-color-disabled: #231a2e;
   --synq-color-disabled-border: #786b8b;
   --synq-color-disabled-text: #a497b3;
-  /* <AccountPanel>'s titles and greetings: the app's display face, if it has one. */
+  /* Titles, greetings and drawn initials: the app's display face, if it has one. */
   --synq-font-display: inherit;
   /* <AvatarMoment>: the ring's three colors, and the embers'. */
   --synq-moment-1: var(--synq-color-primary);
@@ -67,6 +83,19 @@
   color: var(--synq-color-text);
 }
 
+/* A laptop's text is never smaller than a phone's: one step up from 1024px wide. */
+@media (min-width: 64rem) {
+  :where(.synq) {
+    --synq-text-xs: 14px;
+    --synq-text-sm: 15px;
+    --synq-text-base: 17px;
+    --synq-text-lg: 19px;
+    --synq-text-xl: 22px;
+    --synq-text-2xl: 26px;
+    --synq-text-3xl: 30px;
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :where(.synq) {
     --synq-color-text: #140a1f;
@@ -76,7 +105,8 @@
     --synq-color-border: rgb(60 18 83 / 0.14);
     --synq-color-primary-ink: #0f766e;
     --synq-color-accent: #c2410c;
-    --synq-color-danger: #d92d20;
+    /* 4.5:1 as words on the danger section's own tint too, not only on white (AERO-2765). */
+    --synq-color-danger: #b42318;
     --synq-color-danger-text: #ffffff;
     --synq-shadow: 0 12px 32px rgb(20 10 31 / 0.14);
     --synq-backdrop: rgb(20 10 31 / 0.4);
@@ -242,7 +272,7 @@
   border-radius: 999px;
   background: color-mix(in srgb, var(--synq-color-primary) 10%, transparent);
   color: var(--synq-color-primary-ink);
-  font-size: 0.8125rem;
+  font-size: var(--synq-text-xs);
   font-weight: 700;
   object-fit: cover;
 }
@@ -259,6 +289,12 @@
   height: 100%;
 }
 
+/* Drawn initials take the display face; the SVG's own attributes are the fallback without this sheet. */
+:where(.synq-avatar) :where(text) {
+  font-family: var(--synq-font-display);
+  font-weight: 700;
+}
+
 :where(.synq-picture) {
   display: flex;
   flex-wrap: wrap;
@@ -270,7 +306,7 @@
   width: 5rem;
   height: 5rem;
   justify-self: start;
-  font-size: 1.75rem;
+  font-size: var(--synq-text-3xl);
 }
 
 :where(.synq-menu) {
@@ -285,7 +321,7 @@
   margin-top: 0.375rem;
   padding: 0.25rem;
   border: 1px solid var(--synq-color-border);
-  border-radius: var(--synq-radius-control);
+  border-radius: var(--synq-radius);
   background: var(--synq-color-surface);
   box-shadow: var(--synq-shadow);
 }
@@ -294,7 +330,7 @@
   display: block;
   padding: 0.5rem 0.75rem;
   border: 0;
-  border-radius: calc(var(--synq-radius-control) - 0.25rem);
+  border-radius: var(--synq-radius-control);
   background: none;
   color: inherit;
   font: inherit;
@@ -312,11 +348,18 @@
 
 :where(.synq-account-manager) {
   display: grid;
+  /*
+   * Its sections take the width there is, never their content's, so at
+   * 320px a long address or a row's badge wraps rather than widening the
+   * page (AERO-2765).
+   */
+  grid-template-columns: minmax(0, 1fr);
   gap: calc(var(--synq-spacing) * 2);
 }
 
 :where(.synq-section, .synq-wallet-manager) {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: calc(var(--synq-spacing) * 1.5);
   padding: calc(var(--synq-spacing) * 2);
   border: 1px solid var(--synq-color-border);
@@ -348,13 +391,15 @@
 
 :where(.synq-heading) {
   margin: 0;
-  font-size: 1.25rem;
+  font-family: var(--synq-font-display);
+  font-size: var(--synq-text-xl);
   font-weight: 700;
 }
 
 :where(.synq-subheading) {
   margin: 0;
-  font-size: 1rem;
+  font-family: var(--synq-font-display);
+  font-size: var(--synq-text-base);
   font-weight: 700;
 }
 
@@ -402,7 +447,7 @@
 }
 
 :where(.synq-card-title) {
-  font-size: 1.0625rem;
+  font-size: var(--synq-text-lg);
   font-weight: 700;
 }
 
@@ -429,7 +474,7 @@
   border-radius: var(--synq-radius-control);
   background: var(--synq-color-surface);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.875rem;
+  font-size: var(--synq-text-sm);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -486,7 +531,7 @@
 
 :where(.synq-label) {
   color: var(--synq-color-muted);
-  font-size: 0.8125rem;
+  font-size: var(--synq-text-sm);
   font-weight: 500;
 }
 
@@ -562,7 +607,8 @@
   border-radius: 999px;
   background: color-mix(in srgb, var(--synq-color-primary) 8%, transparent);
   color: var(--synq-color-primary-ink);
-  font-size: 0.75rem;
+  /* 13px at the least, however small the page sets its type (AERO-2757); 14px as a badge is read to decide (AERO-2765). */
+  font-size: var(--synq-text-sm);
   font-weight: 500;
 }
 
@@ -652,7 +698,7 @@
 
 :where(.synq-dialog-title) {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: var(--synq-text-xl);
   font-weight: 700;
 }
 
@@ -684,7 +730,7 @@
   background: color-mix(in srgb, var(--synq-color-text) 8%, transparent);
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
@@ -755,7 +801,7 @@
   box-shadow: var(--synq-shadow);
   color: var(--synq-color-text);
   font-family: var(--synq-font-family);
-  font-size: 1rem;
+  font-size: var(--synq-text-base);
   line-height: 1.45;
   text-align: left;
   pointer-events: auto;
@@ -859,20 +905,20 @@
 :where(.synq-account-panel-title) {
   margin: 0;
   font-family: var(--synq-font-display);
-  font-size: 24px;
+  font-size: var(--synq-text-2xl);
   font-weight: 700;
   line-height: 1.1;
   text-wrap: balance;
 }
 
 :where(.synq-account-panel-title-small) {
-  font-size: 20px;
+  font-size: var(--synq-text-xl);
 }
 
 :where(.synq-account-panel-subtitle) {
   margin: 4px 0 0;
   color: var(--synq-color-muted);
-  font-size: 16px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-icon-button) {
@@ -920,7 +966,7 @@
   background: color-mix(in srgb, var(--synq-color-text) 6%, transparent);
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   text-align: left;
   cursor: pointer;
@@ -989,7 +1035,7 @@
   border-radius: 999px;
   background: var(--synq-color-background);
   color: var(--synq-color-primary-ink);
-  font-size: 13px;
+  font-size: var(--synq-text-xs);
   font-weight: 600;
   line-height: 16px;
   white-space: nowrap;
@@ -1030,7 +1076,7 @@
   background: none;
   color: var(--synq-color-muted);
   font: inherit;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 3px;
@@ -1069,13 +1115,13 @@
 :where(.synq-account-panel-note) {
   margin: 0;
   color: var(--synq-color-muted);
-  font-size: 15px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-by) {
   margin: 0;
   color: var(--synq-color-muted);
-  font-size: 13px;
+  font-size: var(--synq-text-xs);
   text-align: center;
 }
 
@@ -1085,7 +1131,7 @@
   align-items: start;
   gap: 8px;
   color: var(--synq-color-text);
-  font-size: 15px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-problem) > :where(svg) {
@@ -1149,7 +1195,7 @@
 }
 
 :where(.synq-account-panel-row-title) {
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
 }
 
@@ -1159,7 +1205,7 @@
   align-items: center;
   gap: 6px;
   color: var(--synq-color-muted);
-  font-size: 15px;
+  font-size: var(--synq-text-sm);
   font-weight: 400;
   overflow-wrap: anywhere;
 }
@@ -1172,7 +1218,7 @@
 }
 
 :where(.synq-account-panel-showing) {
-  font-size: 13px;
+  font-size: var(--synq-text-xs);
   font-weight: 600;
   white-space: nowrap;
 }
@@ -1207,7 +1253,7 @@
 :where(.synq-account-panel-greeting) {
   margin: 6px 0 0;
   font-family: var(--synq-font-display);
-  font-size: 26px;
+  font-size: var(--synq-text-3xl);
   font-weight: 700;
   line-height: 1.1;
   text-wrap: balance;
@@ -1220,7 +1266,7 @@
 :where(.synq-account-panel-address, .synq-account-panel-mono) {
   color: var(--synq-color-muted);
   font-family: var(--synq-font-mono);
-  font-size: 14px;
+  font-size: var(--synq-text-sm);
   font-weight: 400;
 }
 
@@ -1276,7 +1322,7 @@
   gap: 8px;
   margin: 0;
   color: var(--synq-color-muted);
-  font-size: 13px;
+  font-size: var(--synq-text-sm);
   font-weight: 600;
   letter-spacing: 0.08em;
   line-height: 1.3;
@@ -1308,7 +1354,7 @@
 
 :where(.synq-account-panel-username-at) {
   color: var(--synq-color-muted);
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
 }
 
@@ -1321,7 +1367,7 @@
   background: none;
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   outline: none;
 }
 
@@ -1334,7 +1380,7 @@
   background: var(--synq-color-primary);
   color: var(--synq-color-primary-text);
   font: inherit;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
   font-weight: 700;
   cursor: pointer;
 }
@@ -1344,7 +1390,7 @@
   gap: 8px;
   min-height: 24px;
   color: var(--synq-color-muted);
-  font-size: 15px;
+  font-size: var(--synq-text-sm);
 }
 
 :where(.synq-account-panel-chips) {
@@ -1361,7 +1407,7 @@
   background: none;
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 15px;
+  font-size: var(--synq-text-sm);
   font-weight: 600;
   cursor: pointer;
 }
@@ -1372,7 +1418,7 @@
 }
 
 :where(.synq-account-panel-label) {
-  font-size: 15px;
+  font-size: var(--synq-text-sm);
   font-weight: 600;
 }
 
@@ -1386,7 +1432,7 @@
   background: color-mix(in srgb, var(--synq-color-text) 3%, transparent);
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-actions) {
@@ -1409,7 +1455,7 @@
   padding: 0 16px;
   border-radius: 999px;
   font: inherit;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
@@ -1422,7 +1468,7 @@
   border: 0;
   background: var(--synq-color-primary);
   color: var(--synq-color-primary-text);
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 700;
 }
 
@@ -1463,7 +1509,7 @@
 
 :where(.synq-account-panel-nudge) > :where(p) {
   margin: 0;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-rows) {
@@ -1512,7 +1558,7 @@
 }
 
 :where(.synq-account-panel-wallet-name) {
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   overflow-wrap: anywhere;
 }
@@ -1531,7 +1577,7 @@
   border-radius: 999px;
   background: color-mix(in srgb, var(--synq-color-text) 6%, transparent);
   color: var(--synq-color-muted);
-  font-size: 13px;
+  font-size: var(--synq-text-sm);
   font-weight: 600;
   line-height: 1.3;
   white-space: nowrap;
@@ -1546,7 +1592,7 @@
 
 :where(.synq-account-panel-wallet-extra) {
   color: var(--synq-color-muted);
-  font-size: 14px;
+  font-size: var(--synq-text-sm);
 }
 
 :where(.synq-account-panel-wallet-actions) {
@@ -1571,7 +1617,7 @@
   background: none;
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   text-align: left;
   cursor: pointer;
 }
@@ -1605,7 +1651,7 @@
 
 :where(.synq-account-panel-confirm) > :where(p) {
   margin: 0;
-  font-size: 15px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-add) {
@@ -1620,7 +1666,7 @@
   background: none;
   color: var(--synq-color-text);
   font: inherit;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
   font-weight: 600;
   cursor: pointer;
 }
@@ -1692,7 +1738,7 @@
 
 :where(.synq-account-panel-profile-name) {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--synq-text-lg);
   font-weight: 600;
   line-height: 1.25;
   overflow-wrap: anywhere;
@@ -1716,7 +1762,7 @@
 /* The forms an in-place sign-in borrows from <SignInForm>, at the panel's sizes. */
 :where(.synq-account-panel-dialog) :where(.synq-input) {
   min-height: 48px;
-  font-size: 16px;
+  font-size: var(--synq-text-base);
 }
 
 :where(.synq-account-panel-dialog) :where(.synq-button) {
@@ -1724,7 +1770,7 @@
 }
 
 :where(.synq-account-panel-dialog) :where(.synq-label) {
-  font-size: 15px;
+  font-size: var(--synq-text-sm);
 }
 
 :where(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synqauth/react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React hooks and components for Synq.",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@synqauth/js": "0.3.0"
+    "@synqauth/js": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",