@weavy/uikit-react 13.0.0 → 14.0.1

package/src/scss/theme/_meta.scss

@@ -0,0 +1,12 @@
+@use "base/vars";
+@use "base/colors";
+
+// A component for item metadata such as dates, times etc.
+.wy-meta {
+  color: colors.$outline;
+  font-size: vars.$font-size-sm;
+}
+
+.wy-meta-sm {
+  font-size: vars.$font-size-xs;
+}

package/src/scss/theme/_overlays.scss

@@ -1,4 +1,6 @@
-@use "config" as *;
+@use "base/vars";
+@use "base/colors";
+@use "base/breakpoints";
 
 .wy-viewport {
     position: fixed;
@@ -6,7 +8,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 2147483647; /* max possible z-index */;
+    z-index: vars.$zindex-max; /* max possible z-index */;
     pointer-events: none;
 }
 
@@ -30,7 +32,7 @@
     perspective-origin: center center;
 
     .wy-panel {
-        background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+        background-color: colors.$background;
         //max-height: 100vh; // Causes height error in safari
 
         &:not(.wy-transition) {
@@ -42,10 +44,10 @@
             border-bottom: none;
             flex-direction: row;
             transition: opacity .1s .2s step-end;
-
+            //background: colors.$surface-1;
 
             .wy-icon {
-                color: $icon-color;
+                color: colors.$on-surface;
             }
         }
 
@@ -60,74 +62,9 @@
             background-color: transparent;
         }
 
-        &.wy-controls-light {
-            .wy-icon {
-                color: $icon-color;
-            }
-        }
-
-        &.wy-light {
-            background-color: rgba(mix($white, #FFF), $opacity-backdrop);
-
-            .wy-icon {
-                color: $icon-color;
-            }
-        }
-
-        &.wy-controls-dark {
-            .wy-icon {
-                color: $navbar-dark-color;
-
-                &:hover, &:focus {
-                    color: $navbar-dark-hover-color;
-                }
-
-                &:active {
-                    color: $navbar-dark-active-color;
-                }
-            }
-        }
-
-        &.wy-dark {
-            background-color: rgba(mix($dark, #000), $opacity-backdrop);
-
-            .wy-icon {
-                color: $navbar-dark-color;
-
-                &:hover, &:focus {
-                    color: $navbar-dark-hover-color;
-                }
-
-                &:active {
-                    color: $navbar-dark-active-color;
-                }
-            }
-
-            &.wy-open[data-title]::before {
-                background-color: rgba($dark, $opacity-backdrop);
-                color: $navbar-dark-color;
-                box-shadow: rgba($gray-800, $opacity-backdrop) 0px -1px 0px 0px inset
-            }
-        }
-
-        &.wy-floating {
-            @include media-breakpoint-up(md, $grid-breakpoints) {
-                left: 1rem;
-                top: 1rem;
-                right: 1rem;
-                bottom: 1rem;
-                border-radius: .1875rem;
-                box-shadow: $md-shadow-16dp;
-                &:not(.wy-scroll-y) {
-                    overflow: hidden;
-                }
-            }
-        }
-
         &.wy-modal {
-            background-color: rgba(mix($white, #FFF), $opacity-backdrop);
-
-            @include media-breakpoint-up(md, $grid-breakpoints) {
+            // TODO: REMOVE BREAKPOINTS
+            @include breakpoints.media-breakpoint-up(md) {
                 left: auto;
                 right: auto;
                 top: 2rem;
@@ -136,8 +73,8 @@
                 margin-top: auto;
                 margin-right: 4rem;
                 margin-bottom: auto;
-                border-radius: .25rem;
-                box-shadow: $md-shadow-16dp;
+                border-radius: vars.$border-radius; //.25rem;
+                box-shadow: vars.$shadow-level4;
                 width: 32rem;
                 max-height: 32rem;
                 &:not(.wy-scroll-y) {
@@ -146,10 +83,28 @@
             }
         }
 
+        &.wy-modal-full {
+            // TODO: REMOVE BREAKPOINTS
+            @include breakpoints.media-breakpoint-up(md) {
+                left: 1rem;
+                top: 1rem;
+                right: 1rem;
+                bottom: 1rem;
+                margin: 0;
+                border-radius: vars.$border-radius; //.1875rem;
+                box-shadow: vars.$shadow-level4;
+                width: auto;
+                max-height: none;
+                &:not(.wy-scroll-y) {
+                    overflow: hidden;
+                }
+            }
+        }
+
         &.wy-loading {
             .wy-controls {
-                transition: opacity $md-animation-duration $md-animation-curve-default;
-                //transition: opacity .2s .2s variables.$md-animation-curve-default;
+                transition: opacity vars.$transition;
+                //transition: opacity variables.$transition .2s;
                 opacity: 1;
             }
         }

package/src/scss/theme/_pager.scss

@@ -2,7 +2,7 @@
   pointer-events: none;
 }
 
-a.wy-pager {
+:not(tr).wy-pager {
   display: block;
   text-align: center;
   margin: 1rem auto;
@@ -17,3 +17,7 @@ tr.wy-pager td {
     margin: 1rem auto;
   }
 }
+
+.wy-grid .wy-pager {
+    display: flex;
+}

package/src/scss/theme/_pane.scss

@@ -1,8 +1,12 @@
+@use "base/colors";
+
 .wy-pane {
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
+  min-height: 0;
+  height: 100%;
+  flex: 1 1 auto;
 }
 
 .wy-pane-body {
@@ -12,5 +16,12 @@
 }
 
 .wy-pane-group {
-  padding: .5rem;
+  padding: .75rem;
+}
+
+.wy-pane-background {
+  --wy-component-background-color: #{colors.$background};
+  --wy-component-color: #{colors.$on-background};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
 }

package/src/scss/theme/_panels.scss

@@ -1,5 +1,8 @@
-@use "config" as *;
-@use "mixins/backdrop";
+@use "sass:color";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/svg";
 
 .wy-panels {
     position: absolute;
@@ -20,14 +23,14 @@
     left: 0;
     pointer-events: none;
     overflow: hidden;
-    background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+    background-color: colors.$background;
     display: flex;
     flex-direction: column;
 
     .wy-controls {
-        top: .75rem;
-        left: .75rem;
-        min-width: 2rem;
+        top: .25rem;
+        left: .25rem;
+        min-width: 2.5rem;
         width: auto;
         display: flex;
         z-index: 10000;
@@ -39,20 +42,22 @@
         }
 
         .wy-icon {
-            color: $icon-color;
+            color: colors.$on-background;
         }
 
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid colors.$outline-variant;
     }
 
     .wy-panel-frame {
-        transition: opacity .1s .2s $md-animation-curve-default;
+        transition: opacity vars.$transition-fast;
+        transition-delay: .2s;
         opacity: 1;
     }
 
     &:not(.wy-loaded) .wy-panel-frame {
         opacity: 0;
-        transition: opacity .2s .1s step-start;
+        transition: opacity .2s step-start;
+        transition-delay: .1s;
     }
 
     &.wy-open {
@@ -65,23 +70,22 @@
             top: 0;
             left: 0;
             right: 0;
-            height: $appbar-height;
-            padding: $navbar-padding-y $navbar-padding-x;
+            height: vars.$appbar-height;
+            padding: .25rem;
             opacity: 0;
             pointer-events: none;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: opacity .1s .2s step-end;
-            font-family: var(--#{$prefix}font-sans-serif, #{$font-family-sans-serif});
-            line-height: $line-height-base;
-            font-weight: $font-weight-base;
-
-            background-color: rgba($gray-50, $opacity-backdrop);
-            color: $navbar-light-color;
-            //border-bottom: $border-width solid rgba($gray-200, $opacity-backdrop);
-            box-shadow: rgba($gray-200, $opacity-backdrop) 0px -1px 0px 0px inset;
+            transition: opacity .1s step-end;
+            transition-delay: .2s;
+            font-family: inherit;
+            line-height: vars.$line-height-base;
+            font-weight: vars.$font-weight-base;
 
+            background-color: colors.$surface-1;
+            color: colors.$on-surface;
+            box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
 
             @include backdrop.filter;
         }
@@ -95,20 +99,21 @@
             right: 0;
             pointer-events: none;
             opacity: 0;
-            transition: opacity $md-animation-duration $md-animation-curve-default 0s;
+            transition: opacity vars.$transition;
+            transition-duration: 0s;
         }
 
         &.wy-loading {
             &[data-title]::before {
-                transition: opacity $md-animation-duration $md-animation-curve-default;
+                //transition: opacity vars.$transition;
                 opacity: 1;
             }
 
             &::after {
-                transition: opacity $md-animation-duration $md-animation-curve-default .5s;
+                transition: opacity vars.$transition;
+                transition-duration: .5s;
                 opacity: 1;
-                // spinner.svg encoded with https://codepen.io/jakob-e/pen/doMoML
-                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3Eg%7Banimation:rotate 2s linear infinite;transform-origin:center center%7Dcircle%7Bstroke-dasharray:1,100;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite%7D@keyframes rotate%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes dash%7B0%25%7Bstroke-dasharray:1,100;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-17.5px%7D100%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-62px%7D%7D@keyframes color%7B0%25,100%25%7Bstroke:%23216eb4%7D40%25%7Bstroke:%2328b7cf%7D66%25%7Bstroke:%23216eb4%7D80%25,90%25%7Bstroke:%2328b7cf%7D%7D%3C/style%3E%3Cg%3E%3Ccircle fill='none' cx='12' cy='12' r='11' stroke-linecap='butt' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E");
+                background-image: svg.$spinner;
                 background-repeat: no-repeat;
                 background-position: 50%;
                 background-size: rem(2);
@@ -122,10 +127,10 @@
 .wy-panel {
     opacity: 0;
     visibility: hidden;
-    transition: opacity $md-animation-duration-fast $md-animation-curve-default .01s, transform $md-animation-duration-fast $md-animation-curve-default .01s, visibility .01s step-end $md-animation-duration-fast;
+    transition: opacity vars.$transition-fast .01s, transform vars.$transition-fast .01s, visibility .01s step-end vars.$transition-duration-fast;
 
     &.wy-open {
-        transition: opacity $md-animation-duration $md-animation-curve-default, transform $md-animation-duration $md-animation-curve-default, visibility $md-animation-duration step-start;
+        transition: opacity vars.$transition, transform vars.$transition, visibility vars.$transition-duration step-start;
         visibility: visible;
 
         &.wy-transition {

package/src/scss/theme/_picker-list.scss

@@ -1,7 +1,9 @@
-@use "config" as *;
-
+@use "base/text";
 
 .wy-picker-list {
+  background: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  
   border: none;
 
   > .wy-picker-list-item:first-child, > :first-child .wy-picker-list-item {
@@ -33,5 +35,5 @@
 
 .wy-picker-list-item-title {
   flex-grow: 1;
-  @include text-truncate();
+  @include text.truncate;
 }

package/src/scss/theme/_placeholder.scss

@@ -0,0 +1,19 @@
+@use "base/colors";
+
+$placeholder-opacity-max: .5;
+$placeholder-opacity-min: .2;
+
+.wy-placeholder {
+  cursor: wait;
+  color: var(--wy-outline);
+  background-color: var(--wy-outline);
+  opacity: $placeholder-opacity-max;
+  animation: wy-placeholder-glow 2s ease-in-out infinite;
+}
+
+@keyframes wy-placeholder-glow {
+  50% {
+    opacity: $placeholder-opacity-min;
+  }
+}
+

package/src/scss/theme/_poll.scss

@@ -0,0 +1,49 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-poll {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+.wy-poll-form {
+  background: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  padding: .5rem;
+
+  &:empty {
+    display: none;
+  }
+
+  input:not(:first-child) {
+    margin-top: .5rem;
+  }
+}
+
+.wy-poll-option {
+  position: relative;
+  background-color: #{colors.$background};
+  border: 1px solid #{colors.$outline-variant};
+  border-radius: vars.$border-radius-sm;
+  margin-bottom: .25rem;
+  padding: 0.25rem 1rem;
+  min-height: 2.5rem;
+  cursor: pointer;
+
+  .wy-progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background-color: #{colors.$primary-container};
+  }
+
+  > :not(.wy-progress) {
+    z-index: 1;
+  }
+
+  .wy-facepile {
+    margin-right: -.5rem;
+  }
+}
+

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

@@ -0,0 +1,100 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
+@use "base/svg";
+@use "post-editor";
+
+
+.wy-post-editor {
+  .ͼ1 .cm-scroller {
+    font-family: unset;
+    line-height: 1.5;
+  }
+
+  .ͼ1 .cm-widgetBuffer {
+    vertical-align: unset;
+  }
+
+  .ͼ1 .cm-placeholder {
+    color: #{colors.$outline};
+  }
+
+  .ͼ2 .cm-content {
+    caret-color: #{colors.$primary};
+  }
+
+  .ͼ1.cm-editor {
+    @extend %post-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.$primary};
+      outline: 0;
+    }
+
+    .cm-content {
+      @extend %post-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/_post-editor.scss

@@ -0,0 +1,127 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+
+.wy-post-editor {
+  padding: .75rem;
+
+  &.wy-uploading {
+    .wy-icon-active-stack {
+      > :first-child {
+        opacity: 0;
+      }
+
+      > :last-child {
+        opacity: 1;
+      }
+    }
+  }
+
+  .wy-picker-list:not(:empty) {
+    margin-top: .75rem;
+    border-top: 1px solid #{colors.$outline-variant};
+  }
+}
+
+
+.wy-post-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-post-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;
+  flex-wrap: wrap;
+
+  > :not(:last-child) {
+    margin-right: .25rem;
+  }
+
+  > :last-child {
+    margin-left: auto;
+  }
+}
+
+.wy-post-editor-buttons {
+  flex: 1 0 auto;
+}
+
+.wy-post-editor-text {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.wy-post-editor-mention {
+    background: blue;
+    color: white;
+}
+
+.wy-post-editor-link {
+  background: blue;
+  color: white;
+}
+
+%post-editor-textfield,
+.wy-post-editor-textfield {
+  flex: 1 1 100%;
+  max-height: 11.25rem;
+  min-height: 4rem;
+  background-color: colors.$background;
+  color: colors.$on-background;
+  border-radius: vars.$border-radius;
+  border: vars.$input-border-width solid #{colors.$outline-variant};
+  caret-color: #{colors.$primary};
+
+  &:focus {
+    border-color: #{colors.$primary};
+  }
+}
+
+%post-editor-textcontent,
+.wy-post-editor-textcontent {
+  font-family: vars.$font-family-base;
+  font-size: vars.$font-size-base;
+  padding: vars.$input-padding-y vars.$input-padding-x;
+}
+
+%post-editor-grow,
+.wy-post-editor-grow {
+    display: grid;
+
+    &::after, > textarea {
+        @extend %post-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;
+    }
+}