@weavy/uikit-react 12.1.0 → 14.0.0

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;

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: rgba($dark, $opacity-backdrop);
-                color: $navbar-dark-color;
-                border-bottom: $border-width #000 solid;
-            }
-        }
-
-        &.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: .5rem;
-        left: .5rem;
-        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,19 +70,22 @@
             top: 0;
             left: 0;
             right: 0;
-            height: ($appbar-height - .0625rem);
+            height: vars.$appbar-height;
+            padding: .25rem;
             opacity: 0;
             pointer-events: none;
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: rgba($gray-50, $opacity-backdrop);
-            color: $navbar-light-color;
-            border-bottom: $border-width solid $border-color;
-            transition: opacity .1s .2s step-end;
-            font-family: $font-family-base;
-            line-height: $line-height-base;
-            font-weight: $font-weight-base;
+            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;
         }
@@ -91,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);
@@ -118,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;
+  }
+}
+