@weavy/uikit-react 12.1.0 → 14.0.0

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;
+    }
+}

package/src/scss/theme/_post.scss

@@ -0,0 +1,83 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-post {
+  --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);
+  // REVIEW: box-shadow instead of border?
+  //box-shadow: vars.$md-shadow-2dp;
+
+  //border-color: #{colors.$outline-variant};
+  //border-style: solid;
+  //border-width: 1px 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin: 1rem .75rem;
+
+  --wy-component-border-radius: #{vars.$border-radius};
+  border-radius: var(--wy-component-border-radius);
+
+  .wy-image-grid {
+    border-radius: 0;
+    margin-bottom: 1rem;
+  }
+
+  .wy-embed {
+    margin-bottom: 1rem;
+  }
+
+  .wy-comments {
+    margin: .5rem .75rem;
+    border-top: 1px solid #{colors.$outline-variant};
+    padding: .75rem 0 0;
+  }
+  
+}
+
+.wy-post-body {
+  padding: 0 1rem;
+
+  &:empty {
+    display: none;
+  }
+
+  .wy-content {
+    margin-bottom: 1rem;
+  }
+
+  .wy-list {
+    margin-bottom: 1rem;
+  }
+
+  .wy-poll {
+    margin-bottom: 1rem;
+  }
+}
+
+.wy-post-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 .5rem .5rem;
+}
+
+.wy-post-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;
+  }
+}

package/src/scss/theme/_preview-code.scss

@@ -0,0 +1,14 @@
+@use "base/colors";
+
+.wy-content-code {
+  /*--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);
+  */
+
+  align-self: flex-start;
+  width: 100%;
+  padding: 2rem 3.5rem;
+}

package/src/scss/theme/_preview-embed.scss

@@ -1,23 +1,29 @@
-@use "variables" as *;
+@use "base/colors";
 
 // Embedded iframes
 
-.wy-content-iframe, [data-controller~="embed"] {
+.wy-content-iframe {
   border: 0;
   display: block;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
   flex: 1 1 100%;
 
-  &:not(.wy-loading):not([data-controller~="embed"]), &[data-controller~="embed"].wy-loaded {
-    background: $white;
+  &.wy-loaded {
+    --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);
 
     ~ .wy-content-iframe-fallback, ~ .wy-spinner {
       display: none;
     }
   }
 
-  &.wy-loading:not(.wy-loaded), &[data-controller~="embed"]:not(.wy-loaded) {
+  &.wy-loading:not(.wy-loaded) {
     position: absolute;
     visibility: hidden;
     z-index: -1;

package/src/scss/theme/_preview-image.scss

@@ -1,4 +1,4 @@
-@use "variables" as *;
+@use "base/vars";
 
 .wy-content-image {
   min-width: 0;
@@ -9,38 +9,20 @@
   margin: auto;
   max-height: 100%;
   max-width: 100%;
-
-  &.wy-intrinsic-image {
+  /*&.wy-intrinsic-image {
     object-fit: scale-down;
-  }
-
-  &:not(.wy-intrinsic-image) {
-    height: 100%;
-    width: 100%;
-    // Similar to object-fit: contain; but works for divs. Must subtract margins.
-    --max-width: #{'min(calc((100vh - 3rem - 1px) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-    --max-height: #{'min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-/*     // With sidebar
-    body.controller-content & {
-      --max-width: #{'min(calc((100vh - 6rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-      --max-height: #{'min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-
-      @include bs.media-breakpoint-up(lg) {
-        --max-width: #{'min(calc((100vh - 3rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-        --max-height: #{'min(calc((100vw - 20rem) * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-      }
-    } */
+  }*/
 
-    max-width: var(--max-width);
-    max-height: var(--max-height);
-    transition: transform $md-animation-duration $md-animation-curve-default, transform-origin $md-animation-duration step-end;
+  /*&:not(.wy-intrinsic-image) {
+    transition: transform vars.$transition, transform-origin vars.$transition-duration step-end;
     //cursor: zoom-in;
-  }
+  }*/
+  transition: transform vars.$transition, transform-origin vars.$transition-duration step-end;
 
 
   &.wy-zoom {
     cursor: zoom-out;
-    transition: transform $md-animation-duration $md-animation-curve-default, transform-origin $md-animation-duration step-start;
+    transition: transform vars.$transition, transform-origin vars.$transition-duration step-start;
   }
 
   img {

package/src/scss/theme/_preview-media.scss

@@ -4,6 +4,7 @@
     min-height: 0;
     max-width: 100%;
     max-height: 100%;
+    flex: 1 1 auto;
   }
 }
 

package/src/scss/theme/_preview-pdf.scss

@@ -1,13 +1,8 @@
-@use "config" as *;
-@use "inputs";
-@use "mixins/backdrop";
-@use "mixins/scrollbar";
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
 
-$zindex-fixed: $zindex-fixed !default;
-$border-radius: $border-radius !default;
-$opacity-backdrop: $opacity-backdrop !default;
-
-:root {
+:root, :host > * {
   --pdfViewer-padding-bottom: 0;
   --page-margin: 2rem auto;
   --page-border: none;
@@ -18,7 +13,7 @@ $opacity-backdrop: $opacity-backdrop !default;
 
 // How to test?
 @media screen and (forced-colors: active) {
-  :root {
+  :root, :host > * {
     --pdfViewer-padding-bottom: 9px;
     --page-margin: 9px auto 0;
     --page-border: none;
@@ -51,11 +46,11 @@ $opacity-backdrop: $opacity-backdrop !default;
     bottom: 0;
     left: 0;
 
-    @include scrollbar.scroll-y;
-    @include scrollbar.scroll-x;
+    @include scroll.scroll-y;
+    @include scroll.scroll-x;
 
     .wy-scrollbars & {
-      @include scrollbar.custom-scrollbar;
+      @include scroll.custom-scrollbar;
 
       @supports (overflow-y: overlay) {
         overflow-y: overlay;
@@ -732,8 +727,8 @@ $opacity-backdrop: $opacity-backdrop !default;
     border: var(--page-border);
     background-clip: content-box;
     //border-image: url(/images/pdf/shadow.png) 9 9 repeat;
-    box-shadow: $box-shadow-sm;
-    background-color: rgba(255, 255, 255, 1);
+    box-shadow: vars.$shadow-level2;
+    background-color: colors.$white;
   }
 
   .pdfViewer .dummyPage {

package/src/scss/theme/_preview-text.scss

@@ -2,4 +2,4 @@
 .wy-content-text {
   word-break: break-word;
   white-space: pre-wrap;
-}
+}

package/src/scss/theme/_preview.scss

@@ -1,27 +1,58 @@
-@use "config" as *;
-@use "mixins/backdrop";
 @use "sass:math";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/breakpoints";
+
+.wy-main {
+  display: flex;
+  height: calc(100vh - vars.$appbar-height);
+
+  @include breakpoints.media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+}
 
 .wy-preview {
+  --wy-component-background-color: #{colors.$background};
+  --wy-component-color: #{colors.$on-background};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+
   display: flex;
+  flex-direction: column;
+
   align-items: center;
-  justify-content: center;
-  height: calc(100% - $appbar-height - $border-width);
+  justify-content: space-around;
   position: relative;
+  flex: 1 1 100%;
+
+  min-width: 16rem;
+  min-height: 16rem;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.wy-preview-area {
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .wy-nav-prev, .wy-nav-next {
-  position: fixed;
+  --wy-component-background-color: #{colors.$surface-variant};
+  --wy-component-color: #{colors.$on-surface-variant};
+  
+  background-color: var(--wy-component-background-color);
+  
+  position: absolute;
   top: 50%;
-  z-index: $zindex-dropdown;
-
-   .wy-button-icon {
-     background-color: $light;
-
-     .wy-dark & {
-      background-color: rgba($dark, $opacity-backdrop);
-     }
-   }
+  z-index: vars.$zindex-dropdown;
+  border-radius: 50%;
 }
 
 .wy-nav-prev {
@@ -30,76 +61,28 @@
 
 .wy-nav-next {
   right: .5rem;
-} 
+}
 
 .wy-document {
+  // always black on white
+  --wy-component-background-color: var(--wy-white);
+  --wy-component-color: var(--wy-on-background);
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
   align-self: flex-start;
-  background-color: $body-bg;
-  color: color-contrast($body-bg);
-  padding: 2rem 3rem;
+  padding: 2rem 3.5rem;
   width: 100%;
   min-height: 100%;
+  flex: 1 0 auto;
   // approximate A4 dimensions (h/w = sqrt(2) = 1.4142...)
-  @include media-breakpoint-up(md) {
+  // TODO: REMOVE BREAKPOINTS
+  @include breakpoints.media-breakpoint-up(md) {
     padding: 3rem 4rem;
-    margin: 2rem 3.5rem;
-    border-radius: $border-radius-sm;
-    box-shadow: $box-shadow-sm;
+    margin: 2rem auto;
+    border-radius: .125rem;
+    box-shadow: vars.$shadow-level2;
     width: 120ch;
     min-height: 170ch;
-    max-width: 100%;
-  }
-}
-
-// floating toolbar (mainly for pdf preview, but can be also be used for other things)
-.wy-toolbar {
-  position: fixed;
-  z-index: $zindex-fixed;
-  bottom: math.div($appbar-height, 2);
-  left: 0;
-  right: 0;
-  height: $appbar-height;
-  display: flex;
-  justify-content: center;
-
-  span {
-    margin-left: .25rem;
-  }
-
-  .wy-input {
-    text-align: center;
-    border-color: transparent;
-  }
-}
-
-.wy-tools {
-  background-color: rgba($light, $opacity-backdrop);
-  color: color-contrast($light);
-  border-radius: $border-radius;
-  display: flex;
-  align-items: center;
-
-  @include backdrop.filter;
-
-  // dark theme
-  .wy-dark &, &.wy-dark {
-    background-color: rgba($dark, $opacity-backdrop);
-    color: $navbar-dark-color;
-
-    .wy-icon {
-      color: $navbar-dark-color;
-    }
-
-    .wy-input {
-      background-color: rgba(0, 0, 0, 0.5);
-      color: $navbar-dark-color;
-    }
+    max-width: calc(100% - 3.5rem);
   }
 }
-
-
-.wy-tool {
-  display: flex;
-  align-items: center;
-  margin: 0 .5rem;
-}