@webority/theme 0.6.13 → 0.7.1

package/scss/wui/_overlays.scss

@@ -1,3 +1,4 @@
+// Component classes use the .wui-* prefix.
 // Modal, confirm dialog.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
@@ -6,18 +7,18 @@
 // here may be overridden by a later partial. Never reorder the imports.
 
 // ── Modal ──
-// Chrome stays on `.lx-modal-*`. The shell is react-bootstrap <Modal>:
-//   .modal.lx-modal-shell          ← className (layout container)
-//   .modal-backdrop.lx-modal-dim   ← backdropClassName (dim only)
-//   .modal-dialog.lx-rb-dialog     ← dialogClassName
-//   .modal-content.lx-modal        ← contentClassName (the card)
+// Chrome stays on `.wui-modal-*`. The shell is react-bootstrap <Modal>:
+//   .modal.wui-modal-shell          ← className (layout container)
+//   .modal-backdrop.wui-modal-dim   ← backdropClassName (dim only)
+//   .modal-dialog.wui-rb-dialog     ← dialogClassName
+//   .modal-content.wui-modal        ← contentClassName (the card)
 // Do NOT put layout on backdropClassName — that targets a sibling, not
 // .modal.
-.modal-backdrop.lx-modal-dim {
+.modal-backdrop.wui-modal-dim {
     background: rgba(15, 23, 42, 0.45);
     z-index: 1500;
 }
-.modal.lx-modal-shell {
+.modal.wui-modal-shell {
     --bs-modal-bg: transparent;
     align-items: center;
     justify-content: center;
@@ -36,11 +37,11 @@
 // react-bootstrap alike), which is what this keys on — it covers the whole opening
 // transition, not just the settled `.show` state. Specificity (0,3,0) beats `.modal`,
 // so no !important is needed.
-.modal.lx-modal-shell[style*="display: block"] {
+.modal.wui-modal-shell[style*="display: block"] {
     display: flex;
 }
-// RB dialog shell: no Bootstrap max-width/margin so `.lx-modal` owns sizing.
-.modal.lx-modal-shell .modal-dialog.lx-rb-dialog {
+// RB dialog shell: no Bootstrap max-width/margin so `.wui-modal` owns sizing.
+.modal.wui-modal-shell .modal-dialog.wui-rb-dialog {
     margin: 0;
     max-width: none;
     width: auto;
@@ -49,7 +50,7 @@
     align-items: center;
     justify-content: center;
 }
-.modal.lx-modal-shell .modal-dialog.lx-rb-dialog .modal-content {
+.modal.wui-modal-shell .modal-dialog.wui-rb-dialog .modal-content {
     pointer-events: auto;
     border: none;
     // Lift off the dim backdrop: a hairline ring defines the edge (carries
@@ -60,44 +61,44 @@
         var(--shadow-overlay-lg);
     background: var(--color-surface);
 }
-// `--lx-modal-max-width` is how a caller sets an explicit width. It is set on the
+// `--wui-modal-max-width` is how a caller sets an explicit width. It is set on the
 // `.modal` shell by BOTH surfaces and inherits down to the card, because the card is
 // the element the width has to land on: `.modal-dialog` here is `width: auto`, so a
-// max-width there does nothing while `.lx-modal`'s own 440px still clamps the card.
+// max-width there does nothing while `.wui-modal`'s own 440px still clamps the card.
 // React used to write the value straight onto `.modal-content` from JS and Razor put
 // it on `.modal-dialog`, so the same `maxWidth="800"` produced two different dialogs.
-.lx-modal {
+.wui-modal {
     background: var(--color-surface);
     border-radius: var(--radius-xl);
     corner-shape: squircle;
     border: none;
     width: 100%;
-    max-width: var(--lx-modal-max-width, 440px);
+    max-width: var(--wui-modal-max-width, 440px);
     max-height: calc(100vh - 40px);
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
-.lx-modal-wide {
-    max-width: var(--lx-modal-max-width, 1240px);
+.wui-modal-wide {
+    max-width: var(--wui-modal-max-width, 1240px);
 }
 
 // Side drawer — the dialog docks to the right edge at 30% of the viewport
 // and slides in, instead of sitting centred. Same chrome, different
 // geometry.
-.modal.lx-modal-shell.is-side {
+.modal.wui-modal-shell.is-side {
     align-items: stretch;
     justify-content: flex-end;
     padding: 0;
 }
-.modal.lx-modal-shell.is-side .modal-dialog.lx-rb-dialog {
+.modal.wui-modal-shell.is-side .modal-dialog.wui-rb-dialog {
     height: 100%;
     width: auto;
     max-width: none;
     align-items: stretch;
     justify-content: flex-end;
 }
-.lx-modal-side {
+.wui-modal-side {
     width: 30vw;
     min-width: 420px;
     max-width: none;
@@ -105,19 +106,19 @@
     height: 100vh;
     border-radius: 0;
     corner-shape: normal;
-    animation: lx-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+    animation: wui-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
 }
 @media (max-width: 991.98px) {
-    .lx-modal-side {
+    .wui-modal-side {
         width: 70vw;
     }
 }
 @media (max-width: 575.98px) {
-    .lx-modal-side {
+    .wui-modal-side {
         width: 100vw;
     }
 }
-@keyframes lx-drawer-in {
+@keyframes wui-drawer-in {
     from {
         transform: translateX(100%);
     }
@@ -126,11 +127,11 @@
     }
 }
 @media (prefers-reduced-motion: reduce) {
-    .lx-modal-side {
+    .wui-modal-side {
         animation: none;
     }
 }
-.lx-modal-header {
+.wui-modal-header {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -139,7 +140,7 @@
     padding: 16px 20px;
     border-bottom: 1px solid var(--color-border);
 }
-.lx-modal-body {
+.wui-modal-body {
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
@@ -150,38 +151,38 @@
     scrollbar-color: var(--color-border-strong) transparent;
     padding: 20px 22px 24px;
 }
-.lx-modal-body::-webkit-scrollbar {
+.wui-modal-body::-webkit-scrollbar {
     width: 8px;
 }
-.lx-modal-body::-webkit-scrollbar-track {
+.wui-modal-body::-webkit-scrollbar-track {
     background: transparent;
 }
-.lx-modal-body::-webkit-scrollbar-thumb {
+.wui-modal-body::-webkit-scrollbar-thumb {
     background: transparent;
     border-radius: 999px;
     border: 2px solid transparent;
     background-clip: padding-box;
 }
-.lx-modal-body:hover::-webkit-scrollbar-thumb {
+.wui-modal-body:hover::-webkit-scrollbar-thumb {
     background: var(--color-border-strong);
     background-clip: padding-box;
 }
 @media (prefers-reduced-motion: reduce) {
-    .lx-modal-body {
+    .wui-modal-body {
         scroll-behavior: auto;
     }
 }
 // Modal heading group: optional contextual (Bulk) icon tile + title/subtitle.
-.lx-modal-heading {
+.wui-modal-heading {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: 0;
 }
-.lx-modal-headtext {
+.wui-modal-headtext {
     min-width: 0;
 }
-.lx-modal-headicon {
+.wui-modal-headicon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -196,46 +197,46 @@
 
 // Break long unbroken names so they wrap within the heading instead of
 // running under the close button.
-.lx-modal-title {
+.wui-modal-title {
     font-size: 20px;
     font-weight: 600;
     color: var(--color-text);
     overflow-wrap: anywhere;
 }
-.lx-modal-subtitle {
+.wui-modal-subtitle {
     margin-top: 1px;
     font-size: 12px;
     font-weight: 400;
     color: var(--color-text-muted);
     overflow-wrap: anywhere;
 }
-.lx-form-section {
+.wui-form-section {
     margin-top: 24px;
 }
-.lx-form-section:first-child {
+.wui-form-section:first-child {
     margin-top: 0;
 }
 // Stretch controls to fill the column even though .field aligns to
 // flex-start.
-.lx-modal-body .field > .input,
-.lx-modal-body .field > .search-select,
-.lx-modal-body .field > .input-date-wrap,
-.lx-modal-body .field > .datepicker,
-.lx-modal-body .field > .phone-input-wrap,
-.lx-modal-body .field > .field-error {
+.wui-modal-body .field > .input,
+.wui-modal-body .field > .search-select,
+.wui-modal-body .field > .input-date-wrap,
+.wui-modal-body .field > .datepicker,
+.wui-modal-body .field > .phone-input-wrap,
+.wui-modal-body .field > .field-error {
     align-self: stretch;
 }
-.lx-form-section-head {
+.wui-form-section-head {
     margin-bottom: 16px;
 }
-.lx-form-section-title {
+.wui-form-section-title {
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.04em;
     color: var(--color-text-subtle);
 }
-.lx-modal-footer {
+.wui-modal-footer {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -245,10 +246,11 @@
     border-top: 1px solid var(--color-border);
 }
 
-// Modal close — a squircle at rest that morphs into a circle on hover while
-// taking a danger tint, so dismissing reads as the destructive-ish gesture
-// it is. Slower on the way in than the way out.
-.lx-modal-close {
+// Modal close — a steady rounded-square (squircle) that takes a danger tint on
+// hover, so dismissing reads as the destructive-ish gesture it is. The corner is
+// fixed across states: only the tint animates, so the button never morphs into a
+// circle. Slower on the way in than the way out.
+.wui-modal-close {
     margin-left: auto;
     display: grid;
     place-items: center;
@@ -261,32 +263,26 @@
     line-height: 1;
     background: var(--color-bg-subtle);
     color: var(--color-text-muted);
-    border-radius: 999px;
+    border-radius: var(--radius-lg);
     corner-shape: squircle;
     transition:
         background 180ms cubic-bezier(0.4, 0, 0.2, 1),
-        color 180ms cubic-bezier(0.4, 0, 0.2, 1),
-        corner-shape 180ms cubic-bezier(0.4, 0, 0.2, 1);
+        color 180ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.lx-modal-close:hover {
+.wui-modal-close:hover {
     background: var(--color-danger-soft);
     color: var(--color-danger-text);
-    corner-shape: round;
     transition:
         background 280ms cubic-bezier(0.16, 1, 0.3, 1),
-        color 280ms cubic-bezier(0.16, 1, 0.3, 1),
-        corner-shape 280ms cubic-bezier(0.16, 1, 0.3, 1);
+        color 280ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.lx-modal-close:focus-visible {
+.wui-modal-close:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-// The shape morph is decorative; hold the colour cue for reduced-motion
-// users.
 @media (prefers-reduced-motion: reduce) {
-    .lx-modal-close,
-    .lx-modal-close:hover {
-        corner-shape: squircle;
+    .wui-modal-close,
+    .wui-modal-close:hover {
         transition:
             background 1ms linear,
             color 1ms linear;
@@ -300,44 +296,44 @@
 // The confirm card's width belongs to the theme, not to every caller passing
 // maxWidth={440}. Both surfaces used to declare it and Razor's landed on the wrong
 // element, so the dialogs were different widths.
-.lx-confirm {
-    max-width: var(--lx-modal-max-width, 440px);
+.wui-confirm {
+    max-width: var(--wui-modal-max-width, 440px);
 }
-.lx-confirm-content {
+.wui-confirm-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 16px 12px 6px;
 }
-.lx-confirm-icon {
+.wui-confirm-icon {
     line-height: 0;
     margin-bottom: 22px;
 }
-.lx-confirm-title {
+.wui-confirm-title {
     margin: 0 0 10px;
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.01em;
     color: var(--color-text);
 }
-.lx-confirm-msg {
+.wui-confirm-msg {
     margin: 0;
     font-size: 15px;
     line-height: 1.55;
     color: var(--color-text-muted);
     max-width: 40ch;
 }
-.lx-confirm-actions {
+.wui-confirm-actions {
     display: flex;
     gap: 12px;
     width: 100%;
 }
-.lx-modal-footer:has(.lx-confirm-actions) {
+.wui-modal-footer:has(.wui-confirm-actions) {
     border-top: none;
     padding-top: 0;
 }
-.lx-confirm-actions .btn {
+.wui-confirm-actions .btn {
     flex: 1;
     min-height: var(--wui-control-height);
     height: var(--wui-control-height);

package/scss/wui/_typography.scss

@@ -1,3 +1,4 @@
+// Component classes use the .wui-* prefix.
 // Text-scale utilities.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
@@ -5,36 +6,36 @@
 // 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 {
+// ── Text-scale utilities (wui-text-*) ──
+.wui-text-xs {
     font-size: 12px;
     line-height: 1.4;
 }
-.lx-text-sm {
+.wui-text-sm {
     font-size: 13.5px;
     line-height: 1.5;
 }
-.lx-text-base {
+.wui-text-base {
     font-size: 15px;
     line-height: 1.5;
 }
-.lx-text-lg {
+.wui-text-lg {
     font-size: 17px;
     line-height: 1.4;
 }
-.lx-text-xl {
+.wui-text-xl {
     font-size: 20px;
     line-height: 1.4;
 }
-.lx-text-2xl {
+.wui-text-2xl {
     font-size: 24px;
     line-height: 1.3;
 }
-.lx-text-3xl {
+.wui-text-3xl {
     font-size: 30px;
     line-height: 1.2;
 }
-.lx-text-4xl {
+.wui-text-4xl {
     font-size: 36px;
     line-height: 1.15;
 }

package/scss/wui/_utilities.scss

@@ -1,3 +1,4 @@
+// Component classes use the .wui-* prefix.
 // Grid utils, info tip, page header, row actions, spinner.
 //
 // Part of the wui-components layer — see _wui-components.scss for the whole
@@ -7,48 +8,48 @@
 
 // ── Grid / layout utils ──
 // Responsive card grids (Bootstrap has no grid-template utility).
-.lx-grid {
+.wui-grid {
     display: grid;
     grid-template-columns: 1fr;
 }
-.lx-cols-2 {
+.wui-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.lx-cols-3 {
+.wui-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-.lx-cols-4 {
+.wui-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 @media (min-width: 768px) {
-    .lx-grid-md-2 {
+    .wui-grid-md-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    .lx-grid-md-3 {
+    .wui-grid-md-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    .lx-grid-md-4 {
+    .wui-grid-md-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }
 @media (min-width: 992px) {
-    .lx-grid-lg-2 {
+    .wui-grid-lg-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    .lx-grid-lg-3 {
+    .wui-grid-lg-3 {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    .lx-grid-lg-4 {
+    .wui-grid-lg-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }
-.lx-col-span-2 {
+.wui-col-span-2 {
     grid-column: span 2 / span 2;
 }
-.lx-col-span-3 {
+.wui-col-span-3 {
     grid-column: span 3 / span 3;
 }
-.lx-col-span-full {
+.wui-col-span-full {
     grid-column: 1 / -1;
 }
 
@@ -235,30 +236,30 @@
 }
 
 // ── Spinner / shimmer ──
-.lx-spinner {
+.wui-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;
+    animation: wui-spin 0.7s linear infinite;
     display: inline-block;
     flex-shrink: 0;
 }
-@keyframes lx-spin {
+@keyframes wui-spin {
     to {
         transform: rotate(360deg);
     }
 }
 // Small (14px) spinner variant.
-.lx-spinner-sm {
+.wui-spinner-sm {
     width: 14px;
     height: 14px;
     border-width: 2px;
 }
 // Spinner for the Button loading state.
-.lx-spin {
-    animation: lx-spin 0.8s linear infinite;
+.wui-spin {
+    animation: wui-spin 0.8s linear infinite;
 }
 
 // Skeleton shimmer — used ONLY while loading the first data (loading &&