@saasicat/ui-vue 0.22.2 → 0.24.0

package/src/pages-standard/sa-theme.css

@@ -1,689 +1,11 @@
-/* SuperAdmin UI theme — CSS variables for the platform pages.
- *
- * Consumer apps can override individual
- * variables via their own `:root` block in the app CSS — like
- * any CSS var override. Class names follow the `sa-` prefix convention,
- * i.e. an app CSS can, for example, re-style `.sa-tenants__title` precisely
- * without touching the platform code.
- *
+/* Moved. The theme now lives in `src/ui/theme/` and is imported as
+ * `@saasicat/ui-vue/theme.css`.
+ *
+ * A global theme in a folder of pages was the wrong address: a reader looking
+ * for "where are the colours decided" had to know that one of nineteen page
+ * files was not a page. This file stays for one release so that existing
+ * `import '@saasicat/ui-vue/sa-theme.css'` lines keep working; it is removed
+ * in 1.0.
  */
 
-:root {
-    --sa-bg-app: #f1f5f9;
-    --sa-bg-surface: #ffffff;
-    --sa-primary: #3f6bff;
-    --sa-primary-soft: rgba(63, 107, 255, 0.08);
-    --sa-primary-softer: rgba(63, 107, 255, 0.04);
-    --sa-primary-border: rgba(63, 107, 255, 0.18);
-    --sa-positive: #047857;
-    --sa-positive-light: #10b981;
-    --sa-positive-soft: rgba(4, 120, 87, 0.1);
-    --sa-negative: #dc2626;
-    --sa-negative-soft: rgba(220, 38, 38, 0.08);
-    --sa-warning: #b45309;
-    --sa-warning-soft: rgba(245, 158, 11, 0.1);
-    --sa-amber: #f59e0b;
-    --sa-amber-light: #fbbf24;
-    --sa-amber-border: rgba(245, 158, 11, 0.3);
-    --sa-heading: #0f172a;
-    --sa-body: #1e293b;
-    --sa-muted: #64748b;
-    --sa-muted-dark: #475569;
-    --sa-border: #e2e8f0;
-    --sa-border-soft: #f1f5f9;
-    --sa-bg-surface-2: #f8fafc;
-    --sa-border-strong: #d1d5db;
-    --sa-muted-light: #94a3b8;
-    --sa-primary-50: #eff6ff;
-    --sa-positive-bg: #ecfdf5;
-    --sa-warning-bg: #fffbeb;
-    --sa-primary-strong: #1d4ed8;
-
-    /* Corner radii, largest to smallest, so the nesting reads as hierarchy:
-     * a section is a bigger block than the cards inside it, a card bigger
-     * than a tile. `--sa-radius-tile` is the single declaration every
-     * statistic tile in the admin surface resolves to. */
-    --sa-radius-hero: 16px;
-    --sa-radius-section: 14px;
-    --sa-radius-card: 12px;
-    --sa-radius-head: 10px;
-    --sa-radius-tile: 10px;
-    --sa-radius-control: 7px;
-    --sa-section-pad: 20px;
-    --sa-radius-field: 8px;
-
-    --sa-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
-    --sa-font-body: 'Inter', system-ui, sans-serif;
-    --sa-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-}
-
-/* ─────────────────────────────────────────────────────────────
- * Shared page chrome — page frame, header strip, section, stat pills, card.
- *
- * These classes are the styling half of the page shell. The structural half is
- * the `AdminPage` / `AdminHero` / `AdminSection` components in
- * `components/admin-page/`, and pages are expected to reach for those rather
- * than write the markup by hand: a component with a required `title` prop
- * cannot be half-adopted the way a class name can.
- *
- * The classes stay public and unprefixed by scoping on purpose, so a consumer
- * app can restyle `.sa-page-head__title` from its own CSS without patching the
- * platform.
- * ───────────────────────────────────────────────────────────── */
-
-/* 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-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-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;
-}
-
-/* The hero reads as a banner rather than as the first paragraph of the page:
- * a tinted, bordered block that separates "which page am I on" from the
- * content below it. Tint and border come from the primary token, so an app
- * that overrides `--sa-primary` re-tints the hero with it. */
-.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-primary-border);
-    border-radius: var(--sa-radius-hero);
-    background: linear-gradient(135deg, var(--sa-primary-soft) 0%, var(--sa-primary-softer) 100%);
-}
-.sa-page-head__title {
-    margin: 0;
-    font-family: var(--sa-font-head);
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.25;
-    color: var(--sa-heading);
-}
-.sa-page-head__sub {
-    margin: 1px 0 0;
-    font-size: 12.5px;
-    line-height: 1.35;
-    color: var(--sa-muted);
-}
-.sa-page-head__actions {
-    margin-left: auto;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-/* 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: 13px;
-    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-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-border-strong);
-    background: var(--sa-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-bg-surface-2);
-}
-
-.sa-btn--primary {
-    background: var(--sa-primary);
-    border-color: var(--sa-primary);
-    color: #fff;
-}
-.sa-btn--primary:hover:not(:disabled) {
-    background: var(--sa-primary-strong);
-    border-color: var(--sa-primary-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: 12px;
-    gap: 5px;
-}
-.sa-btn--ghost {
-    border-color: transparent;
-    background: transparent;
-}
-.sa-btn--ghost:hover:not(:disabled) {
-    background: rgba(15, 23, 42, 0.05);
-}
-.sa-btn--danger {
-    color: var(--sa-negative);
-}
-.sa-btn--danger:hover:not(:disabled) {
-    background: var(--sa-negative-soft);
-}
-.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-positive);
-}
-.sa-btn--positive:hover:not(:disabled) {
-    background: var(--sa-positive-soft);
-}
-
-/* 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. */
-.sa-page .q-card {
-    border-radius: var(--sa-radius-card);
-}
-
-/* Form fields. Quasar's outlined input rounds at 4px, which reads sharper than
- * everything around it; the admin surface settles on 8px, 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 {
-    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-page .q-field--outlined .q-field__control {
-    background: var(--sa-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;
-}
-
-/* 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-bg-surface);
-    border: 1px solid var(--sa-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: 11.5px;
-    font-weight: 600;
-    color: var(--sa-muted);
-    order: 2;
-}
-.sa-kpi__value {
-    font-size: 22px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.05;
-    color: var(--sa-heading);
-    order: 1;
-}
-.sa-kpi__sub {
-    font: 500 10px var(--sa-font-mono);
-    letter-spacing: 0.04em;
-    color: var(--sa-muted);
-    padding-top: 1px;
-    order: 3;
-}
-.sa-kpi__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--sa-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-primary-50);
-    color: var(--sa-primary);
-}
-.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-bg-surface-2);
-    border-color: #cbd5e1;
-}
-.sa-kpi--selected {
-    border-color: var(--sa-heading);
-    box-shadow:
-        0 0 0 1px var(--sa-heading) inset,
-        0 2px 6px rgba(15, 23, 42, 0.06);
-}
-
-/* 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-positive);
-}
-.sa-kpi--warn .sa-kpi__value {
-    color: var(--sa-warning);
-}
-.sa-kpi--danger .sa-kpi__value {
-    color: var(--sa-negative);
-}
-.sa-kpi--info .sa-kpi__value {
-    color: #1d4ed8;
-}
-.sa-kpi--muted .sa-kpi__value {
-    color: var(--sa-muted-dark);
-}
-.sa-kpi--purple .sa-kpi__value {
-    color: #6b21a8;
-}
-
-.sa-kpi--surface.sa-kpi--positive {
-    border-color: #a7f3d0;
-    background: var(--sa-positive-soft);
-}
-.sa-kpi--surface.sa-kpi--warn {
-    border-color: var(--sa-amber-border);
-    background: var(--sa-warning-soft);
-}
-.sa-kpi--surface.sa-kpi--danger {
-    border-color: #fecaca;
-    background: var(--sa-negative-soft);
-}
-.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;
-}
-
-.sa-kpi--selected.sa-kpi--positive {
-    border-color: var(--sa-positive-light);
-    box-shadow:
-        0 0 0 1px var(--sa-positive-light) inset,
-        0 2px 6px rgba(16, 185, 129, 0.1);
-}
-.sa-kpi--selected.sa-kpi--warn {
-    border-color: var(--sa-amber);
-    box-shadow:
-        0 0 0 1px var(--sa-amber) inset,
-        0 2px 6px rgba(245, 158, 11, 0.1);
-}
-.sa-kpi--selected.sa-kpi--danger {
-    border-color: var(--sa-negative);
-    box-shadow:
-        0 0 0 1px var(--sa-negative) inset,
-        0 2px 6px rgba(239, 68, 68, 0.1);
-}
-.sa-kpi--selected.sa-kpi--info {
-    border-color: #3b82f6;
-    box-shadow:
-        0 0 0 1px #3b82f6 inset,
-        0 2px 6px rgba(59, 130, 246, 0.1);
-}
-.sa-kpi--selected.sa-kpi--purple {
-    border-color: #a855f7;
-    box-shadow:
-        0 0 0 1px #a855f7 inset,
-        0 2px 6px rgba(168, 85, 247, 0.1);
-}
-
-/* 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-muted);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-.sa-page-body__state--empty {
-    font-size: 13px;
-}
-
-/* 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;
-}
-/* Section — a labelled block within a page (see AdminSection). It carries the
- * surface now: 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. */
-.sa-section {
-    background: var(--sa-bg-surface);
-    border: 1px solid var(--sa-border);
-    border-radius: var(--sa-radius-section);
-}
-.sa-section__body {
-    padding: var(--sa-section-pad);
-}
-
-/* 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: 17px;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.25;
-    color: var(--sa-heading);
-}
-.sa-section__sub {
-    margin: 1px 0 0;
-    font-size: 12.5px;
-    line-height: 1.35;
-    color: var(--sa-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;
-}
-
-/* Generic card (cards in dashboard/detail sections). */
-.sa-card {
-    background: var(--sa-bg-surface);
-    border: 1px solid var(--sa-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: 14px;
-    font-weight: 700;
-    color: var(--sa-heading);
-    letter-spacing: -0.005em;
-}
-
-/* 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: 12.5px;
-    color: var(--sa-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-border);
-    border-radius: var(--sa-radius-control);
-    background: var(--sa-bg-surface);
-    color: var(--sa-body);
-    font: inherit;
-    cursor: pointer;
-    transition:
-        background 0.12s,
-        border-color 0.12s;
-}
-.sa-paginator__page {
-    font-weight: 600;
-    color: var(--sa-heading);
-    min-width: 96px;
-}
-.sa-paginator__step:hover:not(:disabled),
-.sa-paginator__page:hover:not(:disabled) {
-    background: var(--sa-bg-surface-2);
-    border-color: var(--sa-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-primary);
-    border-radius: var(--sa-radius-control);
-    background: var(--sa-bg-surface);
-    color: var(--sa-heading);
-    font: inherit;
-    font-weight: 600;
-    text-align: center;
-}
-
-/* Lists (see AdminTable). The package shipped no table rules at all until
- * this, which is why nine pages each looked slightly different. */
-.sa-page .q-table thead th {
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--sa-muted);
-    background: var(--sa-bg-surface-2);
-    border-bottom: 1px solid var(--sa-border);
-    padding: 10px 14px;
-    white-space: nowrap;
-}
-.sa-page .q-table tbody td {
-    font-size: 13px;
-    color: var(--sa-body);
-    border-bottom: 1px solid var(--sa-border-soft);
-    padding: 10px 14px;
-}
-.sa-page .q-table tbody tr:last-child td {
-    border-bottom: 0;
-}
-.sa-page .q-table tbody tr:hover td {
-    background: var(--sa-bg-surface-2);
-}
-/* Sorted column: the header carries the state, not just the arrow. */
-.sa-page .q-table thead th.sortable:hover,
-.sa-page .q-table thead th[aria-sort]:not([aria-sort='none']) {
-    color: var(--sa-heading);
-}
-.sa-page .q-table thead th[aria-sort]:not([aria-sort='none']) {
-    background: var(--sa-primary-50);
-}
-.sa-table__actions {
-    white-space: nowrap;
-}
-.sa-table__empty {
-    color: var(--sa-muted);
-}
-
-/* The pager sits below the list, separated by a line that runs the full width
- * of the surface — hence the pull-out by the section's own padding token. */
-.sa-table__foot {
-    margin: 0 calc(-1 * var(--sa-section-pad)) calc(-1 * var(--sa-section-pad));
-    padding: 0 var(--sa-section-pad) 10px;
-    border-top: 1px solid var(--sa-border);
-}
+@import '../ui/theme/index.css';