@saasicat/ui-vue 0.22.2 → 0.23.0

package/src/ui/theme/base.css

@@ -0,0 +1,50 @@
+/* The page canvas and the type baseline. Everything else is a component.
+ *
+ * Nothing here styles a bare element outside `.sa-page`, which is what makes
+ * the whole theme safe to load into an application that has its own design —
+ * including the tenant-facing pages, which are embedded in a consumer's own
+ * app rather than in the admin shell.
+ */
+
+/* The app canvas. It sits on the layout rather than on the page so that the
+ * gutters beside `max-width: 1600px` are painted too — and so a page can be a
+ * transparent frame while sections carry the surfaces. Declared here rather
+ * than on `body`: both known consumer apps load their own stylesheet after
+ * this one, and a `body` rule would lose to them. */
+.sa-admin-layout,
+.sa-admin-content {
+    background: var(--sa-color-bg-app);
+}
+
+/* Page frame — min-height, the page padding and the admin type, in one place
+ * instead of once per page (see AdminPage). No surface of its own.
+ *
+ * The font and text colour belong here because the hosting app's stylesheet
+ * loads after this one: without a rule on the page itself, admin pages would
+ * inherit whatever the consumer sets. Two full-page views used to pin both on
+ * their own root, which is exactly the divergence this prevents. */
+.sa-page {
+    min-height: calc(100vh - 56px);
+    padding: 20px 28px 28px;
+    font-family: var(--sa-font-body);
+    color: var(--sa-color-fg-body);
+}
+
+/* Consumer apps load Quasar, whose element-level h1–h6 rules carry display
+ * sizes and huge line-heights. Neutralised here so a bare heading inside a
+ * page is legible without a class of its own.
+ *
+ * `:where()` keeps this at the specificity of a single class, so any heading
+ * class in the package still wins — this is a baseline, not a verdict. Three
+ * views used to carry their own copy of it, each covering a different subset
+ * of h1–h6. */
+.sa-page :where(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    line-height: 1.2;
+}
+
+/* Border-box for the whole page. Six views declared this for their own
+ * subtree, which is the same rule six times with six different roots. */
+.sa-page * {
+    box-sizing: border-box;
+}

package/src/ui/theme/components/body.css

@@ -0,0 +1,23 @@
+/* Page body — everything below the hero (see AdminBody), including the
+ * loading and empty states the pages used to spell out one by one.
+ *
+ * Inset from the page edge, so the hero frames the page and everything below
+ * sits inside it. The inset lives here rather than on the section, because
+ * AdminStatistics is the other thing allowed at this level and would otherwise
+ * be the only block sticking out.
+ */
+
+.sa-page-body {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.sa-page-body__state {
+    padding: 32px 0;
+    color: var(--sa-color-fg-muted);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.sa-page-body__state--empty {
+    font-size: var(--sa-text-md);
+}

package/src/ui/theme/components/button.css

@@ -0,0 +1,158 @@
+/* One button look across the admin surface, with two ways in.
+ *
+ * `.sa-btn` is for the hand-built buttons — eight files declared the same
+ * bordered pill independently, differing only in which local token they named.
+ *
+ * The Quasar selectors are the second way: any `q-btn` placed in a hero's or a
+ * section's action area adopts the same shape. That is what reaches the buttons
+ * a consumer app puts into those slots — a component could only style what the
+ * platform itself renders, and autohauspro's `#card-actions` button would have
+ * stayed behind in the Quasar look while everything around it changed.
+ *
+ * Colour is left to Quasar on its own buttons: `color="primary"` stays a filled
+ * primary, `flat` becomes the bordered surface below. Only shape and typography
+ * are unified, because those are what read as "a different design".
+ */
+
+.sa-btn,
+.sa-page-head__actions .q-btn,
+.sa-section__actions .q-btn {
+    padding: 8px 14px;
+    min-height: 0;
+    border-radius: var(--sa-radius-control);
+    font-family: var(--sa-font-body);
+    font-size: var(--sa-text-md);
+    font-weight: 500;
+    line-height: 1.3;
+    letter-spacing: 0;
+    text-transform: none;
+}
+
+.sa-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    cursor: pointer;
+    color: var(--sa-color-fg-body);
+    transition:
+        background 0.12s,
+        border-color 0.12s;
+}
+
+/* The default is a bordered surface, not a bare label. */
+.sa-btn,
+.sa-page-head__actions .q-btn--flat,
+.sa-section__actions .q-btn--flat {
+    border: 1px solid var(--sa-color-border-strong);
+    background: var(--sa-color-bg-surface);
+}
+.sa-btn:hover:not(:disabled),
+.sa-page-head__actions .q-btn--flat:hover,
+.sa-section__actions .q-btn--flat:hover {
+    background: var(--sa-color-bg-sunken);
+}
+
+.sa-btn--primary {
+    background: var(--sa-color-accent);
+    border-color: var(--sa-color-accent);
+    color: var(--sa-color-fg-on-accent);
+}
+.sa-btn--primary:hover:not(:disabled) {
+    background: var(--sa-color-accent-strong);
+    border-color: var(--sa-color-accent-strong);
+}
+
+.sa-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Size and intent modifiers, carried over from the families that merged. */
+.sa-btn--sm {
+    padding: 5px 8px;
+    font-size: var(--sa-text-sm);
+    gap: 5px;
+}
+.sa-btn--ghost {
+    border-color: transparent;
+    background: transparent;
+}
+.sa-btn--ghost:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+}
+.sa-btn--danger {
+    color: var(--sa-color-negative);
+}
+.sa-btn--danger:hover:not(:disabled) {
+    background: var(--sa-color-negative-surface);
+}
+.sa-btn--flex {
+    flex: 1;
+}
+
+/* Icon-only — the reload control, which carries no label and therefore needs
+ * an `aria-label` at the call site. */
+.sa-btn--icon {
+    padding: 8px;
+    gap: 0;
+}
+.sa-btn--positive {
+    color: var(--sa-color-positive);
+}
+.sa-btn--positive:hover:not(:disabled) {
+    background: var(--sa-color-positive-surface);
+}
+
+/* The row-action icon — one recipe for the whole admin.
+ *
+ * There were three. `TenantsPage` had this bordered-less square with a muted
+ * icon; `PilotsPage` and `PromoCodesPage` rendered `<q-btn :color="…">`, which
+ * paints Quasar's brand colours and made a promo-code row read as a row of
+ * traffic lights beside a plans row of quiet greys; `EmailHistoryPage` and
+ * `PlatformEmailPage` pinned `color="primary"`.
+ *
+ * The quiet one wins. A row of actions is chrome, not a set of announcements —
+ * the colour belongs on the ONE action that is destructive, which is what the
+ * tone modifiers are for.
+ */
+.sa-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: var(--sa-radius-control);
+    background: transparent;
+    color: var(--sa-color-fg-muted);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.12s;
+}
+.sa-icon-btn:hover:not(:disabled) {
+    background: var(--sa-color-border-soft);
+}
+.sa-icon-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+/* The icon inherits, so a tone below colours the glyph without a second rule. */
+.sa-icon-btn .q-icon {
+    color: inherit;
+}
+
+.sa-icon-btn--negative {
+    color: var(--sa-color-negative);
+}
+.sa-icon-btn--positive {
+    color: var(--sa-color-positive-fg);
+}
+.sa-icon-btn--warning {
+    color: var(--sa-color-warning-fg);
+}
+.sa-icon-btn--primary {
+    color: var(--sa-color-accent);
+}
+.sa-icon-btn--accent {
+    color: var(--sa-color-feature);
+}

package/src/ui/theme/components/card.css

@@ -0,0 +1,48 @@
+/* Cards — the generic block inside dashboard and detail sections, and the
+ * corner correction for Quasar's own card.
+ *
+ * Quasar cards round at 4px, which reads sharper than every surface around
+ * them. One rule so a card inside the admin agrees with the sections and tiles
+ * it sits between, without each page saying so.
+ */
+
+/* Quasar paints its own card: white in light, and `var(--q-dark)` — a neutral
+ * #1d1d1d — as soon as `Dark` is active. That grey sits wrong on a slate page,
+ * so the surface is ours.
+ *
+ * The `.sa-portal` half is not decoration: Quasar teleports every dialog into a
+ * div appended to `<body>`, so a rule prefixed with `.sa-page` never reaches a
+ * dialog's card. `createSuperAdminApp` marks those portals — every portal in the
+ * document, the shell's own and those opened by a page contributed into it,
+ * which is the intent: a page inside the admin shell is admin UI. An app that
+ * never calls `createSuperAdminApp` is untouched. */
+.sa-page .q-card,
+.sa-portal .q-card {
+    border-radius: var(--sa-radius-card);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+
+/* A dropdown is teleported like a dialog, and QMenu adds `q-dark` to itself in
+ * dark mode (QMenu.js), which resolves to the same neutral grey. Without this
+ * the select in the paginator under every table opens a #1d1d1d panel over a
+ * slate page — the reported defect, one portal type further along. */
+.sa-portal .q-menu {
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+}
+
+.sa-card {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-card);
+    padding: 16px 18px;
+}
+.sa-card__title {
+    margin: 0 0 12px;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-lg);
+    font-weight: 700;
+    color: var(--sa-color-fg-heading);
+    letter-spacing: -0.005em;
+}

package/src/ui/theme/components/field.css

@@ -0,0 +1,38 @@
+/* Form fields and the filter row.
+ *
+ * Quasar's outlined input rounds at 4px, which reads sharper than everything
+ * around it; the admin surface settles on `--sa-radius-field`, the radius the
+ * hand-built search boxes already used. Declared on the field control so it
+ * covers inputs, selects and date pickers alike.
+ */
+
+.sa-page .q-field--outlined .q-field__control,
+.sa-page .q-field--outlined .q-field__control:before,
+.sa-page .q-field--outlined .q-field__control:after,
+.sa-portal .q-field--outlined .q-field__control,
+.sa-portal .q-field--outlined .q-field__control:before,
+.sa-portal .q-field--outlined .q-field__control:after {
+    border-radius: var(--sa-radius-field);
+}
+/* Quasar's outlined control is transparent, which reads as a hole wherever it
+ * sits on a section surface rather than on the page canvas.
+ *
+ * `.sa-portal` because a dialog is teleported out of `.sa-page` — this
+ * correction had silently never applied to a field inside a dialog. */
+.sa-page .q-field--outlined .q-field__control,
+.sa-portal .q-field--outlined .q-field__control {
+    background: var(--sa-color-bg-surface);
+}
+
+/* The filter row (see AdminFilters). Declared once so no page writes its own
+ * flex rule — which is how five pages ended up with five filter bars. */
+.sa-filters .sa-filters__body {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+.sa-filters .sa-filters__body > * {
+    flex: 1;
+    min-width: 200px;
+}

package/src/ui/theme/components/hero.css

@@ -0,0 +1,46 @@
+/* The page hero — the banner that answers "which page am I on" (AdminHero).
+ *
+ * A tinted, bordered block rather than a first paragraph, so identity is
+ * visually separate from content. Tint and border come from the accent role,
+ * which reads the host application's brand: an app that sets `$primary` gets
+ * its own hero without touching this file.
+ */
+
+.sa-page-head {
+    /* Top-aligned, so the controls sit level with the title rather than
+     * drifting down with the subtitle's height. */
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    padding: 13px 22px 15px;
+    border: 1px solid var(--sa-color-accent-border);
+    border-radius: var(--sa-radius-hero);
+    background: linear-gradient(
+        135deg,
+        var(--sa-color-accent-surface) 0%,
+        var(--sa-color-accent-surface-soft) 100%
+    );
+}
+.sa-page-head__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-2xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    color: var(--sa-color-fg-heading);
+}
+.sa-page-head__sub {
+    margin: 1px 0 0;
+    font-size: var(--sa-text-md);
+    line-height: 1.35;
+    color: var(--sa-color-fg-muted);
+}
+.sa-page-head__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}

package/src/ui/theme/components/paginator.css

@@ -0,0 +1,63 @@
+/* The pager below a list (see AdminPaginator). Right-aligned, one rule, so a
+ * list contributes its counts and nothing about where paging sits.
+ */
+
+.sa-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 0 0;
+    font-size: var(--sa-text-md);
+    color: var(--sa-color-fg-muted);
+}
+.sa-paginator__size-label {
+    font-weight: 500;
+}
+.sa-paginator__select {
+    min-width: 92px;
+}
+.sa-paginator__step,
+.sa-paginator__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-control);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-body);
+    font: inherit;
+    cursor: pointer;
+    transition:
+        background 0.12s,
+        border-color 0.12s;
+}
+.sa-paginator__page {
+    font-weight: 600;
+    color: var(--sa-color-fg-heading);
+    min-width: 96px;
+}
+.sa-paginator__step:hover:not(:disabled),
+.sa-paginator__page:hover:not(:disabled) {
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
+}
+.sa-paginator__step:disabled,
+.sa-paginator__page:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.sa-paginator__input {
+    min-width: 96px;
+    min-height: 30px;
+    padding: 0 8px;
+    border: 1px solid var(--sa-color-accent);
+    border-radius: var(--sa-radius-control);
+    background: var(--sa-color-bg-surface);
+    color: var(--sa-color-fg-heading);
+    font: inherit;
+    font-weight: 600;
+    text-align: center;
+}

package/src/ui/theme/components/section.css

@@ -0,0 +1,67 @@
+/* Section — a labelled block within a page (see AdminSection). It carries the
+ * surface: the page frame is transparent, so what a reader sees as "a block of
+ * this page" is exactly one section. A section that needs an inner card still
+ * adds `.sa-card`; a section IS one, so the two do not stack.
+ */
+
+/* Rhythm only for sections sitting directly in the page flow. Deliberately a
+ * child selector: sections placed inside a grid or flex container get their
+ * spacing from that container, and a blanket margin would fight it. */
+.sa-page > .sa-section,
+.sa-page-body > .sa-section {
+    margin-bottom: 16px;
+}
+.sa-page > .sa-section:last-child,
+.sa-page-body > .sa-section:last-child {
+    margin-bottom: 0;
+}
+
+.sa-section {
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-section);
+}
+.sa-section__body {
+    padding: var(--sa-pad-section);
+}
+
+/* The head is the hero's block one level down: same typography, same 22px
+ * inset — so a section title sits exactly under the page title — but no tinted
+ * box of its own. The section already is a surface; a box inside it would read
+ * as a panel within a panel.
+ *
+ * The size steps down because the level does. Everything else is the hero's. */
+.sa-section__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 18px 22px 0;
+}
+.sa-section__title {
+    margin: 0;
+    font-family: var(--sa-font-head);
+    font-size: var(--sa-text-xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+    color: var(--sa-color-fg-heading);
+}
+.sa-section__sub {
+    margin: 1px 0 0;
+    font-size: var(--sa-text-md);
+    line-height: 1.35;
+    color: var(--sa-color-fg-muted);
+}
+.sa-section__actions {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* Key-value grid — the layout `KvBlock` is meant to sit in. */
+.sa-kv-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}

package/src/ui/theme/components/statistics.css

@@ -0,0 +1,189 @@
+/* Statistics — one tile look for the whole admin surface (see AdminStatistics
+ * and AdminKpi). Seven near-copies preceded this; two of them were byte
+ * identical. Every radius here resolves to `--sa-radius-tile`, which is the
+ * single place a tile's corner is decided.
+ *
+ * Two arrangements, because the tiles serve two jobs: `grid` for informational
+ * rows that should share a baseline, `strip` for the clickable filter pills
+ * that wrap along a toolbar.
+ */
+
+.sa-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    /* Kept in step with GAP_PX in AdminStatistics, which subtracts the gap
+     * total when it caps the track count. */
+    gap: 10px;
+}
+
+.sa-kpi {
+    display: flex;
+    align-items: stretch;
+    gap: 12px;
+    background: var(--sa-color-bg-surface);
+    border: 1px solid var(--sa-color-border);
+    border-radius: var(--sa-radius-tile);
+    padding: 10px 14px 9px;
+    font: inherit;
+    color: inherit;
+    text-align: left;
+}
+/* The figure column. It carries the stacking so the tile itself can put an
+ * icon beside it without a second set of rules. */
+.sa-kpi__text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+/* Subs line up across a row rather than floating under uneven values. */
+.sa-stats .sa-kpi__sub {
+    margin-top: auto;
+}
+
+.sa-kpi__label {
+    font-size: var(--sa-text-sm);
+    font-weight: 600;
+    color: var(--sa-color-fg-muted);
+    order: 2;
+}
+.sa-kpi__value {
+    font-size: var(--sa-text-2xl);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.05;
+    color: var(--sa-color-fg-heading);
+    order: 1;
+}
+.sa-kpi__sub {
+    font: 500 var(--sa-text-2xs) var(--sa-font-mono);
+    letter-spacing: 0.04em;
+    color: var(--sa-color-fg-muted);
+    padding-top: 1px;
+    order: 3;
+}
+.sa-kpi__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--sa-color-fg-muted);
+}
+
+/* Inline tiles: the icon leads in a tinted square and the label sits above the
+ * figure, for rows where the icon carries the identity of the number. */
+.sa-kpi--inline {
+    align-items: center;
+    padding: 12px 14px;
+}
+.sa-kpi--inline .sa-kpi__icon {
+    width: 34px;
+    height: 34px;
+    flex: none;
+    border-radius: var(--sa-radius-tile);
+    background: var(--sa-color-accent-surface-strong);
+    color: var(--sa-color-accent);
+}
+.sa-kpi--inline .sa-kpi__label {
+    order: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.sa-kpi--inline .sa-kpi__value {
+    order: 2;
+}
+
+/* Interactive tiles — rendered as <button> by AdminKpi when it has an action. */
+.sa-kpi--action {
+    cursor: pointer;
+    transition:
+        border-color 0.12s,
+        background 0.12s,
+        box-shadow 0.12s;
+}
+.sa-kpi--action:hover {
+    background: var(--sa-color-bg-sunken);
+    border-color: var(--sa-color-border-strong);
+}
+.sa-kpi--selected {
+    border-color: var(--sa-color-fg-heading);
+    box-shadow:
+        0 0 0 1px var(--sa-color-fg-heading) inset,
+        var(--sa-shadow-2);
+}
+
+/* Tone. By default only the value takes the colour; `--surface` tints the
+ * whole tile, which is what the discovery and draft tiles need to read as a
+ * state rather than as a number. */
+.sa-kpi--positive .sa-kpi__value {
+    color: var(--sa-color-positive);
+}
+.sa-kpi--warn .sa-kpi__value {
+    color: var(--sa-color-warning);
+}
+.sa-kpi--danger .sa-kpi__value {
+    color: var(--sa-color-negative);
+}
+.sa-kpi--info .sa-kpi__value {
+    color: var(--sa-color-info-fg);
+}
+.sa-kpi--muted .sa-kpi__value {
+    color: var(--sa-color-fg-secondary);
+}
+.sa-kpi--purple .sa-kpi__value {
+    color: var(--sa-color-feature-fg);
+}
+
+.sa-kpi--surface.sa-kpi--positive {
+    border-color: var(--sa-color-positive-border);
+    background: var(--sa-color-positive-surface);
+}
+.sa-kpi--surface.sa-kpi--warn {
+    border-color: var(--sa-color-warning-border);
+    background: var(--sa-color-warning-surface);
+}
+.sa-kpi--surface.sa-kpi--danger {
+    border-color: var(--sa-color-negative-border);
+    background: var(--sa-color-negative-surface);
+}
+.sa-kpi--surface.sa-kpi--positive .sa-kpi__label,
+.sa-kpi--surface.sa-kpi--warn .sa-kpi__label,
+.sa-kpi--surface.sa-kpi--danger .sa-kpi__label {
+    color: inherit;
+}
+
+/* Selected tiles keep the tone in the outline and take the neutral elevation.
+ * Five tinted shadows preceded this — one per tone, each a different rgba() —
+ * and at 6% alpha under a 1px outline none of them was distinguishable from
+ * the others. The outline is what carries the state. */
+.sa-kpi--selected.sa-kpi--positive {
+    border-color: var(--sa-color-positive-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-positive-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--warn {
+    border-color: var(--sa-color-warning-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-warning-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--danger {
+    border-color: var(--sa-color-negative);
+    box-shadow:
+        0 0 0 1px var(--sa-color-negative) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--info {
+    border-color: var(--sa-color-info-strong);
+    box-shadow:
+        0 0 0 1px var(--sa-color-info-strong) inset,
+        var(--sa-shadow-2);
+}
+.sa-kpi--selected.sa-kpi--purple {
+    border-color: var(--sa-color-feature);
+    box-shadow:
+        0 0 0 1px var(--sa-color-feature) inset,
+        var(--sa-shadow-2);
+}