RubyGems - lostcoords-ui - Versions diffs - 0.4.1 → 0.5.0 - Mend

lostcoords-ui 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

data/app/assets/tailwind/lostcoords/ui/reading.css CHANGED Viewed

@@ -1,39 +1,39 @@
 @layer utilities {
-  .ui-prose {
-    --tw-prose-body: var(--ink-2);
-    --tw-prose-headings: var(--ink);
-    --tw-prose-lead: var(--ink-2);
-    --tw-prose-links: var(--accent, var(--sky));
-    --tw-prose-bold: var(--ink);
-    --tw-prose-counters: var(--ink-3);
-    --tw-prose-bullets: var(--ink-3);
-    --tw-prose-hr: var(--hairline);
-    --tw-prose-quotes: var(--ink);
-    --tw-prose-quote-borders: var(--hairline);
-    --tw-prose-captions: var(--ink-3);
-    --tw-prose-code: var(--ink);
-    --tw-prose-pre-code: var(--ink);
-    --tw-prose-pre-bg: var(--paper-2);
-    --tw-prose-th-borders: var(--hairline);
-    --tw-prose-td-borders: var(--hairline);
+  .lc-prose {
+    --tw-prose-body: var(--muted-foreground);
+    --tw-prose-headings: var(--foreground);
+    --tw-prose-lead: var(--muted-foreground);
+    --tw-prose-links: var(--primary);
+    --tw-prose-bold: var(--foreground);
+    --tw-prose-counters: var(--muted-foreground);
+    --tw-prose-bullets: var(--muted-foreground);
+    --tw-prose-hr: var(--border);
+    --tw-prose-quotes: var(--foreground);
+    --tw-prose-quote-borders: var(--border);
+    --tw-prose-captions: var(--muted-foreground);
+    --tw-prose-code: var(--foreground);
+    --tw-prose-pre-code: var(--foreground);
+    --tw-prose-pre-bg: var(--muted);
+    --tw-prose-th-borders: var(--border);
+    --tw-prose-td-borders: var(--border);
     & :where(p, ul, ol, dl, blockquote, pre, table, figure, hr):not(:where(.not-prose, .not-prose *)) {
-      margin-block: var(--ui-reading-flow, 1.25em) 0;
+      margin-block: var(--lc-reading-flow, 1.25em) 0;
     }
     & :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
-      margin-block: calc(var(--ui-reading-flow, 1.25em) * 1.6) 0;
+      margin-block: calc(var(--lc-reading-flow, 1.25em) * 1.6) 0;
       font-family: var(--font-display, inherit);
-      line-height: var(--ui-reading-heading-leading, 1.25);
+      line-height: var(--lc-reading-heading-leading, 1.25);
       text-wrap: balance;
     }
     & :where(h1, h2, h3, h4) + :where(p, ul, ol):not(:where(.not-prose, .not-prose *)) {
-      margin-block-start: calc(var(--ui-reading-flow, 1.25em) * 0.5);
+      margin-block-start: calc(var(--lc-reading-flow, 1.25em) * 0.5);
     }
     & :where(li > p, li > ul, li > ol):not(:where(.not-prose, .not-prose *)) {
-      margin-block-start: calc(var(--ui-reading-flow, 1.25em) * 0.5);
+      margin-block-start: calc(var(--lc-reading-flow, 1.25em) * 0.5);
     }
     & > :where(:first-child):not(:where(.not-prose, .not-prose *)) {
@@ -47,13 +47,13 @@
     }
     &:lang(ja) :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
-      line-height: var(--ui-reading-heading-leading, 1.4);
+      line-height: var(--lc-reading-heading-leading, 1.4);
       letter-spacing: normal;
     }
   }
   @supports (word-break: auto-phrase) {
-    .ui-prose:lang(ja) :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
+    .lc-prose:lang(ja) :where(h1, h2, h3, h4):not(:where(.not-prose, .not-prose *)) {
       word-break: auto-phrase;
     }
   }

data/app/assets/tailwind/lostcoords/ui/sheet.css CHANGED Viewed

@@ -1,74 +1,74 @@
 @layer components {
   @media (width < 40rem) {
-    .sheet {
+    .lc-sheet {
       position: fixed;
       /* Anchored from the top edge at the screen height it opened at
          (sheet_controller), then lifted by its own height. In-app browsers
          (Brave, Chrome) resize the page under the keyboard; anything hung
          from the bottom edge jumps a frame as they do, but the top holds. */
-      inset: var(--sheet-floor, 100dvh) 0 auto;
+      inset: var(--lc-sheet-floor, 100dvh) 0 auto;
       translate: 0 -100%;
       margin: 0;
-      z-index: var(--z-index-prompt);
+      z-index: var(--lc-z-sheet);
       inline-size: 100%;
-      max-block-size: calc(var(--sheet-floor, 100dvh) * 0.9);
+      max-block-size: calc(var(--lc-sheet-floor, 100dvh) * 0.9);
       overflow-y: auto;
       overscroll-behavior: contain;
       padding-block-end: max(env(safe-area-inset-bottom), 1rem);
-      border: 1px solid var(--glass-edge);
+      border: 1px solid var(--lc-glass-edge);
       border-start-start-radius: var(--radius-3xl);
       border-start-end-radius: var(--radius-3xl);
       /* Published as a variable, not just applied, because the sticky chrome
          that rides on top of the sheet — the grabber bar, the pinned action
          row — has to paint the *same* surface or it reads as a seam. In dark
-         mode the sheet is a lightened paper-2/paper-3 mix while --paper is
+         mode the sheet is a lightened paper-2/paper-3 mix while --background is
          0.045 lightness darker, which is exactly the band you could see. */
-      --sheet-bg: var(--paper);
+      --lc-sheet-bg: var(--background);
       @supports (background: light-dark(white, black)) {
-        --sheet-bg: light-dark(var(--paper), color-mix(in oklab, var(--paper-2) 92%, var(--paper-3)));
+        --lc-sheet-bg: light-dark(var(--background), color-mix(in oklab, var(--muted) 92%, var(--accent)));
       }
-      background: var(--sheet-bg);
-      color: var(--ink);
-      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--ink) 45%, transparent);
-      transform: translateY(var(--sheet-offscreen));
+      background: var(--lc-sheet-bg);
+      color: var(--foreground);
+      box-shadow: 0 -12px 40px -12px color-mix(in oklab, var(--foreground) 45%, transparent);
+      transform: translateY(var(--lc-sheet-offscreen));
       transition:
-        transform var(--sheet-duration) var(--ease-sheet),
-        display var(--sheet-duration) allow-discrete,
-        overlay var(--sheet-duration) allow-discrete;
+        transform var(--lc-sheet-duration) var(--lc-ease-sheet),
+        display var(--lc-sheet-duration) allow-discrete,
+        overlay var(--lc-sheet-duration) allow-discrete;
     }
     /* Popover-API reveal (currency): top layer drives display, so showPopover()/
        hidePopover() animate the slide both ways, with a native ::backdrop. */
-    .sheet[popover] { display: none; flex-direction: column; max-block-size: min(calc(var(--sheet-floor, 100svh) * 0.72), 34rem); }
-    .sheet[popover]:popover-open {
+    .lc-sheet[popover] { display: none; flex-direction: column; max-block-size: min(calc(var(--lc-sheet-floor, 100svh) * 0.72), 34rem); }
+    .lc-sheet[popover]:popover-open {
       display: flex;
       transform: translateY(0);
-      @starting-style { transform: translateY(var(--sheet-offscreen)); }
+      @starting-style { transform: translateY(var(--lc-sheet-offscreen)); }
     }
-    .sheet[popover]::backdrop {
-      background: var(--scrim);
+    .lc-sheet[popover]::backdrop {
+      background: var(--lc-scrim);
       backdrop-filter: blur(2px);
       opacity: 0;
       transition:
-        opacity var(--sheet-duration) var(--ease-sheet),
-        display var(--sheet-duration) allow-discrete,
-        overlay var(--sheet-duration) allow-discrete;
+        opacity var(--lc-sheet-duration) var(--lc-ease-sheet),
+        display var(--lc-sheet-duration) allow-discrete,
+        overlay var(--lc-sheet-duration) allow-discrete;
       @media (prefers-reduced-motion: reduce) { transition: none; }
     }
-    .sheet[popover]:popover-open::backdrop { opacity: 1; @starting-style { opacity: 0; } }
+    .lc-sheet[popover]:popover-open::backdrop { opacity: 1; @starting-style { opacity: 0; } }
     /* UIKit's 36×5 grabber. */
-    :is([data-sheet-target~="handle"], dialog[data-controller~="sheet"])::before {
+    :is([data-lc-sheet-target~="handle"], dialog[data-controller~="lc-sheet"])::before {
       content: "";
       display: block;
       inline-size: 2.25rem;
       block-size: 0.3125rem;
       border-radius: 9999px;
-      background: color-mix(in oklab, var(--ink-3) 45%, transparent);
+      background: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
     }
   }
 }
@@ -76,67 +76,67 @@
 @layer modules {
   /* Phones: every modal dialog is an iOS sheet (sheet_controller). It floats
      inset with all corners round while it is short, and docks to the screen
-     edges as it reaches the large detent: --sheet-p runs 0 → 1 between them.
+     edges as it reaches the large detent: --lc-sheet-p runs 0 → 1 between them.
      Lives in this layer so it out-ranks a dialog's own frame. */
   @media (width < 40rem) {
-    dialog[data-controller~="sheet"] {
-      --sheet-p: 0;
-      --sheet-inset: 0.5rem;
-      --sheet-radius: 2.25rem;
-      --sheet-bg: var(--paper);
-      --sheet-gap: calc(var(--sheet-inset) * (1 - var(--sheet-p)));
+    dialog[data-controller~="lc-sheet"] {
+      --lc-sheet-p: 0;
+      --lc-sheet-inset: 0.5rem;
+      --lc-sheet-radius: 2.25rem;
+      --lc-sheet-bg: var(--background);
+      --lc-sheet-gap: calc(var(--lc-sheet-inset) * (1 - var(--lc-sheet-p)));
       position: fixed;
-      /* Anchored from the top edge, like .sheet: the keyboard covers it and
+      /* Anchored from the top edge, like .lc-sheet: the keyboard covers it and
          nothing moves. */
-      inset: calc(var(--sheet-floor, 100dvh) - var(--sheet-gap)) 0 auto;
+      inset: calc(var(--lc-sheet-floor, 100dvh) - var(--lc-sheet-gap)) 0 auto;
       translate: 0 -100%;
-      margin: 0 var(--sheet-gap);
+      margin: 0 var(--lc-sheet-gap);
       inline-size: auto;
       max-inline-size: none;
       block-size: auto;
-      max-block-size: calc(var(--sheet-floor, 100dvh) - max(env(safe-area-inset-top), 0.75rem) - 0.625rem);
-      padding: 0 0 max(0px, calc(env(safe-area-inset-bottom) - var(--sheet-gap)));
+      max-block-size: calc(var(--lc-sheet-floor, 100dvh) - max(env(safe-area-inset-top), 0.75rem) - 0.625rem);
+      padding: 0 0 max(0px, calc(env(safe-area-inset-bottom) - var(--lc-sheet-gap)));
       overflow: hidden auto;
       overscroll-behavior: contain;
       scrollbar-width: none;
-      border: 1px solid var(--glass-edge);
+      border: 1px solid var(--lc-glass-edge);
       border-radius:
-        var(--sheet-radius) var(--sheet-radius)
-        calc(var(--sheet-radius) * (1 - var(--sheet-p))) calc(var(--sheet-radius) * (1 - var(--sheet-p)));
-      background: var(--sheet-bg);
-      box-shadow: var(--glass-rim), 0 -8px 40px -12px rgb(0 0 0 / 0.28);
+        var(--lc-sheet-radius) var(--lc-sheet-radius)
+        calc(var(--lc-sheet-radius) * (1 - var(--lc-sheet-p))) calc(var(--lc-sheet-radius) * (1 - var(--lc-sheet-p)));
+      background: var(--lc-sheet-bg);
+      box-shadow: var(--lc-glass-rim), 0 -8px 40px -12px rgb(0 0 0 / 0.28);
       opacity: 1;
-      transform: translateY(var(--sheet-offscreen));
+      transform: translateY(var(--lc-sheet-offscreen));
       transform-origin: bottom center;
       transition:
-        transform var(--sheet-duration) var(--ease-sheet),
-        display var(--sheet-duration) allow-discrete,
-        overlay var(--sheet-duration) allow-discrete;
+        transform var(--lc-sheet-duration) var(--lc-ease-sheet),
+        display var(--lc-sheet-duration) allow-discrete,
+        overlay var(--lc-sheet-duration) allow-discrete;
       &[open] {
         transform: none;
-        @starting-style { transform: translateY(var(--sheet-offscreen)); }
+        @starting-style { transform: translateY(var(--lc-sheet-offscreen)); }
       }
       &::before {
         position: absolute;
-        z-index: calc(var(--z-index-art) + 1);
+        z-index: 1;
         inset: 0.3125rem auto auto 50%;
         translate: -50% 0;
         pointer-events: none;
       }
       &::backdrop {
-        background: var(--scrim-sheet);
+        background: var(--lc-scrim-sheet);
         backdrop-filter: none;
         opacity: 0;
         transition:
-          opacity var(--sheet-duration) var(--ease-sheet),
-          display var(--sheet-duration) allow-discrete,
-          overlay var(--sheet-duration) allow-discrete;
+          opacity var(--lc-sheet-duration) var(--lc-ease-sheet),
+          display var(--lc-sheet-duration) allow-discrete,
+          overlay var(--lc-sheet-duration) allow-discrete;
       }
       &[open]::backdrop {
@@ -152,18 +152,18 @@
     /* Behind a large sheet the page shrinks back and rounds off, over black,
        as UIKit's page sheet does; sheet_controller drives the variables. */
-    html[data-sheet-page] {
+    html[data-lc-sheet-page] {
       background: #000;
       > body {
-        transform-origin: 50% var(--sheet-page-origin, 0);
+        transform-origin: 50% var(--lc-sheet-page-origin, 0);
         transform:
-          translateY(calc(var(--sheet-page-p, 0) * (max(env(safe-area-inset-top), 0.75rem) - 0.25rem)))
-          scale(var(--sheet-page-scale, 1));
-        clip-path: inset(var(--sheet-page-origin, 0) 0 0 round calc(var(--sheet-page-p, 0) * 0.75rem));
+          translateY(calc(var(--lc-sheet-page-p, 0) * (max(env(safe-area-inset-top), 0.75rem) - 0.25rem)))
+          scale(var(--lc-sheet-page-scale, 1));
+        clip-path: inset(var(--lc-sheet-page-origin, 0) 0 0 round calc(var(--lc-sheet-page-p, 0) * 0.75rem));
         transition:
-          transform var(--sheet-page-transition, 0s),
-          clip-path var(--sheet-page-transition, 0s);
+          transform var(--lc-sheet-page-transition, 0s),
+          clip-path var(--lc-sheet-page-transition, 0s);
       }
     }
   }

data/app/assets/tailwind/lostcoords/ui/squircle.css CHANGED Viewed

@@ -1,31 +1,11 @@
-/* WebKit ignores corner-shape and keeps plain rounded corners. A squircle reads
-   tighter than a circular arc of the same radius, so the 12/16/24 tiers grow. */
-@layer theme {
+/* Squircle corners where the browser supports corner-shape. WebKit keeps plain
+   rounded corners. A squircle reads tighter than a circular arc of the same
+   radius, so its radius grows by a third. Library surfaces carry this class;
+   host elements are never matched by their rounded-* classes. */
+@utility lc-squircle {
   @supports (corner-shape: squircle) {
-    body {
-      --radius-xl: 1.125rem;
-      --radius-2xl: 1.5rem;
-      --radius-3xl: 2rem;
-      & :is(
-        [class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-3xl"],
-        [class*="rounded-t-"], [class*="rounded-b-"],
-        [class*="rounded-ss-"], [class*="rounded-se-"],
-        [class*="rounded-es-"], [class*="rounded-ee-"],
-        [class*="[&_button]:rounded-xl"] button,
-        [class*="before:rounded-xl"]::before
-      ):not([class*="rounded-full"]) {
-        corner-shape: squircle;
-      }
-    }
-  }
-}
-/* For surfaces whose radius comes from a variable or a stylesheet, which the class
-   match above can't see. The card, dialog, menu, badge and picker builders carry it. */
-@utility squircle {
-  @supports (corner-shape: squircle) {
-    &:not([class*="rounded-full"]) {
+    &:not([class*="rounded-full"], [class*="rounded-pill"]) {
+      --lc-corner-scale: 1.333;
       corner-shape: squircle;
     }
   }

data/app/assets/tailwind/lostcoords/ui/table.css ADDED Viewed

@@ -0,0 +1,51 @@
+@layer components {
+  .lc-table {
+    --table-rule: color-mix(in oklab, var(--foreground) 8%, transparent);
+    border-collapse: collapse;
+    & :where(th, td) {
+      padding: var(--spacing-heading) var(--spacing-content);
+    }
+    & :where(th) {
+      text-align: inherit;
+      font-weight: 600;
+    }
+    & :where(thead th) {
+      background-color: var(--muted);
+      color: var(--muted-foreground);
+      font-size: var(--text-caption);
+      line-height: var(--text-caption--line-height);
+      border-block-end: thin solid color-mix(in oklab, var(--foreground) 14%, transparent);
+    }
+    & :where(tbody tr > *) {
+      border-block-end: thin solid var(--table-rule);
+    }
+    & :where(tbody:last-of-type tr:last-child > *) {
+      border-block-end: 0;
+    }
+    & :where(tbody tr) {
+      transition: background-color 150ms ease-out;
+    }
+    & :where(tbody tr:hover) {
+      background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
+    }
+    & :where(caption) {
+      padding: 0 var(--spacing-content) var(--spacing-heading);
+      color: var(--muted-foreground);
+      text-align: start;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .lc-table :where(tbody tr) {
+      transition: none;
+    }
+  }
+}