@weavy/uikit-react 13.0.0 → 14.0.0

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

package/src/scss/theme/_checkbox.scss

@@ -1,56 +1,52 @@
-@use "config" as *;
+@use "base/vars";
 
 // Include mixin in the relative class that should be suffixed with -check
-@mixin button-check {
-
+.wy-button {
   // From bootstrap/scss/forms/_form_check
   &-check {
     position: absolute;
     clip: rect(0, 0, 0, 0);
     pointer-events: none;
-  
+
     &[disabled] + &,
     &:disabled + & {
       pointer-events: none;
       filter: none;
-      opacity: $form-check-btn-check-disabled-opacity;
+      opacity: vars.$opacity-disabled;
     }
   }
-
   // From bootstrap/scss/_buttons
   &-check:focus + &,
   &:focus {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    //box-shadow: vars.$btn-focus-box-shadow;
   }
-  &-check:checked + &,
+  /*&-check:checked + &,
   &-check:active + & {
-    @include box-shadow($btn-active-box-shadow);
+    box-shadow: vars.$btn-active-box-shadow;
   
     &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      box-shadow: vars.$btn-focus-box-shadow, vars.$btn-active-box-shadow;
     }
-  }
-
+  }*/
   // Custom icons
-  &-check + .#{wy}-button-icon {
+  &-check + .wy-button-icon {
     svg:last-child {
       display: none;
     }
   }
 
-  &-check:checked + .#{wy}-button-icon {
+  &-check:disabled + .wy-button-icon {
+    opacity: vars.$opacity-disabled;
+  }
+
+  &-check:checked + .wy-button-icon {
     svg:first-child {
       display: none;
     }
-  
+
     svg:last-child {
       display: inline-block;
     }
   }
 }
-
-// Create a suffixed subclass from .wy-button -> .wy-button-check
-.wy-button {
-  @include button-check;
-}

package/src/scss/theme/_code-vscode-dark.scss

@@ -5,10 +5,10 @@ pre[class*="language-"] {
   color: #d4d4d4;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   text-align: left;
-  white-space: pre;
+  white-space: pre-wrap;
   word-spacing: normal;
   word-break: normal;
-  word-wrap: normal;
+  word-wrap: break-word;
   line-height: 1.5;
 
   -moz-tab-size: 4;
@@ -181,4 +181,4 @@ pre[class*="language-"] {
 
 .token.italic {
   font-style: italic;
-}
+}

package/src/scss/theme/_code-vscode-light.scss

@@ -5,10 +5,10 @@ pre[class*="language-"] {
   color: #000000;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   text-align: left;
-  white-space: pre;
+  white-space: pre-wrap;
   word-spacing: normal;
   word-break: normal;
-  word-wrap: normal;
+  word-wrap: break-word;
   line-height: 1.5;
 
   -moz-tab-size: 4;
@@ -176,4 +176,4 @@ pre[class*="language-"] {
 
 .token.italic {
   font-style: italic;
-}
+}

package/src/scss/theme/_code.scss

@@ -1,5 +1,3 @@
-@use "config" as *;
-
 // Themes generated from VS Code using https://prism.dotenv.dev/
 .wy-code {
   :not(.wy-dark) &, &:not(.wy-dark) {

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

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

@@ -0,0 +1,129 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+
+
+.wy-comment-editor {
+  .wy-spinner {
+    display: none;
+  }
+
+  &.wy-uploading {
+    .wy-spinner {
+      display: block;
+    }
+
+    [data-icon=plus] {
+      display: none;
+    }
+  }
+
+  .wy-picker-list:not(:empty) {
+    border-top: 1px solid #{colors.$outline-variant};
+  }
+}
+
+
+.wy-comment-editor-bottom {
+  // we need the editor to appear below dropdowns
+  position: sticky;
+  bottom: 0;
+  z-index: #{vars.$zindex-dropdown - 1};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+}
+
+.wy-comment-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-comment-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;
+
+  > :not(:last-child) {
+    margin-right: .25rem;
+  }
+}
+
+.wy-comment-editor-buttons {
+  flex: 1 0 auto;
+}
+
+.wy-comment-editor-text {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.wy-comment-editor-mention {
+    background: blue;
+    color: white;
+}
+
+.wy-comment-editor-link {
+  background: blue;
+  color: white;
+}
+
+%comment-editor-textfield,
+.wy-comment-editor-textfield {
+  flex: 1 1 100%;
+  max-height: 11.25rem;
+  background-color: colors.$background;
+  color: colors.$on-background;
+  border-radius: 1.25rem;
+  border: vars.$input-border-width solid #{colors.$outline-variant};
+  
+  &:focus {
+    border-color: #{colors.$primary};
+  }
+  
+}
+
+%comment-editor-textcontent,
+.wy-comment-editor-textcontent {
+  font-family: vars.$font-family-base;
+  font-size: vars.$font-size-base;
+  padding: vars.$input-padding-y vars.$input-padding-x;
+}
+
+%comment-editor-grow,
+.wy-comment-editor-grow {
+    display: grid;
+
+    &::after, > textarea {
+        @extend %comment-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;
+    }
+}