savor-ui 0.0.1

package/dist/es/theme/components/input-tag.scss

@@ -0,0 +1,200 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(input-tag) {
+  display: inline-flex;
+  box-sizing: border-box;
+  @include e(wrapper) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: getCssVar("color", "text-1");
+    background-color: getCssVar("color", "bg-2");
+    border: 1px solid getCssVar("color", "fill-3");
+    font-size: getCssVar("font-size", "medium");
+    padding: 0 8px;
+    &:hover {
+      border: 1px solid getCssVar("color", "fill-4");
+    }
+    &:focus-within {
+      border-color: getCssVar("color", "primary-6");
+    }
+    @include when(disabled) {
+      background-color: getCssVar("color", "fill-2");
+      border-color: getCssVar("color", "fill-2");
+      cursor: not-allowed;
+    }
+    @include when(error) {
+      @include this-be(input-tag, wrapper) {
+        border-color: getCssVar("color", "error-6");
+        &:hover {
+          border-color: getCssVar("color", "error-6");
+        }
+        &:focus-within {
+          border-color: getCssVar("color", "error-6");
+        }
+        @include when(filled) {
+          background-color: getCssVar("color", "error-1");
+          border-color: getCssVar("color", "error-1");
+          &:hover {
+            background-color: getCssVar("color", "error-2");
+          }
+          &:focus-within {
+            background-color: getCssVar("color", "bg-2");
+            border-color: getCssVar("color", "error-5");
+          }
+        }
+      }
+    }
+    @include when(filled) {
+      background-color: getCssVar("color", "fill-2");
+      border: 1px solid getCssVar("color", "fill-2");
+      &:hover {
+        background-color: getCssVar("color", "fill-3");
+      }
+      &:focus-within {
+        background-color: getCssVar("color", "bg-2");
+        border-color: getCssVar("color", "primary-6");
+      }
+      @include be(input-tag, item) {
+        background-color: getCssVar("color", "bg-3");
+      }
+    }
+    @include be(input-tag, item) {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(prepend) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-right: 1px solid getCssVar("color", "fill-3");
+  }
+  @include e(prefix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(inner) {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    gap: 4px;
+    padding: 4px 0;
+  }
+  @include e(item) {
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  @include e(item-close) {
+    border-radius: getCssVar("radius", "circle");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 2px;
+    &:hover {
+      background-color: getCssVar("color", "fill-3");
+    }
+  }
+  @include e(input-wrapper) {
+    flex: 1;
+    padding-left: 4px;
+    display: flex;
+    align-items: center;
+  }
+  @include e(input) {
+    width: 100%;
+    font-size: inherit;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    border-radius: 0;
+    color: getCssVar("color", "text-1");
+    cursor: inherit;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  @include e(clear) {
+    height: 18px;
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar("font-size", "medium");
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(append) {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-left: 1px solid getCssVar("color", "fill-3");
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      @include be(input-tag, wrapper) {
+        min-height: getCssVar("size", $size);
+        border-radius: getCssVar("radius", $size);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+      @include be(input-tag, item) {
+        height: calc(getCssVar("size", $size) - 10px);
+        line-height: calc(getCssVar("size", $size) - 10px);
+        border-radius: getCssVar("radius", $size);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+      @include be(input-tag, item-close) {
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+      @include be(input-tag, input-wrapper) {
+        height: calc(getCssVar("size", $size) - 10px);
+      }
+      @include be(input-tag, input) {
+        height: calc(getCssVar("size", $size) - 10px);
+        line-height: calc(getCssVar("size", $size) - 10px);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+    }
+  }
+}

package/dist/es/theme/components/input.scss

@@ -0,0 +1,173 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(input) {
+  display: inline-flex;
+  box-sizing: border-box;
+  @include e(wrapper) {
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    color: getCssVar("color", "text-1");
+    background-color: getCssVar("color", "bg-2");
+    border: 1px solid getCssVar("color", "fill-3");
+    &:hover {
+      border: 1px solid getCssVar("color", "fill-4");
+    }
+    &:focus-within {
+      border-color: getCssVar("color", "primary-5");
+    }
+    @include when(disabled) {
+      cursor: not-allowed;
+      @include this-be(input, wrapper) {
+        background-color: getCssVar("color", "bg-2");
+        &:hover {
+          background-color: getCssVar("color", "bg-2");
+        }
+        @include when(filled) {
+          background-color: getCssVar("color", "fill-2");
+          &:hover {
+            background-color: getCssVar("color", "fill-2");
+          }
+        }
+      }
+    }
+    @include when(error) {
+      @include this-be(input, wrapper) {
+        border-color: getCssVar("color", "error-6");
+        &:hover {
+          border-color: getCssVar("color", "error-6");
+        }
+        &:focus-within {
+          border-color: getCssVar("color", "error-6");
+        }
+        @include when(filled) {
+          background-color: getCssVar("color", "error-1");
+          border-color: getCssVar("color", "error-1");
+          &:hover {
+            background-color: getCssVar("color", "error-2");
+          }
+          &:focus-within {
+            background-color: getCssVar("color", "bg-2");
+            border-color: getCssVar("color", "error-5");
+          }
+        }
+      }
+    }
+    @include when(filled) {
+      background-color: getCssVar("color", "fill-2");
+      border: 1px solid getCssVar("color", "fill-2");
+      &:hover {
+        background-color: getCssVar("color", "fill-3");
+      }
+      &:focus-within {
+        background-color: getCssVar("color", "bg-2");
+        border-color: getCssVar("color", "primary-5");
+      }
+    }
+  }
+  @include e(prepend) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-right: 1px solid getCssVar("color", "fill-3");
+  }
+  @include e(prefix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(inner) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+  }
+  @include e(input) {
+    flex-grow: 1;
+    width: 100%;
+    font-size: inherit;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    border-radius: 0;
+    color: getCssVar("color", "text-1");
+    cursor: inherit;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    &::placeholder {
+      color: getCssVar("color", "text-3");
+    }
+  }
+  @include e(close) {
+    height: 18px;
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar("font-size", "medium");
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(eye) {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    user-select: none;
+    height: 18px;
+    width: 18px;
+    font-size: 14px;
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar("color", "fill-4");
+    }
+  }
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(append) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-left: 1px solid getCssVar("color", "fill-3");
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      @include be(input, wrapper) {
+        border-radius: getCssVar("radius", $size);
+      }
+      @include be(input, input) {
+        height: calc(getCssVar("size", $size) - 2px);
+        line-height: calc(getCssVar("size", $size) - 2px);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+    }
+  }
+}

package/dist/es/theme/components/layer.scss

@@ -0,0 +1,93 @@
+@use '../mixins/mixins' as *;
+@use '../mixins/function' as *;
+@use '../common/var.scss' as *;
+
+@include b(layer) {
+  position: absolute;
+  color: getCssVar('color', 'text-1');
+  box-shadow: getCssVar('shadow', '1');
+  display: flex;
+  flex-direction: column;
+  vertical-align: middle;
+  background-color: getCssVar('color', 'bg-3');
+  border: 1px solid getCssVar('color', 'fill-3');
+  transform-origin: center center;
+  backface-visibility: hidden;
+  will-change: transform;
+  overflow: hidden;
+  pointer-events: auto;
+  box-sizing: border-box;
+  @include when(max) {
+    inset: 0;
+    height: 100%;
+    width: 100%;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  @include when(min) {
+    inset: 0;
+    height: 0;
+    width: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  @include e(container) {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+  }
+  @include e(wrapper) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  @include e(mask) {
+    position: absolute;
+    inset: 0;
+    backdrop-filter: blur(3px);
+    overflow: hidden;
+    background-color: rgba(0, 0, 0, 0.5);
+    pointer-events: auto;
+  }
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    flex-shrink: 0;
+    border-bottom: 1px solid getCssVar('color', 'fill-3');
+  }
+  @include e(header-icon) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-right: 12px;
+  }
+  @include e(title) {
+    font-size: getCssVar('font-size', 'medium');
+    font-weight: 500;
+    line-height: 1.5715;
+    flex: 1;
+    padding: 0 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @include e(body) {
+    flex: 1;
+    overflow: hidden;
+  }
+  @include e(content) {
+    overflow: hidden;
+  }
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    padding: 0 20px;
+    gap: 8px;
+    height: 40px;
+    border-top: 1px solid getCssVar('color', 'fill-3');
+  }
+}

package/dist/es/theme/components/layout.scss

@@ -0,0 +1,32 @@
+@use "../mixins/mixins.scss" as *;
+
+@include b(layout) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+
+  @include when(horizontal) {
+    flex-direction: row;
+  }
+
+  @include e(header) {
+    flex-shrink: 0;
+  }
+
+  @include e(aside) {
+    height: 100%;
+    flex-shrink: 0;
+    overflow: auto;
+  }
+
+  @include e(content) {
+    flex: 1;
+    overflow: auto;
+  }
+
+  @include e(footer) {
+    flex-shrink: 0;
+  }
+}

package/dist/es/theme/components/link.scss

@@ -0,0 +1,94 @@
+@use "../mixins/mixins" as *;
+@use "../mixins/function" as *;
+@use "../common/var.scss" as *;
+
+@include b(link) {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  gap: 4px;
+  font-size: getCssVar("font-size", "medium");
+  line-height: getCssVar("line-height", "medium");
+  @include m(default) {
+    color: getCssVar("color", "text-1");
+    &:hover {
+      color: getCssVar("color", "primary-6");
+      &::after {
+        border-bottom: 1px solid getCssVar("color", "primary-6") !important;
+      }
+    }
+    @include not-when(disabled) {
+      @include this-bm(link, always) {
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: 0;
+          bottom: 0;
+          border-bottom: 1px solid getCssVar("color", "text-1");
+        }
+      }
+      @include this-bm(link, hover) {
+        &:hover {
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid getCssVar("color", "primary-6");
+          }
+        }
+      }
+    }
+    @include when(disabled) {
+      color: getCssVar("color", "text-3");
+      cursor: not-allowed;
+    }
+  }
+  @each $type in $type-list {
+    @include m(#{$type}) {
+      color: getCssVar("color", #{$type}-6);
+      &:hover {
+        color: getCssVar("color", #{$type}-5);
+      }
+      @include not-when(disabled) {
+        @include this-bm(link, always) {
+          &::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid getCssVar("color", #{$type}-6);
+          }
+        }
+        @include this-bm(link, hover) {
+          &:hover {
+            &::after {
+              content: "";
+              position: absolute;
+              left: 0;
+              right: 0;
+              height: 0;
+              bottom: 0;
+              border-bottom: 1px solid getCssVar("color", #{$type}-6);
+            }
+          }
+        }
+      }
+      @include when(disabled) {
+        color: getCssVar("color", #{$type}-4);
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/dist/es/theme/components/list.scss

@@ -0,0 +1,52 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(list) {
+  width: 100%;
+  overflow: hidden;
+  @include m(border) {
+    border-radius: getCssVar('radius', 'medium');
+    border: 1px solid getCssVar('color', 'fill-3');
+    @include be(list, item) {
+      border-bottom: 1px solid getCssVar('color', 'fill-3');
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+  @include e(wrapper) {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+  @include m(wrapper-move) {
+    transition: transform 0.3s ease;
+  }
+  @include e(item) {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    color: getCssVar('color', 'text-1');
+    @include when(selected) {
+      background-color: getCssVar('color', 'fill-2');
+      color: getCssVar('color', 'primary-6');
+      &:hover {
+        background-color: getCssVar('color', 'fill-2');
+        color: getCssVar('color', 'primary-6');
+      }
+    }
+  }
+  @include m(drag) {
+    cursor: move;
+  }
+  @include m(ghost) {
+    opacity: 1;
+  }
+  @include m(hover) {
+    border-radius: getCssVar('radius', 'medium');
+    &:hover {
+      background-color: getCssVar('color', 'fill-1');
+    }
+  }
+}

package/dist/es/theme/components/loading-icon.scss

@@ -0,0 +1,38 @@
+/** loading-icon */
+.loading-icon {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  transform-origin: center;
+  animation: rotate 2s linear infinite;
+
+  circle {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 6;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dashoffset: -125px;
+    }
+  }
+}