@webority/theme 0.7.4 → 0.7.6

package/scss/wui/_utilities.scss

@@ -76,10 +76,13 @@
     transform: scaleY(-1);
     transition: color 0.15s;
 }
-.infotip-btn:hover,
+.infotip-btn:hover {
+    color: var(--color-primary);
+}
 .infotip-btn:focus-visible {
     color: var(--color-primary);
-    outline: none;
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
 }
 .infotip-pop {
     position: absolute;
@@ -141,9 +144,91 @@
 }
 
 // ── Page header ──
+// `.page-header` stacks an optional breadcrumbs row above `.page-header-bar` — the
+// flex row that holds the title block on the left and the page actions on the right.
 .page-header {
     margin-bottom: 24px;
 }
+.page-header-bar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px;
+}
+// Left block: an optional leading icon tile + the title stack, kept together.
+.page-header-lead {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+}
+// A breadcrumbs row above the masthead row.
+.page-breadcrumbs {
+    margin-bottom: 10px;
+}
+// Leading icon tile — tinted by `tone` (default primary), matching the modal head icon.
+.page-header-icon {
+    flex: none;
+    display: inline-grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.page-header.tone-success .page-header-icon {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-header-icon {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-header-icon {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-header-icon {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.page-header-titles {
+    min-width: 0;
+}
+// Eyebrow — a small kicker label above the title (a section / category marker).
+.page-eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: 3px;
+}
+.page-header.tone-success .page-eyebrow {
+    color: var(--color-success-text);
+}
+.page-header.tone-warning .page-eyebrow {
+    color: var(--color-warning-text);
+}
+.page-header.tone-danger .page-eyebrow {
+    color: var(--color-danger-text);
+}
+.page-header.tone-info .page-eyebrow {
+    color: var(--color-info-text);
+}
+// Title + an optional inline status pill, on one baseline.
+.page-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+.page-status {
+    display: inline-flex;
+    align-items: center;
+}
 .page-title {
     font-size: 24px;
     font-weight: 600;
@@ -162,17 +247,67 @@
     align-items: center;
 }
 
+// ── Size scale ── (`size`): the title and the block's rhythm scale together.
+.page-header-sm {
+    margin-bottom: 16px;
+}
+.page-header-sm .page-title {
+    font-size: 20px;
+}
+.page-header-sm .page-header-icon {
+    width: 34px;
+    height: 34px;
+}
+.page-header-lg {
+    margin-bottom: 32px;
+}
+.page-header-lg .page-title {
+    font-size: 30px;
+}
+.page-header-lg .page-header-icon {
+    width: 48px;
+    height: 48px;
+}
+
+// ── Centre alignment ── (`align="center"`): for empty-state and wizard mastheads.
+.page-header-center .page-header-bar {
+    justify-content: center;
+    text-align: center;
+}
+.page-header-center .page-header-lead {
+    flex-direction: column;
+    align-items: center;
+}
+.page-header-center .page-titlebar {
+    justify-content: center;
+}
+
+// ── Divider ── (`divider`): a hairline rule under the masthead.
+.page-header-divider {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 16px;
+}
+
+// ── Sticky ── (`sticky`): pins the masthead to the top of its scroll container.
+.page-header-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: var(--color-surface);
+    padding-top: 12px;
+}
+
 // 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
+// Selectors are DOUBLED (`.page-header-bar.page-header-bar`) 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 {
+    .page-header-bar.page-header-bar {
         flex-direction: column;
         align-items: stretch;
         gap: 12px;
@@ -261,6 +396,118 @@
     display: inline-block;
 }
 
+// Page/system-level announcement bar (AppBanner / <app-banner>). Full-width and persistent —
+// distinct from an inline .alert or a transient toast. Tones reuse the shared soft/text ramp.
+.wui-banner {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 20px;
+    font-size: 14px;
+    line-height: 1.4;
+}
+.wui-banner-icon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+}
+.wui-banner-body {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.wui-banner-dismiss {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    border-radius: var(--radius-sm);
+}
+.wui-banner-dismiss:hover {
+    opacity: 1;
+}
+.wui-banner-dismiss:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+.wui-banner-info {
+    background: var(--color-info-soft);
+    color: var(--color-info-text);
+}
+.wui-banner-success {
+    background: var(--color-success-soft);
+    color: var(--color-success-text);
+}
+.wui-banner-warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning-text);
+}
+.wui-banner-danger {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-text);
+}
+.wui-banner-neutral {
+    background: var(--color-bg-subtle);
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-border);
+}
+
+// Determinate progress-bar fill tones (AppProgress / AppMeter / <app-progress>) — the fill sits
+// in Bootstrap's .progress track; only the bar colour is brand-toned.
+//
+// success + danger use the DEEPENED -strong fills, not the mid tones: when showLabel is set the
+// bar carries Bootstrap's WHITE label text, and white on the mid --wui-success (#17C653) /
+// --wui-danger (#F8285A) fails AA (2.78:1 / 3.86:1). The -strong fills clear it (both ~5.8:1),
+// the same trick btn-danger uses. info/warning/neutral stay on their mid tones (info/neutral
+// pass with white; warning is not shown with a white label).
+.wui-progress-info {
+    background-color: var(--color-info);
+}
+.wui-progress-success {
+    background-color: var(--wui-success-strong);
+}
+.wui-progress-warning {
+    background-color: var(--color-warning);
+}
+.wui-progress-danger {
+    background-color: var(--wui-danger-strong);
+}
+.wui-progress-neutral {
+    background-color: var(--color-text-subtle);
+}
+// Thin bar for inline / table use.
+.progress.progress-sm {
+    height: 4px;
+}
+// Indeterminate "working…" sweep — a partial segment that travels the track (the bar carries
+// no width style in this mode, so the width + motion come from here).
+.wui-progress-indeterminate {
+    width: 40%;
+    animation: wui-progress-indeterminate 1.1s ease-in-out infinite;
+}
+@keyframes wui-progress-indeterminate {
+    0% {
+        margin-left: -40%;
+    }
+    100% {
+        margin-left: 100%;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    // No sweep for reduced-motion users — settle to a static full bar.
+    .wui-progress-indeterminate {
+        margin-left: 0;
+        width: 100%;
+        animation: none;
+    }
+}
+
 // ── Spinner / shimmer ──
 .wui-spinner {
     width: 18px;