@weavy/uikit-react 13.0.0 → 14.0.0

package/src/scss/theme/_files.scss

@@ -1,5 +1,12 @@
-@use "config" as *;
-@use "tables";
+@use "base/colors";
+@use "base/vars";
+@use "base/text";
+@use "base/breakpoints";
+
+.wy-filename {
+  font-size: vars.$font-size-sm;
+  @include text.truncate;
+}
 
 .wy-files-dragging {
   &::after {
@@ -8,8 +15,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 2px dashed $primary;
-    font-weight: $font-weight-bold;
+    border: 2px dashed colors.$primary;
+    font-weight: vars.$font-weight-bold;
     z-index: 10000;
     position: fixed;
     top: 0;
@@ -19,105 +26,127 @@
   }
 }
 
-.wy-upload-progress{  
-  display: flex;
-  
 
-  progress{    
-    visibility: hidden;
+
+.wy-upload-progress-item {
+  flex-direction: column;
+  padding: 0.75rem .25rem;
+
+  .wy-upload-progress-item-content {
     flex: 1;
-    border-radius: 0;    
-    height: 0.5rem;
-    position: fixed;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.25rem;
+  }
+
+  .wy-upload-progress-success {
+    display: flex;
+    align-items: center;
+  }
+
+  .wy-upload-progress {
+    display: flex;
     width: 100%;
 
-    &::-webkit-progress-value{
-      background-color: $primary;
+    progress {
+      flex: 1;
+      height: 0.5rem;
+      accent-color: colors.$primary;
     }
   }
 }
 
-.wy-file-upload-errors{
-  display:flex;
+.wy-upload-error {
+  align-items: flex-start;  
   flex-direction: column;
+  white-space: normal;
+
+  .wy-upload-error-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.25rem;
+  }
+
+  .wy-upload-error-text {
+    color: colors.$error;
+  }
 
-  .wy-upload-error-row{
-    display:flex;
+  .wy-upload-error-actions {
+    white-space: nowrap;
+  }
+}
+
+.wy-file-upload-errors {
+  display: flex;
+  flex-direction: column;
+
+  .wy-upload-error-row {
+    display: flex;
     margin-bottom: 0.5rem;
     align-items: center;
     column-gap: 1rem;
 
-    .wy-upload-error-row-title{
+    .wy-upload-error-row-title {
       flex: 1;
-      overflow:hidden; 
+      overflow: hidden;
       white-space: nowrap;
-      text-overflow: ellipsis; 
+      text-overflow: ellipsis;
     }
 
-    .wy-upload-error-row-conflict{
-      color: $warning;
+    .wy-upload-error-row-conflict {
+      background-color: colors.$error-container;
+      color: colors.$on-error-container;
     }
 
-    .wy-upload-error-row-error{
-      color: $danger;
+    .wy-upload-error-row-error {
+      color: colors.$error;
     }
   }
 }
 
 .wy-table-files {
-  @extend %table, %table-hover, %table-icons;
-
   thead {
     display: none;
-  }
-
-  tr[data-preview-url-param] {
-    cursor: pointer;
-  }
-
-  td {
-    vertical-align: middle;
+    text-align: left;
   }
 
   td:nth-child(2) {
     // make room for rename form
-    padding: 0 $table-cell-padding-x;
+    padding: 0 vars.$table-cell-padding-x;
   }
-
   // filename
   td:nth-child(2),
   th:nth-child(2) {
     width: 100%;
-    @include text-truncate();
+    @include text.truncate;
   }
-
   // modified
   td:nth-child(3),
   th:nth-child(3) {
     display: none;
     width: 7rem;
-    @include text-truncate();
+    @include text.truncate;
   }
-
   // kind
   td:nth-child(4),
   th:nth-child(4) {
     display: none;
     width: 7.5rem;
     text-align: right;
-    @include text-truncate();
+    @include text.truncate;
   }
-
   // size
   td:nth-child(5),
   th:nth-child(5) {
     display: none;
     width: 7rem;
     text-align: right;
-    @include text-truncate();
+    @include text.truncate;
   }
-
-  @include media-breakpoint-up(sm) {
+  // TODO: REMOVE BREAKPOINTS
+  @include breakpoints.media-breakpoint-up(sm) {
     thead {
       display: table-header-group;
     }
@@ -128,7 +157,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include breakpoints.media-breakpoint-up(md) {
 
     td:nth-child(3),
     th:nth-child(3),

package/src/scss/theme/_grid.scss

@@ -0,0 +1,8 @@
+@use "base/text";
+
+.wy-grid {
+  display: grid;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-gap: .75rem;
+}

package/src/scss/theme/_icons.scss

@@ -1,4 +1,5 @@
-@use "variables" as *;
+@use "base/colors";
+@use "base/vars";
 
 .wy-icon {
   display: inline-flex;
@@ -20,43 +21,178 @@
   position: absolute;
   bottom: 0;
   right: 0;
-  background: var(--#{$prefix}white);
+  background: var(--wy-component-background-color, #{colors.$background});
   border-radius: 50%;
-  border: 1px solid var(--#{$prefix}white);
+  border: 1px solid var(--wy-component-background-color, #{colors.$background});
 }
 
 // stacked icons (icon+overlay icon)
 .wy-icon-stack {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
   line-height: 1;
-  width: 1.5rem;
-  height: 1.5rem;
-
-  .wy-icon:first-child {
-    width: 100%;
-    height: 100%;
-  }
 
   .wy-icon:last-child {
     position: absolute;
     bottom: 0;
     right: 0;
-    width: 50%;
-    height: 50%;
-    background-color: var(--#{$prefix}body-bg);
+    background-color: var(--wy-component-background-color, #{colors.$background});
     border-radius: 50%;
   }
 }
 
+// stacked icons (icon+active icon)
+.wy-icon-active-stack {
+  display: inline-flex;
+  position: relative;
+  line-height: 1;
+
+  > * {
+    transition: opacity vars.$transition;
+    align-self: center;
+    justify-self: center;
+    margin: auto;
+  }
+
+  > :last-child {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &.wy-active, .wy-active & {
+    > :first-child {
+      opacity: 0;
+    }
+
+    > :last-child {
+      opacity: 1;
+    }
+  }
+}
+
 // icons normally inherit the text color of its parent
-.wy-icon:not([class*="wy-icon-"]) * {
+.wy-icon:not([class*="wy-icon-"]):not([class*="wy-kind-"]) * {
   fill: currentColor;
 }
 
-// colored icons
-@each $color, $value in $theme-colors {
-  .wy-icon-#{$color} * {
-    fill: var(--#{$prefix}#{$color});
+// big file type icon
+.wy-content-icon {
+  border-radius: var(--wy-component-border-radius, vars.$border-radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  padding: 1rem 2rem;
+  margin: auto;
+
+  > .wy-icon-stack, > .wy-icon {
+    width: 4rem;
+    height: 4rem;
   }
 }
+
+
+// theme icons
+.wy-icon-primary * {
+  fill: colors.$primary;
+}
+
+.wy-icon-error * {
+  fill: #{colors.$error};
+}
+
+// colored icons
+.wy-icon-blue * {
+  fill: #{colors.$blue};
+}
+
+.wy-icon-indigo * {
+  fill: #{colors.$indigo};
+}
+
+.wy-icon-purple * {
+  fill: #{colors.$purple};
+}
+
+.wy-icon-pink * {
+  fill: #{colors.$pink};
+}
+
+.wy-icon-red * {
+  fill: #{colors.$red};
+}
+
+.wy-icon-orange * {
+  fill: #{colors.$orange};
+}
+
+.wy-icon-yellow * {
+  fill: #{colors.$yellow};
+}
+
+.wy-icon-green * {
+  fill: #{colors.$green};
+}
+
+.wy-icon-teal * {
+  fill: #{colors.$teal};
+}
+
+.wy-icon-cyan * {
+  fill: #{colors.$cyan};
+}
+
+.wy-icon-gray * {
+  fill: #{colors.$gray};
+}
+
+
+// file type icons
+[class*="wy-kind-"] * {
+  fill: colors.$gray;
+}
+
+.wy-kind-archive * {
+  fill: colors.$orange;
+}
+
+.wy-kind-audio * {
+  fill: colors.$teal;
+}
+
+.wy-kind-code * {
+  fill: colors.$green;
+}
+
+.wy-kind-document * {
+  fill: colors.$blue;
+}
+
+.wy-kind-email * {
+  fill: colors.$red;
+}
+
+.wy-kind-presentation * {
+  fill: colors.$orange;
+}
+
+.wy-kind-spreadsheet * {
+  fill: colors.$green;
+}
+
+.wy-kind-image * {
+  fill: colors.$pink;
+}
+
+.wy-kind-text * {
+  fill: colors.$cyan;
+}
+
+.wy-kind-video * {
+  fill: colors.$purple;
+}
+
+.wy-ext-pdf * {
+  fill: colors.$red;
+}

package/src/scss/theme/_image-grid.scss

@@ -1,8 +1,5 @@
-@use "variables";
-
-$body-bg: variables.$body-bg !default;
-$border-radius: variables.$border-radius !default;
-$border-width: variables.$border-width !default;
+@use "base/vars";
+@use "base/colors";
 
 // images in posts, messages and comments
 .wy-image-grid {
@@ -10,11 +7,11 @@ $border-width: variables.$border-width !default;
   flex-wrap: wrap;
   justify-content: space-evenly;
   position: relative;
-  border-radius: $border-radius;
+  border-radius: vars.$border-radius;
   overflow: hidden;
   //background-color: $body-bg;
-  column-gap: $border-width;
-  row-gap: $border-width;
+  column-gap: 1px;
+  row-gap: 1px;
 
   .wy-image {
     padding: 0;
@@ -49,8 +46,7 @@ $border-width: variables.$border-width !default;
   .wy-more {
     position: absolute;
     line-height: 100%;
-    color: #fff;
-    background: rgba(0,0,0,0.5);
+    color: colors.$white;
     top: 0;
     left: 0;
     bottom: 0;
@@ -59,5 +55,6 @@ $border-width: variables.$border-width !default;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
+    background: rgba(0, 0, 0, vars.$opacity-disabled);
   }
 }

package/src/scss/theme/_input.scss

@@ -0,0 +1,160 @@
+@use "base/vars";
+@use "base/colors";
+
+.wy-input {
+  --wy-component-background-color: #{colors.$background};
+  --wy-component-color: #{colors.$on-background};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  border: vars.$input-border-width solid #{colors.$outline-variant};
+  display: block;
+  width: 100%;
+  padding: vars.$input-padding-y vars.$input-padding-x;
+  font-family: var(--wy-font-family);
+  font-size: vars.$input-font-size;
+  font-weight: vars.$input-font-weight;
+  line-height: vars.$input-line-height;
+  background-clip: padding-box;
+  appearance: none; // Fix appearance for date inputs in Safari
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  border-radius: vars.$input-border-radius;
+
+  &:focus {
+    --wy-component-color: #{colors.$on-surface};
+    color: var(--wy-component-color);
+    border-color: #{colors.$primary};
+    outline: 0;
+  }
+  // Placeholder
+  &::placeholder {
+    color: #{colors.$outline};
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &:disabled {
+    opacity: 38%;
+  }
+  // Reset styles
+  // File input buttons theming
+  &::file-selector-button, &::-webkit-file-upload-button {
+    color: var(--wy-component-color);
+    background-color: var(--wy-component-background-color);
+    padding: vars.$input-padding-y vars.$input-padding-x;
+    margin: calc(-1 * #{vars.$input-padding-y}) calc(-1 * #{vars.$input-padding-x});
+    margin-inline-end: vars.$input-padding-x;
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: vars.$input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    &::file-selector-button, ::-webkit-file-upload-button {
+      background-color: var(--wy-component-background-color);
+    }
+  }
+
+  &[type="file"] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
+    }
+  }
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
+  &::-webkit-date-and-time-value {
+    // Multiply line-height by 1em if it has no unit
+    height: calc(#{vars.$input-line-height} * 1em);
+  }
+
+  &[type="search"]::-webkit-search-cancel-button {
+    // REVIEW: can we use close.svg?
+    -webkit-appearance: none;
+  }
+}
+
+.wy-input-filled {
+  --wy-component-background-color: #{colors.$surface-2};
+  --wy-component-color: #{colors.$on-surface};
+  
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+
+  border-radius: 1.25rem;
+  border-color: var(--wy-component-background-color);
+
+  &:focus {
+    border-color: #{colors.$outline-variant};
+  }
+}
+
+.wy-is-invalid {
+  &, &:focus {
+    border-color: colors.$error;
+  }
+}
+
+.wy-description {
+  margin-top: .25rem;
+  font-size: vars.$font-size-sm;
+}
+
+.wy-input-label {
+  display: block;
+  margin-bottom: .5rem;
+}
+
+.wy-input-group {
+  position: relative;
+
+  // Optional leading icon
+  > .wy-icon {
+    position: absolute;
+    top: 0rem;
+    left: 0rem;
+    z-index: 4;
+
+    + .wy-input {
+      padding-left: 2.5rem;
+    }
+  }
+
+  // Required trailing button
+  .wy-button-icon {
+    position: absolute;
+    top: 0rem;
+    right: 0rem;
+    z-index: 4;
+    border-radius: vars.$input-border-radius;
+    background: transparent;
+  }
+
+  .wy-input-filled ~ .wy-button-icon {
+    border-radius: 1.25rem;
+  }
+
+  .wy-input {
+    padding-right: 2.5rem;
+
+    &:placeholder-shown {
+      ~ .wy-button-icon[type=reset] {
+        display: none;
+      }
+    }
+
+    &:not(:placeholder-shown) {
+      ~ .wy-button-icon[type=reset] + .wy-button-icon {
+        display: none;
+      }
+    }
+  }
+}