@liveblocks/react-ui 2.7.0-beta1 → 2.7.0-versions

package/src/styles/index.css

@@ -23,7 +23,6 @@
   --lb-button-radius: calc(0.75 * var(--lb-radius));
   --lb-transition-duration: 0.1s;
   --lb-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
-  --lb-highlight-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
   --lb-elevation-shadow: $lb-elevation-shadow;
   --lb-tooltip-shadow: $lb-tooltip-shadow;
   --lb-accent-contrast: 8%;
@@ -121,6 +120,33 @@
   }
 }
 
+/*************************************
+ *              States               *
+ *************************************/
+
+.lb-loading,
+.lb-empty,
+.lb-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lb-loading {
+  color: var(--lb-foreground-moderate);
+}
+
+.lb-empty,
+.lb-error {
+  padding: var(--lb-spacing);
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+  text-align: center;
+  text-wrap: balance;
+}
+
 /*************************************
  *               Icon                *
  *************************************/
@@ -137,11 +163,6 @@
   }
 }
 
-.lb-icon-spinner {
-  transform-origin: center;
-  animation: lb-animation-spin 0.75s linear infinite;
-}
-
 /*************************************
  *              Button               *
  *************************************/
@@ -149,15 +170,40 @@
 .lb-button {
   --lb-button-background: var(--lb-dynamic-background);
 
-  @include button;
-
+  all: unset;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  box-sizing: inherit;
   padding: calc(0.25 * var(--lb-spacing));
   border-radius: var(--lb-button-radius);
   background: var(--lb-button-background);
   color: var(--lb-foreground-moderate);
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, color, opacity;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition-property: box-shadow;
+  }
+
+  &:where(:focus-visible) {
+    z-index: 1;
+
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-accent) 0 0 0 4px;
+    }
+  }
 
   &:where(.lb-button\:non-disableable:disabled) {
     cursor: default;
@@ -213,12 +259,30 @@
     box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
     transition-property: background, color, opacity, box-shadow;
   }
+
+  &:where(:has(.lb-button-label)) {
+    gap: calc(0.25 * var(--lb-spacing));
+    padding-inline: calc(0.5 * var(--lb-spacing));
+  }
+
+  &:where([data-size="large"]) {
+    padding: calc(0.5 * var(--lb-spacing));
+
+    &:where(:has(.lb-button-label)) {
+      gap: calc(0.35 * var(--lb-spacing));
+      padding-inline: calc(0.7 * var(--lb-spacing));
+    }
+  }
 }
 
 .lb-button-icon {
   --lb-icon-background: var(--lb-button-background);
 }
 
+.lb-button-label {
+  font-weight: 500;
+}
+
 /*************************************
  *             Dropdown              *
  *************************************/
@@ -277,6 +341,18 @@
 
 .lb-list {
   display: contents;
+
+  :where(:first-child) {
+    @include capitalize;
+  }
+}
+
+/*************************************
+ *                Date               *
+ *************************************/
+
+.lb-date {
+  @include capitalize;
 }
 
 /*************************************
@@ -351,29 +427,6 @@
   flex: 1;
 }
 
-.lb-emoji-picker-loading,
-.lb-emoji-picker-empty,
-.lb-emoji-picker-error {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.lb-emoji-picker-loading {
-  color: var(--lb-foreground-moderate);
-}
-
-.lb-emoji-picker-empty,
-.lb-emoji-picker-error {
-  padding: var(--lb-spacing);
-  color: var(--lb-foreground-tertiary);
-  font-size: 0.875em;
-  text-align: center;
-  text-wrap: balance;
-}
-
 .lb-emoji-picker-category-header {
   padding: var(--lb-emoji-picker-padding) var(--lb-emoji-picker-offset-padding);
   background: var(--lb-dynamic-background);
@@ -428,7 +481,6 @@
   position: relative;
   display: flex;
   align-items: center;
-  max-inline-size: 300px;
   min-block-size: calc(
     $lb-tooltip-shortcut-height + 2 * $lb-tooltip-additional-padding
   );
@@ -439,7 +491,6 @@
   box-shadow: var(--lb-tooltip-shadow);
   font-size: 0.75rem;
   line-height: 1;
-  overflow-wrap: anywhere;
   pointer-events: none;
 
   &::after {
@@ -615,7 +666,6 @@
  *************************************/
 
 .lb-composer {
-  position: relative;
   background: var(--lb-dynamic-background);
   color: var(--lb-foreground);
   transition-property: background;
@@ -625,16 +675,37 @@
   margin: 0;
 }
 
-.lb-composer:where(:has(.lb-composer-editor:not(:focus-visible))) {
-  :where(.lb-button[data-variant="primary"]) {
-    --lb-button-background: var(--lb-foreground-subtle);
+/**
+ * Progressive enhancement: Use :has instead of :focus-within to target the editor specifically
+ */
+@supports selector(:has(*)) {
+  .lb-composer:where(:has(.lb-composer-editor:not(:focus-visible))) {
+    :where(.lb-button[data-variant="primary"]) {
+      --lb-button-background: var(--lb-foreground-subtle);
 
-    color: var(--lb-foreground-tertiary);
+      color: var(--lb-foreground-tertiary);
 
-    &:where(:enabled:hover, :enabled:focus-visible) {
-      --lb-button-background: var(--lb-accent);
+      &:where(:enabled:hover, :enabled:focus-visible) {
+        --lb-button-background: var(--lb-accent);
 
-      color: var(--lb-accent-foreground);
+        color: var(--lb-accent-foreground);
+      }
+    }
+  }
+}
+
+@supports not selector(:has(*)) {
+  .lb-composer:where(:not(:focus-within)) {
+    :where(.lb-button[data-variant="primary"]) {
+      --lb-button-background: var(--lb-foreground-subtle);
+
+      color: var(--lb-foreground-tertiary);
+
+      &:where(:enabled:hover, :enabled:focus-visible) {
+        --lb-button-background: var(--lb-accent);
+
+        color: var(--lb-accent-foreground);
+      }
     }
   }
 }
@@ -662,7 +733,6 @@
   gap: calc(0.75 * var(--lb-spacing));
   align-items: center;
   block-size: calc($lb-button-size + var(--lb-spacing));
-  margin-block-start: calc(-0.125 * var(--lb-spacing));
   padding: 0 var(--lb-spacing) var(--lb-spacing);
 }
 
@@ -691,61 +761,12 @@
   }
 }
 
-.lb-composer-editor:where(:has(+ .lb-composer-attachments)) {
-  padding-block-end: calc(0.25 * var(--lb-spacing));
-}
-
-.lb-composer-attachments {
-  padding-inline: var(--lb-spacing);
-  padding-block-start: calc(0.75 * var(--lb-spacing));
-  padding-block-end: var(--lb-spacing);
-}
-
-.lb-composer-editor-container:where([data-drop]) * {
-  pointer-events: none;
-}
-
-.lb-composer-attachments-drop-area {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  place-content: center;
-  place-items: center;
-  color: var(--lb-accent);
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    inset: calc(0.5 * var(--lb-spacing));
-    z-index: 0;
-    border-radius: calc(0.75 * var(--lb-radius));
-  }
-
-  &::before {
-    background: currentcolor;
-    opacity: calc(1 * var(--lb-accent-contrast));
-  }
-
-  &::after {
-    border: 2px dashed currentcolor;
-    opacity: calc(2 * var(--lb-accent-contrast));
+.lb-composer:where(:not([data-collapsed])) {
+  :where(.lb-composer-editor) {
+    padding-block-end: calc(0.875 * var(--lb-spacing));
   }
 }
 
-.lb-composer-attachments-drop-area-label {
-  position: relative;
-  display: flex;
-  gap: calc(0.25 * var(--lb-spacing));
-  place-items: center;
-  padding: calc(0.375 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
-  border-radius: calc(0.75 * var(--lb-radius));
-  background: var(--lb-accent);
-  color: var(--lb-accent-foreground);
-  font-weight: 500;
-  pointer-events: none;
-}
-
 /*************************************
  *              Comment              *
  *************************************/
@@ -815,15 +836,17 @@
   min-inline-size: 0;
 }
 
-.lb-comment-author {
+.lb-comment-author,
+.lb-comment-date {
   @include truncate;
+  @include capitalize;
+}
 
+.lb-comment-author {
   font-weight: 500;
 }
 
 .lb-comment-date {
-  @include truncate;
-
   color: var(--lb-foreground-tertiary);
   font-size: 0.875em;
 }
@@ -854,10 +877,6 @@
   }
 }
 
-.lb-comment-attachments {
-  margin-block-start: calc(0.75 * var(--lb-spacing));
-}
-
 .lb-comment-reactions {
   display: flex;
   flex-wrap: wrap;
@@ -963,7 +982,7 @@
     min-block-size: calc(var(--lb-comment-avatar-size) + var(--lb-spacing));
   }
 
-  &:where(:first-of-type, [data-editing]) {
+  &:where(:first-of-type) {
     padding-block-start: var(--lb-spacing);
 
     &:where(.lb-comment\:indent-content) {
@@ -973,7 +992,7 @@
     }
   }
 
-  &:where(:last-of-type, [data-editing]) {
+  &:where(:last-of-type) {
     padding-block-end: var(--lb-spacing);
 
     &:where(.lb-comment\:indent-content) {
@@ -1036,212 +1055,6 @@
   }
 }
 
-/*************************************
- *            Attachments            *
- *************************************/
-
-.lb-comment-attachments,
-.lb-composer-attachments {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
-  gap: calc(0.75 * var(--lb-spacing));
-}
-
-.lb-attachment,
-.lb-attachment-delete {
-  @include button;
-}
-
-.lb-attachment {
-  position: relative;
-  inline-size: 100%;
-  min-inline-size: 0;
-  border-radius: var(--lb-radius);
-  background: var(--lb-dynamic-background);
-  box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
-
-  &:where([tabindex="-1"]) {
-    cursor: default;
-  }
-
-  &:where(:not([tabindex="-1"])) {
-    &:where(:hover, :focus-visible) {
-      background: var(--lb-foreground-subtle);
-    }
-  }
-}
-
-.lb-attachment-delete {
-  position: absolute;
-  inset-inline-end: -0.35rem;
-  inset-block-start: -0.35rem;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  inline-size: 1.1rem;
-  block-size: 1.1rem;
-  border-radius: 50%;
-  background: var(--lb-foreground-subtle);
-  color: var(--lb-foreground-secondary);
-  box-shadow: 0 0 0 2px var(--lb-dynamic-background);
-  opacity: 0;
-
-  /* Invisibly increase the button's hit target size */
-  &::before {
-    content: "";
-    position: absolute;
-    inset: -4px;
-    z-index: -1;
-    border-radius: inherit;
-  }
-
-  &:where(:hover, :focus-visible) {
-    background: var(--lb-foreground-secondary);
-    color: var(--lb-dynamic-background);
-  }
-
-  :where(.lb-attachment:focus-within, .lb-attachment:hover) & {
-    opacity: 1;
-  }
-
-  :where(.lb-icon) {
-    inline-size: 0.75rem;
-  }
-}
-
-.lb-attachment-name {
-  display: flex;
-}
-
-.lb-attachment-name-base,
-.lb-attachment-description {
-  @include truncate;
-}
-
-.lb-attachment-preview {
-  position: relative;
-}
-
-.lb-attachment-preview-image {
-  border-radius: inherit;
-  transition-property: opacity;
-
-  &,
-  &::after,
-  img {
-    position: absolute;
-    inset: 0;
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  img {
-    object-fit: cover;
-  }
-
-  &::after {
-    content: "";
-    border-radius: inherit;
-    box-shadow: var(--lb-highlight-shadow);
-    pointer-events: none;
-  }
-
-  &:where([data-hidden]) {
-    opacity: 0;
-  }
-}
-
-.lb-attachment-icon {
-  flex: none;
-  overflow: visible;
-  color: var(--lb-foreground);
-}
-
-.lb-attachment-icon-glyph {
-  fill: var(--lb-foreground-moderate);
-}
-
-.lb-attachment-icon-background {
-  fill: var(--lb-background);
-}
-
-.lb-attachment-icon-fold {
-  fill-opacity: calc(0.75 * var(--lb-foreground-contrast));
-}
-
-.lb-attachment-icon-shadow {
-  filter: blur(6px);
-  fill-opacity: var(--lb-foreground-contrast);
-}
-
-.lb-file-attachment {
-  display: flex;
-  gap: calc(0.5 * var(--lb-spacing));
-  padding: calc(0.5 * var(--lb-spacing));
-  padding-inline-end: calc(0.65 * var(--lb-spacing));
-
-  :where(.lb-attachment-preview) {
-    display: flex;
-    flex: none;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    aspect-ratio: 1;
-    inline-size: 2.5rem;
-    border-radius: calc(0.5 * var(--lb-radius));
-    background: color-mix(
-      in srgb,
-      transparent,
-      var(--lb-foreground) var(--lb-foreground-contrast)
-    );
-    color: var(--lb-foreground-tertiary);
-    transition-property: background, color;
-  }
-
-  &:where([data-error]) {
-    :where(.lb-attachment-preview) {
-      background: var(--lb-destructive);
-      color: var(--lb-destructive-foreground);
-    }
-  }
-
-  :where(.lb-attachment-details) {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.25 * var(--lb-spacing));
-    justify-content: center;
-    min-inline-size: 0;
-    font-size: 0.875em;
-  }
-
-  :where(.lb-attachment-name),
-  :where(.lb-attachment-description) {
-    transition-property: color;
-  }
-
-  :where(.lb-attachment-name) {
-    color: var(--lb-foreground-secondary);
-    font-weight: 500;
-  }
-
-  :where(.lb-attachment-description) {
-    color: var(--lb-foreground-tertiary);
-  }
-
-  :where(:not([tabindex="-1"])) {
-    &:where(:hover, :focus-visible) {
-      :where(.lb-attachment-name) {
-        color: var(--lb-foreground);
-      }
-
-      :where(.lb-attachment-description) {
-        color: var(--lb-foreground-secondary);
-      }
-    }
-  }
-}
-
 /*************************************
  *        Inbox Notification         *
  *************************************/
@@ -1360,6 +1173,8 @@
 }
 
 .lb-inbox-notification-title {
+  @include capitalize;
+
   min-block-size: $lb-button-size;
 
   :where(strong, .lb-list, .lb-name) {
@@ -1408,8 +1223,7 @@
     font-size: 0.875rem;
   }
 
-  :where(.lb-comment-reaction),
-  :where(.lb-comment-attachment) {
+  :where(.lb-comment-reaction) {
     pointer-events: none;
   }
 }
@@ -1429,16 +1243,106 @@
 }
 
 /*************************************
- *      Inbox Notification List      *
+ *      History Version Summary      *
+ *************************************/
+
+.lb-history-version-summary {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.25 * var(--lb-spacing));
+  justify-content: center;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--lb-spacing);
+  background: var(--lb-dynamic-background);
+  transition-property: background;
+
+  &:where(:hover, :focus-visible, :focus-within, [data-selected]) {
+    --lb-dynamic-background: var(--lb-background-foreground-faint);
+  }
+}
+
+.lb-history-version-summary-date,
+.lb-history-version-summary-authors {
+  @include truncate;
+  @include capitalize;
+
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.lb-history-version-summary-date {
+  color: var(--lb-foreground-secondary);
+  font-weight: 500;
+}
+
+.lb-history-version-summary-authors {
+  color: var(--lb-foreground-tertiary);
+}
+
+/*************************************
+ *      History Version Previe       *
  *************************************/
 
-.lb-inbox-notification-list {
+.lb-history-version-preview {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--lb-dynamic-background);
+
+  /* overflow-block: auto; doesn't work as expected */
+  /* stylelint-disable-next-line plugin/use-logical-properties-and-values */
+  overflow-y: auto;
+}
+
+.lb-history-version-preview-content {
+  flex: 1 0 auto;
+  padding: var(--lb-spacing);
+}
+
+.lb-history-version-preview-footer {
+  position: sticky;
+  inset-block-end: 0;
+  display: flex;
+  flex: none;
+  gap: var(--lb-spacing);
+  align-items: center;
+  margin-block-start: auto;
+  padding: var(--lb-spacing);
+  border-block-start: 1px solid var(--lb-foreground-subtle);
+  background: var(--lb-dynamic-background);
+}
+
+.lb-history-version-preview-authors {
+  @include truncate;
+
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  color: var(--lb-foreground-tertiary);
+}
+
+.lb-history-version-preview-actions {
+  display: flex;
+  flex: none;
+  gap: calc(0.35 * var(--lb-spacing));
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+/*************************************
+ *               Lists               *
+ *************************************/
+
+.lb-inbox-notification-list,
+.lb-history-version-summary-list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.lb-inbox-notification-list-item {
+.lb-inbox-notification-list-item,
+.lb-history-version-summary-list-item {
   &:where(:not(:last-of-type)) {
     border-block-end: 1px solid var(--lb-foreground-subtle);
   }
@@ -1459,7 +1363,7 @@
   }
 
   /**
-   * Merge adjacent inline code elements
+   * Progressive enhancement: Merge adjacent inline code elements
    */
   :where(span:has(code) + span code) {
     padding-inline-start: 0;
@@ -1658,13 +1562,3 @@
     mask-position: -200% 0;
   }
 }
-
-@keyframes lb-animation-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}