@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/_reactions.scss

@@ -1,17 +1,17 @@
-@use "config" as *;
-@use "bs/dropdown";
-@use "tables";
-
+@use "base/colors";
+@use "base/vars";
+@use "buttons"; // Ensures correct order, since buttons is needed by reactions
+@use "dropdown"; // Ensures correct order, since dropdown is needed by reactions
 
 .wy-reaction-count {
-  margin: 0 .25rem;
+  margin: 0 0.5rem 0 .125rem;
   line-height: 1;
-  color: $text-muted;
-  font-size: $font-size-sm;
+  //color: vars.$text-muted;
+  font-size: vars.$font-size-sm;
 }
 
 .wy-reaction-menu {
-  padding: .5rem;
+  padding: .25rem;
   font-size: 1.125rem;
   border-radius: 2.5rem;
 }
@@ -36,23 +36,54 @@
 }
 
 .wy-table-reactions {
-  @extend %table, %table-icons;
-
   // avatar
   td:first-child {
-    width: 2rem;
-    padding-left: 0;
+    width: 3rem;
   }
 
   // name
   td:nth-child(2) {
     width: 100%;
-    @include text-truncate();
   }
 
-  // reaction
-  td:last-child {
-    width: 2rem;
-    padding-right: 0;
+  tr:last-child td {
+    box-shadow: none;
+  }
+}
+
+
+
+.wy-reactions-line {  
+  display: flex;  
+  align-items: center;
+
+  /*> * {
+    position: relative;
+  }*/
+
+  .wy-reactions {
+    background: var(--wy-component-background-color);
+    color: currentColor;
+    border-radius: vars.$border-radius-pill;
+    display: flex;
+    width: auto;
+    background-clip: content-box;
+
+    > .wy-emoji {
+      &:first-child {
+        margin-left: .125rem;
+      }
+
+      &:last-child {
+        margin-right: .125rem;
+      }
+    }
+  }
+
+  .wy-reaction-menu-button {
+    background: var(--wy-component-background-color);
+    color: currentColor;
+    border-radius: vars.$border-radius-pill;
+    background-clip: content-box;
   }
 }

package/src/scss/theme/_sheet.scss

@@ -0,0 +1,59 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
+
+.wy-sheet {
+  // Reset scrollbar adjust
+  --wy-scrollbar-adjust-top: 0;
+  --wy-scrollbar-adjust-bottom: 0;
+
+  --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);
+
+  position: fixed;
+  z-index: vars.$zindex-modal;
+  display: flex;
+  flex-direction: column;
+  
+  bottom: .5rem;
+  left: .5rem;
+  right: .5rem;
+  max-height: max(50vh, 50%);
+  min-height: 3rem;
+  margin: .5rem auto;
+  max-width: 32rem;
+
+  // transition hide
+  transition: opacity vars.$transition;
+
+  border-radius: vars.$border-radius;
+  box-shadow: vars.$shadow-level1;
+
+  > .wy-appbars, > .wy-appbar {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+}
+
+.wy-sheet-body {
+  overflow: hidden;
+  padding: .5rem;
+}
+
+// Transitions
+.wy-sheet {
+  &:not(.wy-show) {
+    opacity: 0;
+    transform: translateY(32rem);
+  }
+
+  &.wy-show {
+    opacity: 1;
+    transform: none;
+    // transition show
+    transition: transform vars.$transition, opacity vars.$transition;
+  }
+}

package/src/scss/theme/_sidebar.scss

@@ -0,0 +1,86 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/breakpoints";
+
+.wy-sidebar {
+  --wy-component-background-color: #{colors.$surface-2};
+  --wy-component-color: #{colors.$on-surface};
+  background: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  min-width: 0;
+  min-height: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 18rem;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  transition: flex-basis #{vars.$transition};
+  position: relative;
+  order: 9999;
+
+  > * {
+    transition: opacity #{vars.$transition-fast} calc(#{vars.$transition-duration} - #{vars.$transition-duration-fast});
+    min-width: 18rem;
+  }
+
+  &[hidden] {
+    display: flex !important;
+    flex-basis: 0;
+
+    > * {
+      transition: opacity #{vars.$transition-fast};
+      opacity: 0;
+    }
+  }
+
+  @include breakpoints.media-breakpoint-up(md) {
+    > * {
+      min-width: 18rem;
+    }
+
+    .wy-sidebar-handle {
+        display: none;
+    }
+  }
+
+  @include breakpoints.media-breakpoint-down(md) {
+    transition: flex-basis #{vars.$transition}, margin-top #{vars.$transition};
+    border-top-left-radius: vars.$border-radius-lg;
+    border-top-right-radius: vars.$border-radius-lg;
+    flex-basis: 50vh;
+
+    &:not([hidden]) {
+      margin-top: calc(-1 * var(--wy-border-radius-lg));
+
+      &.wy-maximized {
+        flex-basis: calc(100vh - #{vars.$appbar-height} * 1.5);
+        margin-top: calc(-50vh + #{vars.$appbar-height} * 1.5 - var(--wy-border-radius-lg));
+
+        ~ * .wy-nav-prev,
+        ~ * .wy-nav-next {
+          display: none;
+        }
+      }
+    }
+
+    > * {
+      min-height: vars.$appbar-height;
+    }
+  }
+}
+
+.wy-sidebar-handle {
+  width: 4rem;
+  background-clip: content-box;
+  background-color: #{colors.$on-surface-variant};
+  height: 1rem;
+  border: .375rem solid transparent;
+  position: absolute;
+  top: 0rem;
+  z-index: 2;
+  left: 50%;
+  margin-left: -2rem;
+  border-radius: #{vars.$border-radius-pill};
+  cursor: pointer;
+}

package/src/scss/theme/_spinner.scss

@@ -1,20 +1,24 @@
-@use "colors" as *;
+@use "base/colors";
 
 $spinner-offset: 187 !default;
 $spinner-duration: 1.4s !default;
 
-svg.wy-spinner {
+.wy-spinner, .wy-icon[data-icon=spinner] {
+  align-self: center;
+  justify-self: center;
+  margin: auto;
 
   circle {
     stroke-dasharray: 1, 100;
     stroke-dashoffset: 0;
     transform-origin: center;
+    fill:none !important;
   }
 
   &.wy-spin {
     // add class .wy-spin to animate the spinner (otherwise it will not be visible)
     animation: wy-rotate $spinner-duration linear infinite;
-  
+
     circle {
       animation: wy-dash $spinner-duration ease-in-out infinite, wy-color ($spinner-duration*2) ease-in-out infinite;
     }
@@ -46,18 +50,18 @@ svg.wy-spinner {
 
 @keyframes wy-color {
   0%, 100% {
-    stroke: $blue;
+    stroke: colors.$primary;
   }
 
   25% {
-    stroke: $red;
+    stroke: colors.$primary;
   }
 
   50% {
-    stroke: $yellow;
+    stroke: transparent;
   }
 
   75% {
-    stroke: $green;
+    stroke: colors.$primary;
   }
 }

package/src/scss/theme/_tab.scss

@@ -0,0 +1,72 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-tabs {
+    display: flex;
+    justify-content: space-evenly;
+    padding:.25rem;
+}
+
+.wy-tab {
+    --wy-component-color: #{colors.$primary};
+    --wy-component-background-color: transparent; // #{colors.$surface-2};
+  
+    color: var(--wy-component-color);
+    background: var(--wy-component-background-color);
+
+    border: none;
+    border-radius: vars.$border-radius-lg;
+
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: .25rem;
+    position: relative;
+
+    text-align: center;
+    text-decoration: none;
+  
+    cursor: pointer;
+    user-select: none;
+
+    .wy-tab-icon {
+        // State layer
+        position: relative;
+        padding: .25rem 1rem;
+        border-radius: var(--wy-btn-border-radius);
+        display: inline-flex;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+            background: var(--wy-component-color);
+            opacity: 0%;
+        }
+    }
+
+    &:hover {
+        .wy-tab-icon::before {
+            opacity: 8%;
+        }
+    }
+
+    &:focus, &:active, &.wy-active {
+        .wy-tab-icon::before {
+            opacity: 12%;
+        }
+    }
+
+    .wy-tab-label {
+        font-family: var(--wy-btn-font-family);
+        line-height: var(--wy-btn-line-height);
+    
+        font-size: vars.$font-size-xs;
+        font-weight: vars.$font-weight-base;
+    }
+}

package/src/scss/theme/_tables.scss

@@ -1,47 +1,83 @@
-@use "config" as *;
-@use "bs/tables";
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
 
-
-// table with avatar/icon in first and last column
-%table-icons {
+.wy-table {
+  --wy-component-color: #{colors.$on-background};
+  --wy-component-background-color: #{colors.$background};
+  color: var(--wy-component-color);
+  background-color: var(--wy-component-background-color);
   table-layout: fixed;
+  width: 100%;
+  //margin-bottom: 1rem;
+  vertical-align: top;
+  border-collapse: collapse;
 
   th, td {
-    // cell with img or icon
-    &:first-child, &:last-child {
-      color: $icon-color !important;
-      vertical-align: middle;
-      text-align: center;
-      padding: $table-cell-padding-y-sm $table-cell-padding-x;
-      width: 2rem + $table-cell-padding-x;
-      // reset th styles (for dropdown menus in th)
-      font-size: $font-size-base;
-      font-weight: $font-weight-base;
-      text-transform: none;
-      letter-spacing: normal;
-    }
+    padding: vars.$table-cell-padding-y vars.$table-cell-padding-x;
+    box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+    line-height: 1;
+    vertical-align: middle;
+    height: 2.5rem;
 
     &:first-child {
-      padding-right: 0;
+      padding-left: calc(#{vars.$table-cell-padding-x} * 2);
     }
 
     &:last-child {
-      padding-left: 0;
+      padding-right: calc(#{vars.$table-cell-padding-x} * 2);
     }
   }
+
+  > tbody {
+    vertical-align: inherit;
+  }
+
+  > thead {
+    vertical-align: bottom;
+  }
+
+  .wy-table-cell-icon {
+    color: var(--wy-component-color);
+    vertical-align: middle;
+    text-align: center;
+    padding: calc(#{vars.$table-cell-padding-y} * .5) vars.$table-cell-padding-x;
+    width: calc(2.5rem + #{vars.$table-cell-padding-x} * 2);
+    // reset th styles (for dropdown menus in th)
+    font-size: vars.$font-size-base;
+    font-weight: vars.$font-weight-base;
+    text-transform: none;
+    letter-spacing: normal;
+  }
+
+  .wy-table-cell-text {
+    @include text.truncate;
+    width: 100%;
+  }
 }
 
+.wy-table-hover {
+  > tbody > tr:not(.wy-pager):hover > * {
+    --wy-component-color: #{colors.$on-surface};
+    --wy-component-background-color: #{colors.$surface-2};
+    color: var(--color);
+    background-color: var(--wy-component-background-color);
+    cursor: pointer;
+  }
+}
 
 .wy-table-trashed {
   th, td {
-    color: $text-muted;
     text-decoration: line-through;
+
     &:not(:last-child) {
-      opacity: $btn-disabled-opacity;
+      > * {
+        opacity: vars.$opacity-disabled;
+      }
     }
 
     > a {
-      color: $text-muted;
+      color: var(--wy-component-color);
     }
   }
 
@@ -51,3 +87,14 @@
     }
   }
 }
+
+.wy-table-no-result {
+  text-align: center;
+  padding: 1rem;
+}
+
+
+.wy-table-sort-link {
+  display: inline-flex;
+  align-items: center;
+}

package/src/scss/theme/_toasts.scss

@@ -1,47 +1,77 @@
 @use "sass:map";
-@use "variables" as *;
+@use "base/vars";
+@use "base/colors";
+
+$toast-max-width: 16rem !default;
+$toast-padding-x: .75rem !default;
+$toast-padding-y: .5rem !default;
 
 .wy-toasts {
   position: fixed;
   left: 0;
-  bottom: 0;
+  bottom: 3.5rem;
   right: 0;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  z-index: $zindex-fixed;
+  z-index: vars.$zindex-fixed;
+  gap: 1rem;
 }
 
 .wy-toast {
+  background: colors.$on-surface;
+  color: colors.$surface-2;
   margin: 0 0 1rem;
-}
-
-.wy-toast-body {
+  width: $toast-max-width;
+  max-width: calc(100% - 3rem);
+  gap: .5rem;
+  display: flex;
+  cursor: pointer;
+  border-radius: vars.$border-radius;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: .5rem;
   padding: $toast-padding-y $toast-padding-x;
-}
-
-.wy-button-toast {
-  font-weight: $font-weight-normal;
-  text-decoration: $link-decoration;
+  user-select: none;
+  box-shadow: vars.$shadow-level2;
+  position: relative;
+  overflow: hidden;
+  height: auto;
 
-  &:hover {
-    color: $btn-link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus {
-    text-decoration: $link-hover-decoration;
-    box-shadow: none;
+  &.wy-fade {
+    transition: all vars.$transition;
+    
+    &:not(.wy-show) {
+      opacity: 0;
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
   }
+}
 
-  &:disabled,
-  &.wy-disabled {
-    color: $btn-link-disabled-color;
-  }
+.wy-toast-action {
+  position: sticky;
+  top: 4.5rem;
+  bottom: 4.5rem;
+  // TODO: check z-index - needs to be below dropdown z-index (1000) currently $zindex-toast is 1090
+  z-index: 999;
+  background-color: colors.$primary;
+  color: colors.$on-primary;
+  padding: .5rem 1rem;
+  border-radius: 50rem;
+  font-size: vars.$font-size-xs;
+  width: max-content;
+  align-self: center;
+  text-align: center;
+  box-shadow: none;
+}
 
-  color: map.get($utilities-text-colors, "info");
-  text-transform: uppercase;
-  font-weight: 500;
+.wy-toast-primary {
+  background: colors.$on-primary-container;
+  color: colors.$primary-container;
 }

package/src/scss/theme/_type.scss

@@ -0,0 +1,41 @@
+@use "base/vars";
+
+@mixin heading {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-style: vars.$headings-font-style;
+  font-weight: vars.$headings-font-weight;
+  line-height: vars.$headings-line-height;
+}
+
+// We never use H1 since we are in a context
+
+// ~ H2
+.wy-title {
+  @include heading;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+  font-size: 2.5rem;
+  line-height: 3rem;
+}
+
+// ~ H3
+.wy-headline {
+  @include heading;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+// ~ H4
+.wy-label {
+  @include heading;
+  margin-top: 0rem;
+  margin-bottom: 0rem;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}

package/src/scss/theme/{bootstrap/mixins → base}/_breakpoints.scss

@@ -1,3 +1,12 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
 // Breakpoint viewport sizes and media queries.
 //
 // Breakpoints are defined as a map of (name: minimum width), order from small to large: