@weavy/uikit-react 12.1.0 → 14.0.0

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

@@ -0,0 +1,129 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+
+
+.wy-comment-editor {
+  .wy-spinner {
+    display: none;
+  }
+
+  &.wy-uploading {
+    .wy-spinner {
+      display: block;
+    }
+
+    [data-icon=plus] {
+      display: none;
+    }
+  }
+
+  .wy-picker-list:not(:empty) {
+    border-top: 1px solid #{colors.$outline-variant};
+  }
+}
+
+
+.wy-comment-editor-bottom {
+  // we need the editor to appear below dropdowns
+  position: sticky;
+  bottom: 0;
+  z-index: #{vars.$zindex-dropdown - 1};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+}
+
+.wy-comment-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-comment-editor-inputs {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  //border-top: 1px solid #{colors.$outline-variant};
+  padding: .5rem .25rem;
+  min-height: 3.5rem;
+
+  > :not(:last-child) {
+    margin-right: .25rem;
+  }
+}
+
+.wy-comment-editor-buttons {
+  flex: 1 0 auto;
+}
+
+.wy-comment-editor-text {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.wy-comment-editor-mention {
+    background: blue;
+    color: white;
+}
+
+.wy-comment-editor-link {
+  background: blue;
+  color: white;
+}
+
+%comment-editor-textfield,
+.wy-comment-editor-textfield {
+  flex: 1 1 100%;
+  max-height: 11.25rem;
+  background-color: colors.$background;
+  color: colors.$on-background;
+  border-radius: 1.25rem;
+  border: vars.$input-border-width solid #{colors.$outline-variant};
+  
+  &:focus {
+    border-color: #{colors.$primary};
+  }
+  
+}
+
+%comment-editor-textcontent,
+.wy-comment-editor-textcontent {
+  font-family: vars.$font-family-base;
+  font-size: vars.$font-size-base;
+  padding: vars.$input-padding-y vars.$input-padding-x;
+}
+
+%comment-editor-grow,
+.wy-comment-editor-grow {
+    display: grid;
+
+    &::after, > textarea {
+        @extend %comment-editor-textfield;
+        grid-area: 1 / 1 / 2 / 2;
+    }
+
+    &::after {
+        content: attr(data-replicated-value) " ";
+        white-space: pre-wrap;
+        visibility: hidden;
+    }
+
+    > textarea {
+        resize: none;
+        overflow: hidden;
+    }
+}

package/src/scss/theme/_comments.scss

@@ -0,0 +1,66 @@
+@use "base/colors";
+@use "base/vars";
+@use "base/text";
+@use "reactions";
+
+.wy-comments {
+  padding: 0 1rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.wy-comments-count {
+  padding: 0 .5rem;
+  @include text.truncate;
+}
+
+
+.wy-comment {
+  --wy-component-background-color: #{colors.$surface-3};
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-border-radius: #{vars.$border-radius};
+  border-radius: var(--wy-component-border-radius);
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  padding: .25rem;
+  position: relative;
+
+  .wy-item {
+    padding-left: .75rem;
+    padding-right: .75rem;
+
+    > .wy-avatar, > .wy-icon, > .wy-icon-stack {
+      margin-left: -.25rem;
+    }
+  }
+
+  .wy-reactions-line {
+    position: absolute;
+    bottom: -1.125rem;
+    right: .25rem;
+  }
+}
+
+/*.wy-comment-header {
+  //padding-right: .25rem;
+}*/
+
+.wy-comment-body {
+
+  flex: 1 0 auto;
+  z-index: 1;
+    
+}
+
+.wy-comment-content {
+  padding: 0 .5rem .5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+
+

package/src/scss/theme/_content.scss

@@ -1,15 +1,43 @@
-@use "config" as *;
 
-// user content. e.g. text in comments, messages etc.
+@use "base/vars";
+@use "base/colors";
+
+// user generated content. e.g. text in comments, messages etc.
+.wy-content {
+  overflow-wrap: break-word;
+  min-width: 0;
+  // inline code
+  :not(pre) > code {
+    overflow-wrap: inherit;
+  }
+  // code block
+  pre, pre > code[class*=language-] {
+    white-space: pre-wrap;
+  }
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  :not(.wy-dark) &, &:not(.wy-dark) {
+    @import "code-vscode-light";
+  }
+
+  .wy-dark &, &.wy-dark {
+    @import "code-vscode-dark";
+  }
+}
 
 // hashtags
 .wy-hashtag {
-  color: $text-muted;
+  color: #{colors.$primary};
 }
 
 // mentions
 .wy-mention {
   font-weight: 500;
 }
-
-

package/src/scss/theme/_conversations.scss

@@ -1,91 +1,32 @@
-@use "config" as *;
-@use "bs/list-group";
-@use "avatar";
-@use "search";
-@use "typing";
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
 
 .wy-conversation {
   display: flex;
   position: relative;
-}
-
-.wy-conversation-link {
-  @extend 
-    %list-group-item, 
-    %list-group-item-action;
-  display: flex;
-  padding: .5rem;
-  border: none;
-  z-index: unset !important;
-
-  
-  &.wy-active {
-    background-color: $list-group-hover-bg;
-  }
-}
-
-.wy-conversation-body {
-  flex-grow: 1;
-  min-width: 0;
-  margin-left: 1rem;
-}
-
-.wy-conversation-header {
-  display: flex;
-  align-items: center;
-}
-
-.wy-conversation-title {
-  @include text-truncate();
-  margin-right: auto;
 
-  .wy-conversation.wy-unread & {
-    font-weight: $font-weight-bold;
+  .wy-item-title {
+    font-weight: vars.$font-weight-normal;
   }
-}
-
-.wy-conversation-time {
-  color: $text-muted;
-  font-size: $font-size-xs;
-  margin-left: .5rem;
-  margin-right: .25rem;
-  flex-shrink: 0;
-}
-
-.wy-conversation-summary {
-  @include text-truncate();
-
-  color: $text-muted;
-  font-size: $font-size-sm;
-  margin-right: 4rem; // room for icons
-
-  // vertically align text and icons
-  height: 1.5rem;
-  line-height: 1.5rem;
 
-  .wy-emoji {
-    vertical-align: -.3125rem;
-  }
-
-  .wy-icon {
-    vertical-align: -.4375rem;
-  }
+  &.wy-unread {
+    .wy-item-title {
+      font-weight: vars.$font-weight-bold;
+    }
 
-  .wy-conversation.wy-unread & {
-    font-weight: $font-weight-medium;
-    color: $body-color;
+    .wy-item-text, .wy-meta {
+      color: colors.$on-background;
+      font-weight: vars.$font-weight-semibold;
+    }
   }
 
-  .wy-typing-show {
-    @include text-truncate();
-    font-weight: $font-weight-normal;
+  .wy-item-text {
+    .wy-typing-show {
+      @include text.truncate;
+      font-weight: vars.$font-weight-normal;
+    }
   }
 }
 
-.wy-conversation-actions {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  right: .5rem;
-  bottom: .25rem;
-}
+

package/src/scss/theme/_dropdown.scss

@@ -1,5 +1,16 @@
-@use "config" as *;
-@use "bs/dropdown";
+@use "base/vars";
+@use "base/colors";
+
+$dropdown-spacer: .25rem;
+$dropdown-min-width: 10rem;
+$dropdown-padding-y: 0;
+$dropdown-padding-x: 0;
+$dropdown-font-size: vars.$font-size-base;
+$dropdown-border-radius: vars.$border-radius;
+$dropdown-box-shadow: vars.$shadow-level1;
+
+$dropdown-item-padding-y: .75rem;
+$dropdown-item-padding-x: 1rem;
 
 .wy-dropdown,
 .wy-dropup {
@@ -21,7 +32,31 @@
 }
 
 .wy-dropdown-menu {
-  @extend %dropdown-menu;
+  --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);
+
+  position: absolute;
+  z-index: vars.$zindex-dropdown;
+  //display: none; // none by default, but block on "open" of the menu
+  min-width: $dropdown-min-width;
+  padding: $dropdown-padding-y $dropdown-padding-x;
+  margin: 0; // Override default margin of ul
+  font-size: $dropdown-font-size;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-clip: padding-box;
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-box-shadow;
+  overflow: hidden;
+
+  &[data-bs-popper] {
+    top: 100%;
+    left: 0;
+    margin-top: $dropdown-spacer;
+  }
 
   display: block;
 
@@ -44,34 +79,81 @@
   }
 }
 
-.#{wy}-dropdown-menu-end {
+.wy-dropdown-menu-end {
   right: 0;
 }
 
-.#{wy}-dropdown-item {
-  @extend %dropdown-item;
+.wy-dropdown-item {
+  background-color: transparent; // For `<button>`s
+  color: var(--wy-component-color, #{colors.$on-surface});
+
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  clear: both;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: vars.$font-weight-normal;
+  line-height: 1;
+  text-align: inherit; // For `<button>`s
+  text-decoration: none;
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  border: 0; // For `<button>`s
+  gap: .25rem;
+
+  &:hover,
+  &:focus {
+    --wy-component-color: #{colors.$on-surface-variant};
+    --wy-component-background-color: #{colors.$surface-variant};
+
+    color: var(--wy-component-color);
+    background-color: var(--wy-component-background-color);
+    text-decoration: none;
+  }
+
+  &.wy-active,
+  &:active {
+    --wy-component-color: #{colors.$on-primary-container};
+    --wy-component-background-color: #{colors.$primary-container};
+
+    color: var(--wy-component-color);
+    background-color: var(--wy-component-background-color);
+    text-decoration: none;
+  }
+
+  &.wy-disabled,
+  &:disabled {
+    //--wy-component-color: #{colors.$on-surface};
+    //--wy-component-background-color: #{colors.$surface-3};
+
+    color: var(--wy-component-color);
+    background-color: var(--wy-component-background-color);
+    pointer-events: none;
+    opacity: vars.$opacity-disabled;
+  }
+
+
   cursor: pointer;
   display: flex;
   align-items: center;
 
-  > img, .#{wy}-icon {
+  > img, .wy-icon {
     margin-right: .5rem;
-    color: $icon-color;
+    color: inherit;
   }
 
   &:active {
-    > .#{wy}-icon {
-      $c: color-contrast($component-active-bg);
-      color: if($c == $color-contrast-light, $icon-light-color!important, $icon-color);
+    > .wy-icon {
+      color: inherit;
     }
   }
 
   // dropdown item with icon for marking selection option
-  &.#{wy}-option {
+  &.wy-option {
     .wy-icon {
       visibility: hidden;
     }
-    &.#{wy}-selected {
+    &.wy-selected {
       .wy-icon {
         visibility: visible;
       } 
@@ -80,7 +162,12 @@
 
 }
 
-.#{wy}-dropdown-divider {
-  @extend %dropdown-divider;
+
+.wy-dropdown-divider {
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  border: none;
+  border-top: 1px solid colors.$outline-variant;
 }
 

package/src/scss/theme/_embed.scss

@@ -0,0 +1,135 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
+
+
+.wy-embed {
+  display: flex;
+  flex-direction: column;
+  word-wrap: break-word;
+}
+
+// responsive image
+.wy-embed-photo {
+  a {
+    display: flex;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+// center small images
+.wy-embed-photo-sm {
+  a {
+    padding: 0 1rem;
+  }
+
+  img {
+    display: block;
+    margin: 0 auto;
+    width: auto;
+    max-width: 100%;
+    border-radius: #{vars.$border-radius-sm};
+  }
+}
+
+// responsive video
+.wy-embed-video {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    display: block;
+    content: "";
+    padding-top: 56.25% // 16:9 aspect ratio
+  }
+
+  iframe, embed, object, video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0
+  }
+}
+
+// embed caption with link, title and description
+.wy-embed-caption {
+  --wy-component-background-color: #{colors.$surface-3};
+  --wy-component-color: #{colors.$on-surface};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  padding: .5rem 1rem 1rem;
+  position: relative; // so that entore footer can become clickable
+}
+
+.wy-embed-link {
+  color: colors.$outline;
+  text-transform: uppercase;
+  font-size: #{vars.$font-size-sm};
+  // make entire footer clickable via a ::after pseudo element.
+  @include text.stretched-link;
+}
+
+.wy-embed-title {
+  font-weight: #{vars.$headings-font-weight};
+  margin-bottom: .5rem;
+}
+
+.wy-embed-description {
+  color: colors.$outline;
+}
+
+// Override some styles when previewing the embed in editor
+.wy-embed-preview {
+  // prevent link click
+  a[target=_blank] {
+    pointer-events: none;
+  }
+  // add som margins and borders in preview
+  .wy-embed {
+    display: none;
+
+    &:first-child {
+      display: block;
+    }
+
+    margin: .75rem;
+    border: 1px solid colors.$outline-variant;
+    border-radius: #{vars.$border-radius};
+  }
+
+  .wy-embed-caption {
+    border-bottom-left-radius: #{vars.$border-radius};
+    border-bottom-right-radius: #{vars.$border-radius};
+  }
+
+  // show cycle/remove
+  .wy-embed-actions {
+    display: flex;
+  }  
+}
+
+
+// buttons for cycling through and removing embeds (only visible in editor)
+.wy-embed-actions {
+  display: none;
+  justify-content: space-between;
+  padding: .5rem .25rem;
+}
+
+.wy-embed-cycle {
+  visibility: hidden;
+
+  .wy-embed-show-cycle & {
+    visibility: visible;
+  }
+}

package/src/scss/theme/_facepile.scss

@@ -0,0 +1,11 @@
+.wy-facepile {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  flex-direction: row-reverse;
+  
+  .wy-avatar {
+    margin-left: -.25rem;
+    display: inline-flex;
+  }
+}

package/src/scss/theme/_filebrowser.scss

@@ -1,5 +1,5 @@
 // External filebrowsers
-.wy-filebrowser {
+.wy-filebrowsers {
   pointer-events: none;
   width: auto;
   left: 0;