@weavy/uikit-react 12.1.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 {
@@ -19,13 +50,13 @@
       display: block;
     }
 
-    .wy-icon-attachment {
+    [data-icon=plus] {
       display: none;
     }
   }
 
   .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 {