@ambasada/ui 0.8.19 → 0.8.20

package/dist/ambasada-ui.css

@@ -1,4 +1,4 @@
-/* @ambasada/ui 0.8.19: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
+/* @ambasada/ui 0.8.20: fonts, tokens and components in one stylesheet. MIT, CENTYSO. https://ambasada.id */
 /*
  * Inter and JetBrains Mono, self-hosted (variable, SIL Open Font License 1.1: fonts/OFL-*.txt). Latin and
  * Latin Extended, so Romanian ț and ș render. The URLs are relative to this file: bundlers copy the files,
@@ -80,6 +80,11 @@
   --color-warn: #f59e0b; /* hub --color-warn */
   --color-danger: #dc2626; /* red-600: distinct from the brand red so errors never read as branding */
   --color-info: #2563eb; /* hub --color-info */
+  /* Status colours as text. The plain ones are for dots, icons and fills: as words on white or on their own tint
+   * they sit at 3.1 to 4.4:1. These reach AA (4.5:1) on --color-surface and on the matching -soft tint. */
+  --color-success-text: #15803d; /* green-700: 5.0:1 on white, 4.8:1 on success-soft */
+  --color-warn-text: #b45309; /* amber-700: 5.0:1 on white, 4.8:1 on warn-soft */
+  --color-danger-text: #b91c1c; /* red-700: 6.5:1 on white, 5.9:1 on danger-soft */
   --color-success-soft: #ecfdf3; /* tint of success for notices */
   --color-warn-soft: #fff8eb; /* tint of warn for notices */
   --color-danger-soft: #fef2f2; /* tint of danger for notices */
@@ -103,7 +108,7 @@
   --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* hub .native-shell body */
 
   --text-label: 0.6875rem; /* 11px, hub .section-label (mono, uppercase, 0.1em): the mono label, .ui-label */
-  --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows) */
+  --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows): mono uppercase labels only, never sentence text */
   --text-xs: 0.75rem; /* 12px, hub nav links */
   --text-sm: 0.875rem; /* 14px, hub body small / buttons */
   --text-base: 1rem; /* 16px */
@@ -261,8 +266,8 @@
   background: var(--color-accent);
   color: var(--color-on-accent);
   font: inherit;
-  font-size: 0.9375rem;
-  font-weight: var(--weight-medium);
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold); /* white on the brand red is 4:1: 16px semibold keeps it legible */
   line-height: 1.25;
   text-align: center;
   text-decoration: none;
@@ -281,9 +286,12 @@
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
+/* Off reads as off: grey, not a washed-out red that still looks like the action. */
 .ui-button:disabled,
 .ui-button[aria-disabled="true"] {
-  opacity: 0.45;
+  background: var(--color-surface-2);
+  border-color: var(--color-line);
+  color: var(--color-ink-3);
   cursor: default;
   filter: none;
 }
@@ -291,6 +299,7 @@
   background: var(--color-surface);
   color: var(--color-ink);
   border-color: var(--color-line);
+  font-weight: var(--weight-medium); /* the one primary action is the semibold one */
 }
 .ui-button.secondary:hover {
   filter: none;
@@ -361,7 +370,7 @@
   filter: none;
 }
 .ui-row.danger .row-title {
-  color: var(--color-danger);
+  color: var(--color-danger-text);
 }
 .ui-row.muted {
   opacity: 0.55;
@@ -410,7 +419,8 @@
   font-weight: var(--weight-semibold);
   text-align: right;
 }
-.row-right.plus { color: var(--color-success); }
+.row-right.plus { color: var(--color-success-text); }
+.row-right small { font-size: var(--text-xs); font-weight: var(--weight-regular); } /* the unit after a price */
 .row-chev {
   flex: none;
   color: var(--color-ink-3);
@@ -436,9 +446,9 @@
   border-radius: 50%;
   background: currentColor;
 }
-.ui-pill.good { background: var(--color-success-soft); color: var(--color-success); }
-.ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger); }
-.ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn); }
+.ui-pill.good { background: var(--color-success-soft); color: var(--color-success-text); }
+.ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger-text); }
+.ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
 .ui-pill.accent { background: var(--color-accent-soft); color: var(--color-accent-text); }
 .ui-pill.pulse i {
   animation: ui-pulse 1.6s ease-in-out infinite;
@@ -598,8 +608,8 @@ body.ui-sheet-open { overflow: hidden; }
   color: var(--color-ink-3);
   line-height: 1.45;
 }
-.ui-field-hint.bad { color: var(--color-danger); }
-.ui-field-hint.good { color: var(--color-success); }
+.ui-field-hint.bad { color: var(--color-danger-text); }
+.ui-field-hint.good { color: var(--color-success-text); }
 .ui-input {
   display: block;
   width: 100%;
@@ -640,7 +650,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 48px;
+  min-height: 52px;
   border: 1px solid var(--color-line);
   border-radius: var(--radius-md);
   background: var(--color-surface);
@@ -648,7 +658,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
 }
 .ui-stepper button {
   width: 52px;
-  height: 40px;
+  height: var(--tap);
   min-height: 0;
   padding: 0;
   display: grid;
@@ -662,15 +672,15 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
 .ui-stepper button:hover { filter: none; background: var(--color-line); }
 .ui-stepper button:disabled { opacity: 0.45; cursor: default; }
 .ui-stepper-value {
-  font-size: 1.25rem;
+  font-size: var(--text-xl);
   font-weight: var(--weight-semibold);
   font-variant-numeric: tabular-nums;
 }
 .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
 .ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ui-presets button {
-  min-width: 48px;
-  min-height: 36px;
+  min-width: 52px;
+  min-height: var(--tap);
   padding: 4px 14px;
   border-radius: var(--radius-pill);
   background: var(--color-surface);

package/dist/components.css

@@ -87,8 +87,8 @@
   background: var(--color-accent);
   color: var(--color-on-accent);
   font: inherit;
-  font-size: 0.9375rem;
-  font-weight: var(--weight-medium);
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold); /* white on the brand red is 4:1: 16px semibold keeps it legible */
   line-height: 1.25;
   text-align: center;
   text-decoration: none;
@@ -107,9 +107,12 @@
   outline: 2px solid var(--color-accent);
   outline-offset: 2px;
 }
+/* Off reads as off: grey, not a washed-out red that still looks like the action. */
 .ui-button:disabled,
 .ui-button[aria-disabled="true"] {
-  opacity: 0.45;
+  background: var(--color-surface-2);
+  border-color: var(--color-line);
+  color: var(--color-ink-3);
   cursor: default;
   filter: none;
 }
@@ -117,6 +120,7 @@
   background: var(--color-surface);
   color: var(--color-ink);
   border-color: var(--color-line);
+  font-weight: var(--weight-medium); /* the one primary action is the semibold one */
 }
 .ui-button.secondary:hover {
   filter: none;
@@ -187,7 +191,7 @@
   filter: none;
 }
 .ui-row.danger .row-title {
-  color: var(--color-danger);
+  color: var(--color-danger-text);
 }
 .ui-row.muted {
   opacity: 0.55;
@@ -236,7 +240,8 @@
   font-weight: var(--weight-semibold);
   text-align: right;
 }
-.row-right.plus { color: var(--color-success); }
+.row-right.plus { color: var(--color-success-text); }
+.row-right small { font-size: var(--text-xs); font-weight: var(--weight-regular); } /* the unit after a price */
 .row-chev {
   flex: none;
   color: var(--color-ink-3);
@@ -262,9 +267,9 @@
   border-radius: 50%;
   background: currentColor;
 }
-.ui-pill.good { background: var(--color-success-soft); color: var(--color-success); }
-.ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger); }
-.ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn); }
+.ui-pill.good { background: var(--color-success-soft); color: var(--color-success-text); }
+.ui-pill.bad { background: var(--color-danger-soft); color: var(--color-danger-text); }
+.ui-pill.warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
 .ui-pill.accent { background: var(--color-accent-soft); color: var(--color-accent-text); }
 .ui-pill.pulse i {
   animation: ui-pulse 1.6s ease-in-out infinite;
@@ -424,8 +429,8 @@ body.ui-sheet-open { overflow: hidden; }
   color: var(--color-ink-3);
   line-height: 1.45;
 }
-.ui-field-hint.bad { color: var(--color-danger); }
-.ui-field-hint.good { color: var(--color-success); }
+.ui-field-hint.bad { color: var(--color-danger-text); }
+.ui-field-hint.good { color: var(--color-success-text); }
 .ui-input {
   display: block;
   width: 100%;
@@ -466,7 +471,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 48px;
+  min-height: 52px;
   border: 1px solid var(--color-line);
   border-radius: var(--radius-md);
   background: var(--color-surface);
@@ -474,7 +479,7 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
 }
 .ui-stepper button {
   width: 52px;
-  height: 40px;
+  height: var(--tap);
   min-height: 0;
   padding: 0;
   display: grid;
@@ -488,15 +493,15 @@ textarea.ui-input { resize: vertical; min-height: 104px; }
 .ui-stepper button:hover { filter: none; background: var(--color-line); }
 .ui-stepper button:disabled { opacity: 0.45; cursor: default; }
 .ui-stepper-value {
-  font-size: 1.25rem;
+  font-size: var(--text-xl);
   font-weight: var(--weight-semibold);
   font-variant-numeric: tabular-nums;
 }
 .ui-stepper-value small { font-size: var(--text-xs); color: var(--color-ink-3); font-weight: var(--weight-regular); }
 .ui-presets { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ui-presets button {
-  min-width: 48px;
-  min-height: 36px;
+  min-width: 52px;
+  min-height: var(--tap);
   padding: 4px 14px;
   border-radius: var(--radius-pill);
   background: var(--color-surface);

package/dist/tokens.css

@@ -39,6 +39,11 @@
   --color-warn: #f59e0b; /* hub --color-warn */
   --color-danger: #dc2626; /* red-600: distinct from the brand red so errors never read as branding */
   --color-info: #2563eb; /* hub --color-info */
+  /* Status colours as text. The plain ones are for dots, icons and fills: as words on white or on their own tint
+   * they sit at 3.1 to 4.4:1. These reach AA (4.5:1) on --color-surface and on the matching -soft tint. */
+  --color-success-text: #15803d; /* green-700: 5.0:1 on white, 4.8:1 on success-soft */
+  --color-warn-text: #b45309; /* amber-700: 5.0:1 on white, 4.8:1 on warn-soft */
+  --color-danger-text: #b91c1c; /* red-700: 6.5:1 on white, 5.9:1 on danger-soft */
   --color-success-soft: #ecfdf3; /* tint of success for notices */
   --color-warn-soft: #fff8eb; /* tint of warn for notices */
   --color-danger-soft: #fef2f2; /* tint of danger for notices */
@@ -62,7 +67,7 @@
   --font-native: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* hub .native-shell body */
 
   --text-label: 0.6875rem; /* 11px, hub .section-label (mono, uppercase, 0.1em): the mono label, .ui-label */
-  --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows) */
+  --text-micro: 0.625rem; /* 10px, hub card labels ("membership", business card rows): mono uppercase labels only, never sentence text */
   --text-xs: 0.75rem; /* 12px, hub nav links */
   --text-sm: 0.875rem; /* 14px, hub body small / buttons */
   --text-base: 1rem; /* 16px */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ambasada/ui",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "description": "The Ambasada look for mini apps: design tokens (colours, Inter + JetBrains Mono, radii, spacing, safe areas) and a small component set in plain CSS, with optional React wrappers. One stylesheet to <link>.",
   "type": "module",
   "license": "MIT",