@webority/theme 0.3.0 → 0.4.0

package/scss/wui/_typography.scss

@@ -0,0 +1,275 @@
+// Text-scale utilities.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Text-scale utilities (lx-text-*) ──
+.lx-text-xs {
+    font-size: 12px;
+    line-height: 1.4;
+}
+.lx-text-sm {
+    font-size: 13.5px;
+    line-height: 1.5;
+}
+.lx-text-base {
+    font-size: 15px;
+    line-height: 1.5;
+}
+.lx-text-lg {
+    font-size: 17px;
+    line-height: 1.4;
+}
+.lx-text-xl {
+    font-size: 20px;
+    line-height: 1.4;
+}
+.lx-text-2xl {
+    font-size: 24px;
+    line-height: 1.3;
+}
+.lx-text-3xl {
+    font-size: 30px;
+    line-height: 1.2;
+}
+.lx-text-4xl {
+    font-size: 36px;
+    line-height: 1.15;
+}
+
+/* ── Chip (token / tag) ── */
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 4px 10px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.2;
+    vertical-align: middle;
+}
+.chip-sm {
+    gap: 4px;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+}
+.chip-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.chip-ic {
+    display: inline-flex;
+    color: var(--color-text-subtle);
+}
+.chip-avatar {
+    display: inline-flex;
+    width: 18px;
+    height: 18px;
+    margin-left: -2px;
+    border-radius: 999px;
+    overflow: hidden;
+    flex: none;
+}
+.chip-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.chip-body {
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+.chip-clickable {
+    cursor: pointer;
+}
+.chip-clickable:hover {
+    border-color: var(--color-border-strong);
+}
+.chip-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 -4px 0 2px;
+    padding: 2px;
+    border: 0;
+    border-radius: 999px;
+    background: none;
+    color: var(--color-text-subtle);
+    line-height: 0;
+    cursor: pointer;
+}
+.chip-remove:hover {
+    background: color-mix(in srgb, var(--color-text) 8%, transparent);
+    color: var(--color-text);
+}
+.chip.is-disabled {
+    opacity: 0.55;
+    pointer-events: none;
+}
+
+/* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
+.chip.primary {
+    border-color: transparent;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.chip.success {
+    border-color: transparent;
+    background: var(--color-success-soft);
+    color: var(--color-success-active);
+}
+.chip.warning {
+    border-color: transparent;
+    background: var(--color-warning-soft);
+    color: var(--color-warning-active);
+}
+.chip.danger {
+    border-color: transparent;
+    background: var(--color-danger-soft);
+    color: var(--color-danger-active);
+}
+.chip.info {
+    border-color: transparent;
+    background: var(--color-info-soft);
+    color: var(--color-info-active);
+}
+.chip.primary .chip-ic,
+.chip.success .chip-ic,
+.chip.warning .chip-ic,
+.chip.danger .chip-ic,
+.chip.info .chip-ic,
+.chip.primary .chip-remove,
+.chip.success .chip-remove,
+.chip.warning .chip-remove,
+.chip.danger .chip-remove,
+.chip.info .chip-remove {
+    color: currentColor;
+}
+.chip.primary .chip-remove:hover,
+.chip.success .chip-remove:hover,
+.chip.warning .chip-remove:hover,
+.chip.danger .chip-remove:hover,
+.chip.info .chip-remove:hover {
+    background: color-mix(in srgb, currentColor 16%, transparent);
+    color: currentColor;
+}
+
+/* ── Autocomplete (input-first combobox; extends .search-select) ── */
+.search-select-ac {
+    justify-content: flex-start;
+    cursor: text;
+    padding-right: 8px;
+}
+.search-select-ac-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    outline: none;
+}
+.search-select-ac-input::placeholder {
+    color: var(--color-text-subtle);
+}
+.search-select-spinner {
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+    color: var(--color-text-subtle);
+    border-width: 2px;
+}
+.search-select-hint {
+    padding: 10px 12px;
+    color: var(--color-text-subtle);
+    font-size: 0.8125rem;
+}
+
+/* ── Multi-select (chips in the control; check-list dropdown; extends .search-select) ── */
+.search-select-multi {
+    align-items: flex-start;
+    gap: 6px;
+    min-height: 40px;
+    height: auto;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    flex-wrap: nowrap;
+}
+.ms-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+}
+.search-select-multi .search-select-caret {
+    align-self: center;
+}
+.ms-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    flex: none;
+    color: var(--color-primary);
+    opacity: 0;
+}
+.search-select-option[aria-selected='true'] .ms-check {
+    opacity: 1;
+}
+.ms-opt-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.search-select-multi .search-select-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* ── Choice card: image / custom-template variant ── */
+.struct-card-img-card {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0;
+    overflow: hidden;
+}
+.struct-card-media {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    background: var(--color-bg-muted);
+    overflow: hidden;
+}
+.struct-card-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.struct-card-img-card .struct-card-body {
+    padding: 12px 14px;
+}
+.struct-card-img-card .struct-card-check {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}

package/scss/wui/_utilities.scss

@@ -0,0 +1,340 @@
+// Grid utils, info tip, page header, row actions, spinner.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Grid / layout utils ──
+// Responsive card grids (Bootstrap has no grid-template utility).
+.lx-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+.lx-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.lx-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.lx-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+@media (min-width: 768px) {
+    .lx-grid-md-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .lx-grid-md-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .lx-grid-md-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+@media (min-width: 992px) {
+    .lx-grid-lg-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .lx-grid-lg-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .lx-grid-lg-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+}
+.lx-col-span-2 {
+    grid-column: span 2 / span 2;
+}
+.lx-col-span-3 {
+    grid-column: span 3 / span 3;
+}
+.lx-col-span-full {
+    grid-column: 1 / -1;
+}
+
+// ── Info tip ──
+// Inline term help (InfoTip).
+.infotip {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-left: 5px;
+}
+.infotip-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: help;
+    transform: scaleY(-1);
+    transition: color 0.15s;
+}
+.infotip-btn:hover,
+.infotip-btn:focus-visible {
+    color: var(--color-primary);
+    outline: none;
+}
+.infotip-pop {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 220;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 280px;
+    max-width: 78vw;
+    padding: 12px 14px;
+    background: var(--color-surface);
+    border: none;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-overlay);
+    text-align: left;
+    white-space: normal;
+    cursor: default;
+}
+.infotip-pop::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--color-surface);
+}
+// Portalled to <body>: position is set inline (fixed top/left), so drop the
+// anchored offsets and the centering transform, and hide the arrow. z-index
+// sits above the modal backdrop so it shows over the modal, not behind it.
+.infotip-pop.is-portal {
+    bottom: auto;
+    transform: none;
+    z-index: 1600;
+}
+.infotip-pop.is-portal::after {
+    display: none;
+}
+.infotip-term {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+.infotip-full {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text);
+}
+.infotip-def {
+    font-size: 12px;
+    color: var(--color-text-muted);
+    line-height: 1.5;
+}
+
+// ── Page header ──
+.page-header {
+    margin-bottom: 24px;
+}
+.page-title {
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--color-text);
+}
+.page-subtitle {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--color-text-muted);
+    margin-top: 2px;
+}
+.page-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+// Tablet and below: the masthead stops being a single row — the title block and
+// its actions stack, and the actions stretch to the full width rather than
+// crowding the title. Bootstrap's lg tier (991.98px), not an invented breakpoint.
+//
+// Selectors are DOUBLED (`.page-header.page-header`) on purpose. A media query
+// adds no specificity, so a consumer's own single-class rule — written later in
+// the cascade, as a consuming app's stylesheet always is — silently beats the
+// responsive rule and the layout never collapses. Doubling puts these at (0,2,0)
+// so they hold, while still leaving a consumer free to override deliberately.
+@media (max-width: 991.98px) {
+    .page-header.page-header {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+    .page-actions.page-actions {
+        flex-wrap: wrap;
+        width: 100%;
+    }
+    // A two-up field row is too tight for a tablet column.
+    .field-row.field-row,
+    .field-row-3.field-row-3 {
+        grid-template-columns: 1fr;
+    }
+    // A fixed 420px drawer leaves too little of the page visible on a tablet.
+    .drawer.drawer {
+        width: 100vw;
+        max-width: 420px;
+    }
+}
+
+// ── Row-action / icon buttons ──
+.btn-icon {
+    min-height: 0;
+    padding: 8px;
+    border-radius: 999px;
+    corner-shape: round;
+}
+
+// Circular icon buttons in the top bar (minimal dashboard chrome).
+.topbar-icon-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    flex: 0 0 auto;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        background 0.15s ease,
+        color 0.15s ease;
+}
+.topbar-icon-btn:hover {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.topbar-icon-btn.has-badge::after {
+    content: "";
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: var(--color-danger);
+    border: 2px solid var(--color-bg);
+}
+
+// ── Spinner / shimmer ──
+.lx-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2.5px solid var(--color-border);
+    border-top-color: var(--color-primary);
+    border-radius: 999px;
+    animation: lx-spin 0.7s linear infinite;
+    display: inline-block;
+    flex-shrink: 0;
+}
+@keyframes lx-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+// Small (14px) spinner variant.
+.lx-spinner-sm {
+    width: 14px;
+    height: 14px;
+    border-width: 2px;
+}
+// Spinner for the Button loading state.
+.lx-spin {
+    animation: lx-spin 0.8s linear infinite;
+}
+
+// Skeleton shimmer — used ONLY while loading the first data (loading &&
+// empty), to tell "loading first data" apart from "loaded but empty".
+.skeleton {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    background: var(--color-bg-muted);
+    border-radius: var(--radius-sm);
+}
+.skeleton::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+    animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes skeleton-shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+}
+:root[data-theme="dark"] .skeleton::after {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+    .skeleton::after {
+        animation: none;
+    }
+}
+
+// Info callout — a soft branded aside for guidance, distinct from `.alert`.
+// An alert reports a state; a callout explains something and stays.
+.info-callout {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 18px;
+    border: none;
+    // A single accent edge instead of a full border: it reads as an aside rather
+    // than a boxed message.
+    border-left: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
+    border-radius: var(--radius-xl);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--color-primary);
+}
+.info-callout-icon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-primary);
+}
+.info-callout strong {
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+// ============================================================================
+// Inline help glyph — a hint attached to a word rather than to a field label.
+// (For a field label use `.infotip`, which is a real popover button.)
+// ============================================================================
+
+.tip-icon {
+    display: inline-flex;
+    margin-left: 4px;
+    vertical-align: middle;
+    color: var(--color-text-subtle);
+    // `help` rather than `pointer`: the glyph explains, it does not navigate.
+    cursor: help;
+}
+.tip-icon:hover {
+    color: var(--color-primary);
+}