@weavy/uikit-react 13.0.0 → 14.0.0

package/src/scss/theme/_item.scss

@@ -0,0 +1,169 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
+
+// An individual (list) item with support for icon/img, content and actions.
+.wy-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .25rem .75rem;
+  text-decoration: none;
+  min-height: 3rem;
+  // Adjust position of icon/avatar (makes padding/margin look ok for all combinations of item content)
+  > .wy-avatar, > .wy-icon, > .wy-icon-stack {
+    margin-left: -.25rem;
+  }
+}
+
+.wy-item-body {
+  width: 100%;
+  @include text.truncate;
+
+  > * {
+    @include text.truncate;
+  }
+  // adjust position of buttons/emoji
+  + .wy-dropdown, + .wy-button-icon, + .wy-item-actions {
+    margin-right: -.5rem;
+  }
+
+  + .wy-emoji {
+    margin-right: .125rem;
+  }
+
+}
+
+.wy-item-title {
+  color: colors.$on-background;
+  font-weight: vars.$headings-font-weight;
+  @include text.truncate;
+}
+
+.wy-item-text {
+  color: colors.$outline;
+  @include text.truncate;
+  font-size: vars.$font-size-sm;
+
+  .wy-emoji, .wy-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    vertical-align: -.3125rem;
+  }
+}
+
+// For items with more than one action, and items with top/bottom positioned actions
+.wy-item-actions {
+  --wy-component-background-color: transparent;
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+.wy-item-actions-top {
+  position: absolute;
+  top: .25rem;
+  right: .25rem;
+  margin:0 !important;
+}
+
+.wy-item-actions-bottom {
+  position: absolute;
+  bottom: .25rem;
+  right: .25rem;
+  margin: 0 !important;
+}
+
+.wy-item-body:has(+ .wy-item-actions-bottom) {
+  .wy-item-row:last-child {
+    // room for 2 icons
+    margin-right: 4.5rem;
+  }
+}
+
+.wy-item-body:has(+ .wy-item-actions-top) {
+  .wy-item-row:first-child {
+    // room for 1 icon
+      margin-right: 2rem;
+  }
+}
+
+.wy-item-row {
+  display: flex;
+  align-items: center;
+
+  &:first-child {
+    margin-bottom: .125rem;
+  }
+
+  .wy-item-title {
+    margin-right: auto;
+  }
+
+  .wy-item-text {
+    margin-right: auto;
+  }
+
+
+  .wy-meta {
+    margin: 0 .25rem;
+    white-space: nowrap;
+  }
+}
+
+// An actionable item with hover, disabled, and active states.
+.wy-item-hover {
+  //--wy-component-background-color: #{colors.$surface-1};
+  //--wy-component-color: #{colors.$on-surface};
+  //background-color: var(--wy-component-background-color);
+  //color: var(--wy-component-color);
+
+  user-select: none;
+  cursor: pointer;
+
+  // Hover state
+  &:hover,
+  &:focus {
+    --wy-component-background-color: #{colors.$surface-2};
+    --wy-component-color: #{colors.$on-surface};
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+    text-decoration: none;
+  }
+
+  &:active {
+    --wy-component-background-color: #{colors.$surface-variant};
+    --wy-component-color: #{colors.$on-surface-variant};
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+  }
+
+  &.wy-disabled,
+  &:disabled {
+    //--wy-component-background-color: #{colors.$surface-1};
+    //background-color: var(--wy-component-background-color);
+    opacity: vars.$opacity-disabled;
+    pointer-events: none;
+  }
+  // Include both here for `<a>`s and `<button>`s
+  &.wy-active {
+    --wy-component-background-color: #{colors.$primary-container};
+    --wy-component-color: #{colors.$on-primary-container};
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+    border-color: var(--wy-component-background-color);
+  }
+}
+
+// Item with room for larger icon and two rows of content
+.wy-item-lg {
+  padding: .75rem;
+  min-height: 4.5rem;
+  gap: .75rem;
+
+  // adjust position of icon/avatar
+  > .wy-avatar, > .wy-icon, > .wy-icon-stack {
+    margin-left: 0;
+  }
+}

package/src/scss/theme/_list.scss

@@ -0,0 +1,57 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
+
+// A list of items with rounded corners and spacing to visually group them together
+.wy-list {
+  border-radius: vars.$border-radius-sm;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+
+  .wy-item {
+
+    &:not(.wy-item-hover) {
+      --wy-component-background-color: #{colors.$background};
+      --wy-component-color: #{colors.$on-background};
+      background-color: var(--wy-component-background-color);
+      color: var(--wy-component-color);
+    }
+
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+}
+
+// A list of items with rounded corners and borders to visually group them together
+.wy-list-bordered {
+  border: 1px solid #{colors.$outline-variant};  
+  gap:0;
+
+  .wy-item {
+    border-top: 1px solid #{colors.$outline-variant};
+    border-left: none;
+    border-right: none;
+
+    &:first-child {
+      border-top: none;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    & + & {
+      // No top-border on following items
+      border-top-width: 0;
+    }
+  }
+}

package/src/scss/theme/_meeting.scss

@@ -0,0 +1,11 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-meeting {
+  flex: 1 1 100%;
+  align-items: flex-start;
+}
+
+.wy-meeting-actions {
+    margin-top: .5rem;
+}

package/src/scss/theme/_message-editor-cm.scss

@@ -0,0 +1,95 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
+@use "base/svg";
+@use "message-editor";
+
+.wy-message-editor {
+  .ͼ1 .cm-scroller {
+    font-family: unset;
+    line-height: 1.5;
+  }
+
+  .ͼ1 .cm-widgetBuffer {
+    vertical-align: unset;
+  }
+
+  .ͼ1 .cm-placeholder {
+    color: #{colors.$outline};
+  }
+
+  .ͼ1.cm-editor {
+    @extend %message-editor-textfield;
+
+    &.cm-focused {
+      /* default theme in codemirror seems difficult to override */
+      --wy-component-color: #{colors.$on-background};
+      color: var(--wy-component-color);
+      border-color: #{colors.$outline-variant};
+      outline: 0;
+    }
+
+    .cm-content {
+      @extend %message-editor-textcontent;
+    }
+
+    .cm-scroller {
+      overflow: auto;
+
+      .wy-scrollbars & {
+        @include scroll.custom-scrollbar;
+        // scrollbar offsets
+        @include scroll.scrollbar-top-padding(0.375rem);
+        @include scroll.scrollbar-bottom-padding(0.375rem);
+      }
+    }
+  }
+
+  .wy-is-invalid + [data-editor-target] .cm-editor {
+    border-color: colors.$error !important;
+  }
+  // autocomplete dropdown menu
+  .ͼ1 {
+    .cm-tooltip.cm-tooltip-autocomplete > ul {
+      font-family: unset;
+      max-height: 15rem; // room for 5 items
+
+      > li {
+        padding: 0;
+      }
+    }
+  }
+
+  .ͼ2 {
+    .cm-tooltip {
+      border: none;
+      background-clip: padding-box;
+      background-color: #{colors.$surface-2};
+      color: #{colors.$on-surface};
+      border-radius: vars.$border-radius;
+      box-shadow: vars.$shadow-level1;
+      overflow: hidden;
+      z-index: vars.$zindex-dropdown;
+    }
+
+    .cm-tooltip-autocomplete ul li[aria-selected] {
+      background: #{colors.$primary-container};
+      color: unset;
+    }
+  }
+
+  .cm-tooltip-autocomplete {
+    .cm-completionLabel {
+      display: none;
+    }
+
+    .wy-item-hover:hover, .wy-item-hover:focus {
+      background: #{colors.$surface-variant};
+    }
+
+    .wy-avatar {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}

package/src/scss/theme/_message-editor.scss

@@ -1,12 +1,43 @@
-@use "config" as *;
-@use "mixins/backdrop";
-@use "mixins/position";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+
 
 .wy-message-editor {
+  //background-color: colors.$surface-1;
+}
+
+.wy-message-editor-top {
+  @include position.sticky-top;
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+}
+
+.wy-message-editor-bottom {
   @include position.sticky-bottom;
-  @include backdrop.filter;
 
-  background-color: rgba($light, $opacity-backdrop);
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+}
+
+.wy-message-editor-dragging {
+  &::after {
+    content: "Drop files here to upload.";
+    background-color: rgba(255, 255, 255, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed colors.$primary;
+    font-weight: vars.$font-weight-bold;
+    z-index: 10000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
 }
 
 .wy-message-form {
@@ -25,7 +56,7 @@
   }
 
   .wy-picker-list:not(:empty) {
-    border-top: $border-width solid $border-color;
+    border-top: 1px solid #{colors.$outline-variant};
   }
 }
 
@@ -33,12 +64,12 @@
   display: flex;
   flex-direction: row;
   align-items: flex-end;
-  border-top: $border-width solid rgba($gray-200, $opacity-backdrop);
-  padding: .5rem;
-  min-height: 3rem;
+  //border-top: 1px solid #{colors.$outline-variant};
+  padding: .5rem .25rem;
+  min-height: 3.5rem;
 
   > :not(:last-child) {
-    margin-right: .5rem;
+    margin-right: .25rem;
   }
 }
 
@@ -51,25 +82,40 @@
   display: flex;
   flex-direction: column;
 }
+
+.wy-message-editor-mention {
+    background: blue;
+    color: white;
+}
+
+.wy-message-editor-link {
+  background: blue;
+  color: white;
+}
+
 %message-editor-textfield,
 .wy-message-editor-textfield {
   flex: 1 1 100%;
-  outline: $light solid 1px;
-  max-height: 10.2rem;
-  background-color: $input-bg;
-  border-radius: $border-radius-xl;
-  border: none;
+  max-height: 11.25rem;
+  background-color: colors.$background;
+  color: colors.$on-background;
+  border-radius: 1.25rem;
+  border: vars.$input-border-width solid #{colors.$background};
+
+  &:focus {
+    border-color: #{colors.$outline-variant};
+  }
 }
 
 %message-editor-textcontent,
 .wy-message-editor-textcontent {
-  font-family: $font-family-base;
-  font-size: $font-size-base;
-  padding: $input-padding-y $input-padding-x;
+  font-family: vars.$font-family-base;
+  font-size: vars.$font-size-base;
+  padding: vars.$input-padding-y vars.$input-padding-x;
 }
 
 %message-editor-grow,
-.#{wy}-message-editor-grow {
+.wy-message-editor-grow {
     display: grid;
 
     &::after, > textarea {

package/src/scss/theme/_messages.scss

@@ -1,11 +1,10 @@
 @use "sass:color";
-@use "config" as *;
-@use "reactions";
+@use "base/vars";
+@use "base/colors";
 
 .wy-messages {
   padding: 1rem 1rem 0 .75rem;
   flex: 1 1 100%;
-
 }
 
 .wy-message-placeholder {
@@ -13,24 +12,25 @@
 }
 
 .wy-date-separator {
-  font-size: $font-size-xs;
+  font-size: vars.$font-size-xs;
   pointer-events: none;
   margin: .5rem;
   text-align: center;
   position: sticky;
   top: 1.5rem;
-  z-index: 2;
+  z-index: 10;
 
   time {
-    background: $light;
+    background: colors.$surface-3;
+    color: colors.$on-surface;
     padding: .25rem .5rem;
-    border-radius: $border-radius;
+    border-radius: vars.$border-radius-sm;
     display: inline-block;
   }
 }
 
 .wy-appbars + .wy-pane-body .wy-date-separator {
-  top: $appbar-height + 1.5rem;
+  top: vars.$appbar-height + 1.5rem;
 }
 
 
@@ -42,70 +42,51 @@
 
   .wy-image-grid,
   .wy-attachments {
-    border-radius: $border-radius-lg;
-  }
-
-  &:hover {
-    .wy-message-buttons {
-      opacity: 1;
-    }
-  }
-
-  .wy-reaction-menu {
-    right: 0;
+    border-radius: vars.$border-radius;
   }
 }
 
 .wy-message-meta {
-  font-size: $font-size-xs;
+  font-size: vars.$font-size-xs;
   margin: 0 0 .25rem .25rem;
-  color: $text-muted;
+  color: colors.$on-surface-variant;
 }
 
 .wy-message-bubble {
-  background-color: $gray-50;
-  border-radius: $border-radius-xl;
+  --wy-component-background-color: #{colors.$surface-variant};
+  --wy-component-color: #{colors.$on-surface-variant};
+  //--wy-component-border-radius: #{vars.$border-radius};
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  //border-radius: var(--wy-component-border-radius);
+
+  border-radius: calc(vars.$border-radius + .5rem);
   display: flex; //inline-block;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-direction: column;
   padding: .75rem;
+  gap: .75rem;
   max-width: min(32rem, calc(100% - 2rem));
-  min-width: 10rem;
 
   > div {
     // message section (images, attachments, embeds etc.)
-    margin-bottom: .5rem;
     flex: 1 1 100%;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.wy-message-text {
-  overflow-wrap: break-word;
-  min-width: 0;
-
-  // inline code
-  :not(pre) > code {
-    overflow-wrap: inherit;
   }
 
-  // code block
-  pre, pre > code {
-    white-space: pre-wrap;
-  }
-
-  :last-child {
-    margin-bottom: 0;
-  }
+  .wy-reactions-line {
+    position: relative;
+    height: 0;
+    min-height: 0;
+    max-height: 0;
 
-  &:empty {
-    display: none;
+    margin: 0 -.75rem -.75rem;
+    flex: 0 0 0;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
   }
 }
 
+
 .wy-message-author {
   margin: 1.375rem .5rem 0 0;
 }
@@ -118,16 +99,6 @@
   flex-wrap: wrap;
   min-width: 0;
   position: relative; // so that we can position reactions
-
-  .wy-reactions {
-    position: absolute;
-    bottom: -.75rem;
-    left: .75rem;
-    background: $gray-50;
-    border-radius: 1.5rem;
-    border: $border-width solid $gray-50;
-    padding: .125rem;
-  }
 }
 
 .wy-message-content-row {
@@ -137,14 +108,6 @@
   max-width: 100%;
 }
 
-.wy-message-buttons {
-  display: flex;
-  flex-direction: row;
-  column-gap: .25rem;
-  margin: .25rem;
-  opacity: 0;
-}
-
 // override some styles for message by current user
 .wy-message-me {
   margin-right: 0;
@@ -163,24 +126,21 @@
     flex-direction: row-reverse;
   }
 
-  .wy-message-buttons {
-    flex-direction: row-reverse;
-  }
-
   .wy-message-bubble {
-    background-color: $primary-50;
-  }
+    --wy-component-background-color: #{colors.$primary-container};
+    --wy-component-color: #{colors.$on-primary-container};
+    //--wy-component-border-radius: #{vars.$border-radius};
 
-  .wy-reaction-menu {
-    justify-content: flex-start;
-    right: auto;
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+    //border-radius: var(--wy-component-border-radius);
   }
 
-  .wy-reactions {
-    background: $primary-50;
-    border-color: $primary-50;
-    left: auto;
-    right: .75rem;
+  .wy-reactions-line {
+    flex-direction: row;
+    .wy-dropdown-menu {
+      right: 0;
+    }
   }
 }
 
@@ -188,16 +148,22 @@
 .wy-message-emoji {
   .wy-message-bubble {
     background: none;
-    padding: 0;
+    padding: 0 0 .75rem;
   }
 
-  .wy-message-text {
+  .wy-content {
     .wy-emoji {
       width: 3rem;
       height: 3rem;
       margin: 0;
     }
   }
+
+  &.wy-message-me {
+    .wy-content {
+      text-align: end;
+    }
+  }
 }
 
 // message status indicator (sending, sent, delivered, read)
@@ -212,26 +178,6 @@
   }
 }
 
-.wy-message-toaster {
-  position: sticky;
-  top: 3.5rem;
-  bottom: 3.5rem;
-  cursor: pointer;
-  z-index: 3;
-  border-radius: 50rem;
-  background-color: $primary;
-  color: $white;
-  padding: .5rem 1rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: .5rem;
-  font-size: $font-size-sm;
-  width: max-content;
-  align-self: center;
-  text-align: center;
-  color: $white;
-}
-
 .wy-message-readmore {
   justify-self: center;
   text-align: center;