@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/_appbar.scss

@@ -1,6 +1,9 @@
-@use "config" as *;
-@use "mixins/backdrop";
-@use "mixins/position";
+@use "sass:math";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+@use "base/text";
 
 .wy-appbars {
   @include position.sticky-top;
@@ -10,36 +13,63 @@
       backdrop-filter: none;
     }
   }
+
+  --wy-component-background-color: #{colors.$surface-1};
+  background-color: var(--wy-component-background-color);
+
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+
+  > .wy-appbar, > .wy-toolbar {
+    background-color: transparent;
+    box-shadow: none;
+  }
 }
 
 .wy-appbar {
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-background-color: #{colors.$surface-1};
+
   display: grid;
   align-items: center;
   justify-content: space-between;
-  height: $appbar-height;
-  padding: $navbar-padding-y $navbar-padding-x;
-  flex: 0 0 $appbar-height;
-  grid-template-columns: minmax(2rem, max-content) minmax(0, max-content) minmax(2rem, max-content);
+  justify-items: center;
+  height: vars.$appbar-height;
+  padding: .25rem;
+  flex: 0 0 vars.$appbar-height;
+  grid-template-columns: minmax(2.5rem, max-content) minmax(0, max-content) minmax(2.5rem, max-content);
   column-gap: .5rem;
+  //font-family: vars.$font-family-base;
+  line-height: vars.$line-height-base;
 
-  @include backdrop.filter;
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
 
   .wy-badge {
     align-self: center;
   }
 
   .wy-button {
-    max-height: 2rem;
+    max-height: 2.5rem;
   }
 }
 
-.wy-appbar-buttons {
+
+
+.wy-appbar-buttons, .wy-toolbar-buttons {
   display: flex;
-  flex: 0 0 1rem;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.wy-toolbar-buttons-last {
+  margin-inline-start: auto;
 }
 
 .wy-appbar-text {
-  @include text-truncate();
+  @include text.truncate;
+  max-width: 100%;
+  
   color: inherit !important;
   user-select: none;
 
@@ -52,41 +82,83 @@
   }
 }
 
-.wy-appbar {
-  // light theme (default)
-  &, .wy-light &, &.wy-light {
-    background-color: rgba($gray-50, $opacity-backdrop);
-    color: $navbar-light-color;
-    border-bottom: $border-width solid rgba($gray-200, $opacity-backdrop);
+// floating toolbars (mainly for pdf preview, but can be also be used for other things)
+.wy-toolbars-bottom {
+  position: absolute;
+  z-index: vars.$zindex-fixed;
+  bottom: math.div(vars.$footerbar-height, 2);
+  left: 0;
+  right: 0;
+  min-height: vars.$appbar-height;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+}
+
+.wy-toolbar {
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-background-color: #{colors.$surface-1};
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  min-height: vars.$appbar-height;
+  padding: .25rem;
+  flex: 1 0 vars.$appbar-height;
+  column-gap: .25rem;
+  //font-family: vars.$font-family-base;
+  line-height: vars.$line-height-base;
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+
+  span {
+    margin-left: .25rem;
   }
-  // dark theme
-  .wy-dark &, &.wy-dark {
-    background-color: rgba($dark, $opacity-backdrop);
-    color: $navbar-dark-color;
-    border-bottom: $border-width solid rgba($gray-800, $opacity-backdrop);
+}
+
+.wy-toolbar-center {
+  margin: 0 auto;
+  border-radius: vars.$border-radius;
+  
+  .wy-input {
+    text-align: center;
+    //border-color: transparent;
   }
 }
 
 .wy-footerbars {
-  padding-bottom: $footerbar-height;
+  padding-bottom: vars.$footerbar-height;
+
+  > .wy-toolbar {
+    box-shadow: none;
+  }
 }
 
 .wy-footerbar {
+  --wy-component-background-color: #{colors.$surface-1};
+  --wy-component-color: #{colors.$on-surface};
+  
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: $zindex-sticky;
+  z-index: vars.$zindex-sticky;
 
   &::after {
     content: "";
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+    box-shadow: #{colors.$outline-variant} 0px 1px 0px 0px inset;
     position: absolute;
     width: 100vw;
     left: 0;
     bottom: 0;
-    height: $footerbar-height;
-    border-top: $border-width solid rgba($gray-200, $opacity-backdrop);
-    background: rgba($gray-50, $opacity-backdrop);
+    height: 100%;
     z-index: -1;
 
     @include backdrop.filter;
@@ -101,12 +173,17 @@
   }
 }
 
+.wy-footerbar-sticky {
+  position: sticky;
+}
+
 .wy-footerbars-fixed {
   .wy-footerbar {
     position: fixed;
 
     &::after {
       position: fixed;
+      height: vars.$footerbar-height;
     }
   }
 }

package/src/scss/theme/_avatar.scss

@@ -1,5 +1,9 @@
-@use "config" as *;
-@use "bs/forms";
+@use "base/vars";
+@use "base/colors";
+
+:where(:root, :host > *) {
+  --wy-presence-active: #{colors.$green};
+}
 
 .wy-avatar {
   border-radius: 50%;
@@ -12,43 +16,34 @@
   text-align: center;
 }
 
-.wy-avatar-input {
-  @extend %form-control, %form-control-sm;
-  background: $light;
-  border-color: transparent;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 1.5rem;
-}
-
 .wy-avatar-presence {
   position: relative;
+  display: inline-flex;
 }
 
-.wy-avatar-display-name {
-  font-size: $h4-font-size;
-  font-weight: $display-font-weight;
-  line-height: $display-line-height;
-  text-align: center;
-}
-
-
 // presence indicator
 .wy-presence {
-  display: none; // initially hidden
-  background-color: $gray-100;
+  &:not(.wy-presence-active) {
+    display: none; // initially hidden
+  }
+
+  background-color: var(--wy-component-background-color, transparent);
   width: .75rem;
   height: .75rem;
   border-radius: 50%;
-  outline: .125rem solid $white;
+  //outline: .125rem solid ;
   position: absolute;
   bottom: 0;
   right: -5%;
-}
 
-// online
-.wy-presence-active {
-  background-color: $green-400;
-  display: block;
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--wy-presence-active);
+    background-clip: content-box;
+    padding: .125rem;
+  }
 }

package/src/scss/theme/_badge.scss

@@ -1,23 +1,30 @@
-@use "config" as *;
-@use "bs/badge";
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
 
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-font-size: .75em !default;
+$badge-font-weight: vars.$font-weight-bold !default;
 
 .wy-badge {
-  @extend %badge;
-  border-radius: 50rem;
-  background-color: $primary;
-}
-
-.wy-badge-success {
-  background-color: $success;
-}
-
-.wy-badge-warning {
-  background-color: $warning;
-}
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  color: colors.$on-primary;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
 
-.wy-badge-danger {
-  background-color: $danger;
+  border-radius: vars.$border-radius-pill;
+  background-color: colors.$primary;
 }
 
 .wy-button {
@@ -25,7 +32,7 @@
 
   // badge, e.g. notification count
   .wy-badge {
-    font-size: $font-size-xs;
+    font-size: vars.$font-size-xs;
     position: absolute;
     right: 0;
     top: 0;
@@ -38,7 +45,8 @@
     line-height: .5rem;
     display: block;
     text-align: center;
-    @include text-truncate();
+    
+    @include text.truncate;
 
     &:empty {
       display: none;

package/src/scss/theme/_buttons.scss

@@ -1,90 +1,145 @@
-@use "config" as *;
-@use "bs/buttons";
+@use "base/vars";
+@use "base/colors";
+@use "base/svg";
+
+:where(:root, :host > *) {
+  --wy-btn-padding-x: 1.5rem;
+  --wy-btn-padding-y: .5rem;
+  --wy-btn-font-family: var(--wy-font-family);
+  --wy-btn-font-size: #{vars.$font-size-base};
+  --wy-btn-font-weight: #{vars.$font-weight-normal};
+  --wy-btn-line-height: #{vars.$line-height-base};
+  --wy-btn-border-width: 0;
+  --wy-btn-border-color: transparent;
+  --wy-btn-border-radius: 1.25rem;
+}
 
 // basic unstyled button with support for icon and text
 .wy-button {
-  @extend %btn;
+  --wy-component-color: #{colors.$primary};
+  //--wy-component-background-color: var(--wy-component-background-color, transparent); // #{colors.$surface-3};
+
+  color: var(--wy-component-color);
+  background: var(--wy-component-background-color, transparent);
+
+  padding: var(--wy-btn-padding-y) var(--wy-btn-padding-x);
+  font-family: var(--wy-btn-font-family);
+  font-size: var(--wy-btn-font-size);
+  font-weight: var(--wy-btn-font-weight);
+  line-height: var(--wy-btn-line-height);
+  text-align: center;
+  text-decoration: none;
+  white-space: null; // Set to `nowrap` to prevent text wrapping;
+  vertical-align: middle;
   
+  cursor: pointer;
+  user-select: none;
+  border: var(--wy-btn-border-width) solid var(--wy-btn-border-color);
+  border-radius: var(--wy-btn-border-radius);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .25rem;
+  position: relative;
+
+  // State layer
+  &:not(.wy-button-link, :disabled){
+    
+    > * {
+      z-index: 3;
+    }
+    
+    &::before {
+      content: "";
+      z-index: 2;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--wy-component-color);
+      opacity: 0%;
+    }
+
+    &:hover {
+      &::before {
+        opacity: 8%;
+      }
+    }
+
+    &:focus, &:active, &.wy-active {
+      &::before {
+        opacity: 12%;
+      }
+    }
+  }
 
   // align icons
   &:not(.wy-button-icon) {
     .wy-icon {
       &:first-child {
-        margin-left: -.25rem;
+        margin-left: -.5rem;
       }
 
       &:last-child {
-        margin-right: -.25rem;
+        margin-right: -.5rem;
       }
     }
   }
  
-}
-
-// default button
-.wy-button:not(.wy-button-link, .wy-button-primary) {
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-active-border-color: transparent;
-    --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
-    --#{$prefix}btn-hover-bg: #{$btn-hover-bg};
-    --#{$prefix}btn-focus-bg: #{$btn-hover-bg};
-    --#{$prefix}btn-active-color: var(--#{$prefix}btn-color);
-    --#{$prefix}btn-active-bg: #{$btn-active-bg};
-
-     // dark mode
-    .wy-dark & {
-      color: var(--#{$prefix}white);
-    }
+  &:disabled {
+    opacity: vars.$opacity-disabled;
+    cursor: unset;
+    pointer-events: none;
+  }
 }
 
 // button with only icon (no text)
-.wy-button-icon {  
-  width: 2rem;
-  height: 2rem;
-  padding: .25rem;
+.wy-button-icon {
+  --wy-component-color: #{colors.$on-surface-variant};
+  //--wy-component-background-color: var(--wy-component-background-color, transparent);
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: .5rem;
   line-height: 1;
-  border-radius: 50%;
+  border-radius: #{vars.$border-radius-pill};
   border-width: 0;
-}
-
-// default icon button
-.wy-button-icon:not(.wy-button-primary) {
-  color: $icon-color;
 
-  &:hover {
-    .wy-icon {
-      color: $icon-hover-color;
-    }
-  }
-  
-  // dark mode
-  .wy-dark & {
-    color: $icon-light-color;
-    .wy-icon {
-      color: $icon-light-color;
-    }
-
-    &:hover {
-      color: $icon-light-hover-color;
-      .wy-icon {
-        color: $icon-light-hover-color;
-      }
-    }
+  &.wy-active {
+    --wy-component-color: #{colors.$primary};
   }
 }
 
 // primary button
 .wy-button-primary {
-    @extend %btn-primary;
+  --wy-component-background-color: #{colors.$primary};
+  --wy-component-color: #{colors.$on-primary};
+}
+
+.wy-button-variant {
+  --wy-component-background-color: #{colors.$surface-variant};
+  --wy-component-color: #{colors.$on-surface-variant};
+}
+
+// primary button (text only)
+.wy-button-primary-text {
+  --wy-component-color: #{colors.$primary};
 }
 
 // button that looks and behaves like a link
 .wy-button-link {
-  @extend %btn-link;
+  //--wy-component-background-color: transparent;
+  padding: 0;
+  color: var(--wy-link-color, #{colors.$primary});
+
+  text-decoration: var(--wy-link-decoration, #{vars.$link-decoration});
+  
+  &:hover,
+  &:focus {
+    text-decoration: var(--wy-link-hover-decoration, #{vars.$link-hover-decoration});
+  }
 }
 
 // container for proper spacing and alignment of buttons

package/src/scss/theme/_card.scss

@@ -1,7 +1,105 @@
-.wy-card-header {
-  border-bottom: none;
+@use "base/colors";
+@use "base/text";
+@use "base/vars";
+
+.wy-card {
+  --wy-component-background-color: #{colors.$surface-1};
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-border-radius: #{vars.$border-radius-lg};
+  
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  border-radius: var(--wy-component-border-radius);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.wy-card-primary {
+  --wy-component-background-color: #{colors.$primary-container};
+  --wy-component-color: #{colors.$on-primary-container};
+}
+
+.wy-card-hover {
+  cursor: pointer;
+  user-select: none;
+
+  // State layer
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--wy-component-color);
+    opacity: 0%;
+  }
+
+  &:hover {
+    &::before {
+      opacity: vars.$opacity-state-hover; //8%;
+    }
+  }
+  &:focus {
+    &::before {
+      opacity: vars.$opacity-state-focus; //12%;
+    }
+  }
+  &:active, &.wy-active {
+    &::before {
+      opacity: vars.$opacity-state-active; //12%;
+    }
+  }
+}
+
+.wy-card-actions {
+  position: absolute;
+  top: min(.25rem, calc(100% - 2.5rem)); // Account for small heights
+  right: .25rem;
+  
+  > .wy-button-icon, > .wy-dropdown > .wy-button-icon {
+    background-clip: content-box;
+  }
+}
+
+.wy-card-content {
+  flex: 1 0 auto;
+
+  &:first-child, .wy-card-actions + &:nth-child(2) {
+    padding-block-start: .5rem;
+  }
+
+  padding-block-end: .5rem;
+  padding-inline-start: .5rem;
+  padding-inline-end: .5rem;
+}
+
+.wy-card-top {
+  border-radius: var(--wy-component-border-radius);
+  object-fit: cover;
+  object-position: top center;
+  flex: 1 1 100%;
+  max-height: 10rem;
+}
+
+.wy-card-top-image {
+  object-position: 50% 38%;
 }
 
-.wy-card-footer {
-  border-top: none;
+.wy-card-trashed {
+  > *:not(.wy-card-actions) {
+    opacity: vars.$opacity-disabled;
+  }
+  text-decoration: line-through;
 }