lostcoords-ui 0.4.1 → 0.5.0

data/app/assets/tailwind/lostcoords/ui/choice.css

@@ -0,0 +1,39 @@
+@layer components {
+  /* The thumb is a gradient on the input itself, so the switch needs no extra
+     element. Forced colors fall back to the native checkbox. */
+  .lc-switch {
+    --lc-switch-thumb: var(--background);
+
+    appearance: none;
+    inline-size: calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 5.5);
+    border-radius: var(--radius-pill);
+    background-color: var(--input);
+    background-image: radial-gradient(circle closest-side, var(--lc-switch-thumb) calc(100% - var(--spacing) * 0.375), transparent 100%);
+    background-size: calc(var(--spacing) * 5.5) calc(var(--spacing) * 5.5);
+    background-repeat: no-repeat;
+    background-position: left center;
+    transition:
+      background-color var(--lc-motion-control) var(--lc-ease-out),
+      background-position var(--lc-motion-control) var(--lc-ease-out);
+
+    &:checked {
+      --lc-switch-thumb: var(--primary-foreground);
+
+      background-color: var(--primary);
+      background-position: right center;
+    }
+
+    &:dir(rtl) { background-position: right center; }
+    &:dir(rtl):checked { background-position: left center; }
+
+    @media (forced-colors: active) {
+      appearance: auto;
+    }
+  }
+
+  /* Rails wraps invalid controls in .field_with_errors; library controls ignore the wrapper. */
+  .field_with_errors:has(> [data-slot]) {
+    display: contents;
+  }
+}

data/app/assets/tailwind/lostcoords/ui/code-block.css

@@ -0,0 +1,10 @@
+@layer components {
+  @media (hover: hover) and (pointer: fine) {
+    .lc-code-block-copy { opacity: 0; }
+
+    .lc-code-block:is(:hover, :focus-within) .lc-code-block-copy,
+    .lc-code-block-copy:has([data-state="copied"], [data-state="error"]) {
+      opacity: 1;
+    }
+  }
+}

data/app/assets/tailwind/lostcoords/ui/components.css

@@ -0,0 +1,25 @@
+@import "./theme.css";
+@source "../../../../helpers/**/*.rb";
+@source "../../../../javascript/**/*.js";
+@source "../../../../views/**/*.erb";
+@source "../../../../../lib/lostcoords/ui/parts.rb";
+
+@import "./glass.css";
+@import "./copy-button.css";
+@import "./code-block.css";
+@import "./disclosure.css";
+@import "./emoji-picker.css";
+@import "./popover.css";
+@import "./sheet.css";
+@import "./card.css";
+@import "./dialog.css";
+@import "./avatar.css";
+@import "./squircle.css";
+@import "./utilities.css";
+@import "./typography.css";
+@import "./layout.css";
+@import "./reading.css";
+@import "./field.css";
+@import "./table.css";
+@import "./choice.css";
+@import "./tooltip.css";

data/app/assets/tailwind/lostcoords/ui/copy-button.css

@@ -1,7 +1,7 @@
 @layer components {
-  .ui-copy { display: inline-grid; }
+  .lc-copy { display: inline-grid; }
 
-  .ui-copy-content {
+  .lc-copy-content {
     grid-area: 1 / 1;
     display: inline-flex;
     align-items: center;
@@ -11,21 +11,21 @@
     visibility: hidden;
     transform: translateY(0.2rem) scale(0.96);
     transition:
-      opacity var(--ui-motion-feedback) var(--ease-out),
-      transform var(--ui-motion-feedback) var(--ease-out),
-      visibility var(--ui-motion-feedback);
+      opacity var(--lc-motion-feedback) var(--lc-ease-out),
+      transform var(--lc-motion-feedback) var(--lc-ease-out),
+      visibility var(--lc-motion-feedback);
   }
 
-  .ui-copy[data-state="idle"] [data-copy-state="idle"],
-  .ui-copy[data-state="copied"] [data-copy-state="copied"],
-  .ui-copy[data-state="error"] [data-copy-state="error"] {
+  .lc-copy[data-state="idle"] [data-copy-state="idle"],
+  .lc-copy[data-state="copied"] [data-copy-state="copied"],
+  .lc-copy[data-state="error"] [data-copy-state="error"] {
     opacity: 1;
     visibility: visible;
     transform: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .ui-copy-content {
+    .lc-copy-content {
       transform: none;
       transition: none;
     }

data/app/assets/tailwind/lostcoords/ui/dialog.css

@@ -1,20 +1,20 @@
 @layer components {
-  .app-dialog {
-    --dialog-from: translateY(0.4rem) scale(0.98);
-    --dialog-fade: 0.2s;
-    --dialog-duration: 0.2s;
+  .lc-dialog {
+    --lc-dialog-from: translateY(0.4rem) scale(0.98);
+    --lc-dialog-fade: 0.2s;
+    --lc-dialog-duration: 0.2s;
 
     /* Preflight's `margin: 0` clobbers the UA `margin: auto` that centres a modal dialog. */
     margin: auto;
     overflow: hidden;
     overscroll-behavior: contain;
     opacity: 0;
-    transform: var(--dialog-from);
+    transform: var(--lc-dialog-from);
     transition:
-      opacity var(--dialog-fade) var(--ease-out-expo),
-      transform var(--dialog-duration) var(--ease-out-expo),
-      display var(--dialog-duration) allow-discrete,
-      overlay var(--dialog-duration) allow-discrete;
+      opacity var(--lc-dialog-fade) var(--lc-ease-out-expo),
+      transform var(--lc-dialog-duration) var(--lc-ease-out-expo),
+      display var(--lc-dialog-duration) allow-discrete,
+      overlay var(--lc-dialog-duration) allow-discrete;
 
     &[open] {
       opacity: 1;
@@ -22,7 +22,7 @@
 
       @starting-style {
         opacity: 0;
-        transform: var(--dialog-from);
+        transform: var(--lc-dialog-from);
       }
     }
 
@@ -32,14 +32,14 @@
       background: transparent;
       backdrop-filter: blur(0);
       transition:
-        background-color var(--dialog-fade) var(--ease-out),
-        backdrop-filter var(--dialog-fade) var(--ease-out),
-        display var(--dialog-fade) allow-discrete,
-        overlay var(--dialog-fade) allow-discrete;
+        background-color var(--lc-dialog-fade) var(--lc-ease-out),
+        backdrop-filter var(--lc-dialog-fade) var(--lc-ease-out),
+        display var(--lc-dialog-fade) allow-discrete,
+        overlay var(--lc-dialog-fade) allow-discrete;
     }
 
     &[open]::backdrop {
-      background: var(--scrim);
+      background: var(--lc-scrim);
       backdrop-filter: blur(2px);
 
       @starting-style {
@@ -48,8 +48,8 @@
       }
     }
 
-    &.context-dialog[open]::backdrop {
-      background: var(--scrim-soft);
+    &.lc-dialog-context[open]::backdrop {
+      background: var(--lc-scrim-soft);
       backdrop-filter: none;
     }
 

data/app/assets/tailwind/lostcoords/ui/disclosure.css

@@ -2,7 +2,7 @@
    panel open under [data-closing] for the exit, then closes it. Transitioning
    content-visibility makes WebKit keep the panel hidden for part of the opening. */
 @layer components {
-  .disclosure-animated {
+  .lc-collapsible {
     interpolate-size: allow-keywords; /* browser-compat: enhancement */
 
     &::details-content {
@@ -11,9 +11,9 @@
       opacity: 0;
       translate: 0 -0.375rem;
       transition:
-        block-size 420ms var(--ease-out-expo),
-        opacity 220ms var(--ease-out),
-        translate 320ms var(--ease-out-expo);
+        block-size 420ms var(--lc-ease-out-expo),
+        opacity 220ms var(--lc-ease-out),
+        translate 320ms var(--lc-ease-out-expo);
     }
 
     &[open]::details-content {
@@ -28,7 +28,7 @@
       opacity: 0;
       translate: 0 -0.375rem;
       transition-duration: 260ms, 160ms, 200ms;
-      transition-timing-function: var(--ease-out);
+      transition-timing-function: var(--lc-ease-out);
     }
 
     @supports (interpolate-size: allow-keywords) {

data/app/assets/tailwind/lostcoords/ui/emoji-picker.css

@@ -6,8 +6,8 @@
     align-items: center;
 
     /* Sit above the mobile app nav (z-100 + 25) so the sheet covers it. */
-    --emoji-sheet-z: calc(100 + 30);
-    --emoji-cell: 2.25rem;
+    --lc-emoji-sheet-z: calc(100 + 30);
+    --lc-emoji-cell: 2.25rem;
   }
 
   /* ---- Trigger + quick choices -------------------------------------- */
@@ -18,28 +18,28 @@
     inline-size: 44px;
     block-size: 44px;
     border-radius: var(--radius-2xl, 1rem);
-    border: 1px solid var(--hairline);
-    background: var(--paper);
-    color: var(--ink);
+    border: 1px solid var(--border);
+    background: var(--background);
+    color: var(--foreground);
     cursor: pointer;
     font-size: var(--text-xl, 1.25rem);
     line-height: 1;
     transition:
       border-color 0.15s,
       background 0.15s,
-      transform 0.15s var(--ease-out),
+      transform 0.15s var(--lc-ease-out),
       box-shadow 0.15s;
 
-    &:hover { border-color: var(--ink-3); }
+    &:hover { border-color: var(--muted-foreground); }
 
     &[aria-current="true"] {
-      border-color: var(--sky);
-      background: var(--sky-soft);
+      border-color: var(--primary);
+      background: color-mix(in oklab, var(--primary) 12%, var(--background));
     }
   }
 
   .emoji-picker__trigger {
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     font-weight: var(--font-weight-normal, 400);
   }
 
@@ -59,10 +59,10 @@
      transitions keep it in the top layer while it eases out, so it fades
      both ways instead of snapping away on close. */
   .emoji-picker__popover::backdrop {
-    background: var(--scrim);
+    background: var(--lc-scrim);
     opacity: 0;
     transition:
-      opacity 220ms var(--ease-out),
+      opacity 220ms var(--lc-ease-out),
       display 220ms allow-discrete,
       overlay 220ms allow-discrete;
 
@@ -83,10 +83,10 @@
      floating surface (glass in wariwari), so the gem leaves it unpainted. */
   @media (width < 40rem) {
     .emoji-picker__popover {
-      border: 1px solid var(--glass-edge, var(--hairline));
+      border: 1px solid var(--lc-glass-edge, var(--border));
       border-block-end: 0;
-      background: var(--paper);
-      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--ink) 45%, transparent);
+      background: var(--background);
+      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
     }
   }
 
@@ -94,10 +94,10 @@
     position: fixed;
     inset: auto 0 0;
     margin: 0;
-    z-index: var(--emoji-sheet-z);
+    z-index: var(--lc-emoji-sheet-z);
     display: none;
     max-inline-size: none;
-    color: var(--ink);
+    color: var(--foreground);
     flex-direction: column;
     inline-size: 100%;
     max-block-size: min(72svh, 34rem);
@@ -107,7 +107,7 @@
     overscroll-behavior: contain;
     transform: translateY(100%);
     transition:
-      transform 260ms var(--ease-out-expo),
+      transform 260ms var(--lc-ease-out-expo),
       display 260ms allow-discrete,
       overlay 260ms allow-discrete;
 
@@ -168,7 +168,7 @@
     inset-inline-start: 14px;
     inline-size: 18px;
     block-size: 18px;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     pointer-events: none;
   }
 
@@ -178,13 +178,13 @@
     padding-inline: 40px 1rem;
     border: 1px solid transparent;
     border-radius: 999px;
-    background: var(--paper-2);
-    color: var(--ink);
+    background: var(--muted);
+    color: var(--foreground);
     font: inherit;
     font-size: 1rem;
     transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
 
-    &::placeholder { color: var(--ink-3); }
+    &::placeholder { color: var(--muted-foreground); }
     &::-webkit-search-cancel-button {
       /* stylelint-disable-next-line property-no-vendor-prefix -- WebKit search decoration */
       -webkit-appearance: none;
@@ -193,7 +193,7 @@
 
     &:focus {
       outline: none;
-      box-shadow: var(--focus-halo, 0 0 0 2px color-mix(in oklab, var(--sky) 50%, transparent));
+      box-shadow: var(--focus-halo, 0 0 0 2px color-mix(in oklab, var(--primary) 50%, transparent));
     }
   }
 
@@ -210,15 +210,15 @@
     block-size: 44px;
     border: none;
     border-radius: 999px;
-    background: var(--paper-2);
+    background: var(--muted);
     cursor: pointer;
     font-size: var(--text-lg, 1.125rem);
     line-height: 1;
     transition: background 150ms ease-out;
 
-    &:hover { background: var(--paper-3); }
+    &:hover { background: var(--accent); }
 
-    &[aria-expanded="true"] { background: var(--sky-soft); }
+    &[aria-expanded="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
   .emoji-picker__tone-menu {
@@ -246,9 +246,9 @@
     font-size: var(--text-lg, 1.125rem);
     line-height: 1;
 
-    &:hover { background: var(--paper-2); }
+    &:hover { background: var(--muted); }
 
-    &[aria-current="true"] { background: var(--sky-soft); }
+    &[aria-current="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
   }
 
   /* ---- Category tab navigation ------------------------------------- */
@@ -264,7 +264,7 @@
     overflow-x: auto;
     scrollbar-width: none;
     border-radius: var(--radius-2xl, 1rem);
-    background: var(--paper-2);
+    background: var(--muted);
 
     &::-webkit-scrollbar { display: none; }
   }
@@ -288,8 +288,8 @@
 
     &[aria-current="true"] {
       opacity: 1;
-      background: var(--paper);
-      box-shadow: var(--shadow-sm);
+      background: var(--background);
+      box-shadow: var(--lc-shadow-sm);
     }
   }
 
@@ -328,19 +328,19 @@
       margin: 0;
       font-size: var(--text-sm, 0.875rem);
       font-weight: var(--font-weight-semibold, 600);
-      color: var(--ink-2);
+      color: var(--muted-foreground);
     }
 
     .count {
-      font-family: var(--font-body, system-ui);
+      font-family: var(--font-sans, system-ui);
       font-size: var(--text-xs, 0.75rem);
-      color: var(--ink-3);
+      color: var(--muted-foreground);
     }
   }
 
   .emoji-picker__grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--emoji-cell), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(--lc-emoji-cell), 1fr));
     gap: 2px;
     padding-block-start: 4px;
 
@@ -356,16 +356,16 @@
       font-size: var(--text-xl, 1.25rem);
       line-height: 1;
       padding: 0;
-      transition: background 0.1s, transform 0.1s var(--ease-out);
+      transition: background 0.1s, transform 0.1s var(--lc-ease-out);
 
       &:hover,
       &:focus-visible {
-        background: var(--paper-2);
+        background: var(--muted);
         transform: scale(1.12);
         outline: none;
       }
 
-      &[aria-current="true"] { background: var(--sky-soft); }
+      &[aria-current="true"] { background: color-mix(in oklab, var(--primary) 12%, var(--background)); }
     }
   }
 
@@ -379,7 +379,7 @@
   .emoji-picker__empty {
     margin: 0;
     padding: 1rem 0.5rem;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     font-size: 1rem;
     text-align: center;
   }
@@ -411,7 +411,7 @@
   .emoji-picker__preview-name {
     overflow: hidden;
     font-size: 1rem;
-    color: var(--ink-3);
+    color: var(--muted-foreground);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -433,8 +433,8 @@
       transform: translateY(-4px) scale(0.98);
       opacity: 0;
       transition:
-        opacity 160ms var(--ease-out-expo),
-        transform 160ms var(--ease-out-expo),
+        opacity 160ms var(--lc-ease-out-expo),
+        transform 160ms var(--lc-ease-out-expo),
         display 160ms allow-discrete,
         overlay 160ms allow-discrete;
 
@@ -456,7 +456,7 @@
 
     main:has(.emoji-picker__popover[data-open]),
     .emoji-picker:has(.emoji-picker__popover[data-open]) {
-      z-index: 60;
+      z-index: var(--lc-z-overlay);
     }
   }
 }

data/app/assets/tailwind/lostcoords/ui/field.css

@@ -1,6 +1,6 @@
 @layer components {
   /* A legend sits outside the fieldset's internal grid. */
-  :where(fieldset.ui-field > legend) {
-    margin-block-end: var(--ui-space-related, 0.5rem);
+  :where(fieldset.lc-field > legend) {
+    margin-block-end: var(--spacing-related);
   }
 }

data/app/assets/tailwind/lostcoords/ui/glass.css

@@ -1,17 +1,18 @@
 /* Glass — the floating control layer, used the way iOS uses it: only on
    chrome that floats over content (the nav pills, the phone CTA dock, menus
    and popovers), never on cards or sections. Menus lift further, on
-   --shadow-lg. Written once here because Safari
+   --lc-shadow-lg. Written once here because Safari
    drops custom properties inside -webkit-backdrop-filter, so the blur needs
    literal values, and because the solid fallbacks need @supports and
    prefers-reduced-transparency. glass_class is the only writer of the name. */
 @layer components {
   /* The emoji and currency pickers are glass only as desktop popovers; on
      phones they're bottom sheets, whose rules come later in the cascade and repaint them solid. */
-  .glass {
-    background: var(--glass-fill);
-    border: 1px solid var(--glass-edge);
-    box-shadow: var(--glass-shadow);
+  .lc-glass {
+    --_lc-glass-fill: var(--lc-glass-fill);
+    background: var(--_lc-glass-fill);
+    border: 1px solid var(--lc-glass-edge);
+    box-shadow: var(--lc-glass-shadow);
     -webkit-backdrop-filter: blur(24px) saturate(160%);
     backdrop-filter: blur(24px) saturate(160%);
 
@@ -23,13 +24,13 @@
       backdrop-filter: blur(12px) saturate(180%);
     }
 
-    /* --glass-solid lets inverted (HUD) glass fall back to its own colour. */
+    /* --lc-glass-solid lets inverted (HUD) glass fall back to its own colour. */
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-      background: var(--glass-solid, var(--paper));
+      --_lc-glass-fill: var(--lc-glass-solid, var(--background));
     }
 
     @media (prefers-reduced-transparency: reduce) {
-      background: var(--glass-solid, var(--paper));
+      --_lc-glass-fill: var(--lc-glass-solid, var(--background));
       -webkit-backdrop-filter: none;
       backdrop-filter: none;
     }

data/app/assets/tailwind/lostcoords/ui/layout.css

@@ -1,5 +1,5 @@
 @layer components {
-  .ui-container-page {
-    padding-inline: var(--ui-gutter, clamp(1rem, 3vw, 1.5rem));
+  .lc-container-page {
+    padding-inline: var(--spacing-gutter);
   }
 }

data/app/assets/tailwind/lostcoords/ui/popover.css

@@ -1,12 +1,12 @@
 /* Closed is the exit pose, so closing animates too; allow-discrete holds
    display/overlay until it ends. FloatingPanel sets [data-open]. */
-@utility popover-shell {
+@utility lc-popover-shell {
   opacity: 0;
   transform: translateY(--spacing(-1)) scale(0.98);
   pointer-events: none;
   transition:
-    opacity 160ms var(--ease-out-expo),
-    transform 160ms var(--ease-out-expo),
+    opacity 160ms var(--lc-ease-out-expo),
+    transform 160ms var(--lc-ease-out-expo),
     display 160ms allow-discrete,
     overlay 160ms allow-discrete;
 
@@ -23,10 +23,10 @@
 }
 
 @layer components {
-  /* Desktop: the .sheet becomes an anchored popover instead of a bottom sheet. */
+  /* Desktop: the .lc-sheet becomes an anchored popover instead of a bottom sheet. */
   @media (width >= 40rem) {
-    .sheet--anchored {
-      @apply popover-shell;
+    .lc-sheet--anchored {
+      @apply lc-popover-shell;
 
       display: none;
       flex-direction: column;
@@ -48,27 +48,27 @@
   /* Enter/exit for small overlays, whichever way they open: a [hidden] toggle
      (amount calculator, colour picker), the Popover API (phone nav menus) or a
      modal <dialog>. The closed state is the exit pose, so close animates too;
-     allow-discrete holds display/overlay until it ends. --pop-y sets the
+     allow-discrete holds display/overlay until it ends. --lc-pop-y sets the
      direction: popovers drop from their trigger, dialogs rise. */
-  .popover-pop {
-    --pop-from: translateY(var(--pop-y, -0.25rem)) scale(0.96);
+  .lc-popover-pop {
+    --lc-pop-from: translateY(var(--lc-pop-y, -0.25rem)) scale(0.96);
 
-    transform-origin: var(--pop-origin, top);
+    transform-origin: var(--lc-pop-origin, top);
     transition:
-      opacity 160ms var(--ease-out-expo),
-      transform 240ms var(--ease-out-expo),
+      opacity 160ms var(--lc-ease-out-expo),
+      transform 240ms var(--lc-ease-out-expo),
       display 240ms allow-discrete,
       overlay 240ms allow-discrete;
 
     &:is([hidden], [popover]:not(:popover-open), dialog:not([open])) {
       opacity: 0;
-      transform: var(--pop-from);
+      transform: var(--lc-pop-from);
     }
 
     &:is(:not([hidden], [popover], dialog), :popover-open, dialog[open]) {
       @starting-style {
         opacity: 0;
-        transform: var(--pop-from);
+        transform: var(--lc-pop-from);
       }
     }
   }