savor-ui 0.0.1

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

@@ -0,0 +1,86 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(anchor) {
+  display: inline-flex;
+  gap: 12px;
+
+  @include e(ink) {
+    width: 2px;
+    background-color: getCssVar('color', 'fill-3');
+    position: relative;
+    margin-left: 8px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      height: 100%;
+      width: 0;
+      border-left: 2px solid getCssVar('color', 'fill-3');
+      transform: translateX(-50%);
+    }
+  }
+
+  @include e(ink-ball) {
+    position: absolute;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-radius: getCssVar('radius', 'circle');
+    background-color: getCssVar('color', 'primary-6');
+    transform: translate(-50%, -50%);
+    transition: top 0.2s getCssVar('bezier', '1');
+    box-shadow: 0 0 0 3px getCssVar('color', 'primary-1');
+  }
+
+  @include e(list) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  @include m(line-less) {
+    padding-left: 0;
+
+    @include be(anchor, ink) {
+      display: none;
+    }
+  }
+
+  @include e(link) {
+    display: flex;
+    flex-direction: column;
+
+    @include when(active) {
+      @include be(anchor, link-title) {
+        color: getCssVar('color', 'primary-6');
+      }
+    }
+  }
+
+  @include e(link-title) {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    padding: 0 8px;
+    color: getCssVar('color', 'text-2');
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background-color: getCssVar('color', 'fill-2');
+      color: getCssVar('color', 'primary-5');
+    }
+  }
+
+  @include e(link-children) {
+    padding-left: 12px;
+  }
+}

package/dist/es/theme/components/auto-complete.scss

@@ -0,0 +1,81 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(auto-complete) {
+  display: inline-flex;
+  @include e(wrapper) {
+    padding: 4px 0;
+    box-sizing: border-box;
+    background-color: getCssVar('color', 'bg-3');
+    box-shadow: getCssVar('shadow', '1');
+    border-radius: getCssVar('radius', 'medium');
+    border: 1px solid getCssVar('color', 'fill-3');
+  }
+
+  @include e(empty) {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(list) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  @include e(item) {
+    margin: 2px 0;
+    font-size: getCssVar('font-size', 'medium');
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: getCssVar('color', 'text-1');
+    cursor: pointer;
+    padding: 0 16px;
+
+    &:hover {
+      background-color: getCssVar('color', 'fill-2');
+      color: getCssVar('color', 'primary-6');
+    }
+
+    &.is-active {
+      color: getCssVar('color', 'primary-6');
+    }
+
+    &.is-highlight {
+      background-color: getCssVar('color', 'fill-2');
+      color: getCssVar('color', 'primary-6');
+    }
+  }
+
+  @include m(mini) {
+    @include be(auto-complete, item) {
+      height: getCssVar('size', 'small');
+      line-height: getCssVar('size', 'small');
+    }
+  }
+
+  @include m(small) {
+    @include be(auto-complete, item) {
+      height: getCssVar('size', 'small');
+      line-height: getCssVar('size', 'small');
+    }
+  }
+
+  @include m(medium) {
+    @include be(auto-complete, item) {
+      height: getCssVar('size', 'medium');
+      line-height: getCssVar('size', 'medium');
+    }
+  }
+
+  @include m(large) {
+    @include be(auto-complete, item) {
+      height: getCssVar('size', 'medium');
+      line-height: getCssVar('size', 'medium');
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(avatar) {
+  border-radius: getCssVar("radius", "large");
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  position: relative;
+  &:hover {
+    @include be(avatar, edit) {
+      display: flex;
+    }
+  }
+  @include m(circle) {
+    border-radius: getCssVar("radius", "circle");
+  }
+  @include e(content) {
+    line-height: 1.5715;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(edit) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    color: getCssVar("color", "white");
+    cursor: pointer;
+  }
+}

package/dist/es/theme/components/back-top.scss

@@ -0,0 +1,24 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(back-top) {
+  cursor: pointer;
+  z-index: 100;
+}
+.back-top-fade-enter-active,
+.back-top-fade-leave-active {
+  transition:
+    opacity 0.3s getCssVar('bezier', '1'),
+    transform 0.3s getCssVar('bezier', '1');
+  transform-origin: center center;
+}
+.back-top-fade-enter-from,
+.back-top-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.85);
+}
+.back-top-fade-enter-to,
+.back-top-fade-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,47 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(badge) {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  @include e(item) {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 2;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-align: center;
+    border-radius: 20px;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    background-color: getCssVar("color", "danger-6");
+    box-shadow: 0 0 0 2px getCssVar("color", "bg-2");
+  }
+  @include e(number) {
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    font-size: 12px;
+    line-height: 20px;
+    color: getCssVar("color", "white");
+  }
+  @include e(content) {
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    font-size: 12px;
+    line-height: 20px;
+    color: getCssVar("color", "white");
+  }
+  @include m(no-children) {
+    @include be(badge, item) {
+      position: relative;
+      top: unset;
+      right: unset;
+      display: inline-block;
+      transform: none;
+    }
+  }
+}

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

@@ -0,0 +1,267 @@
+@use "../mixins/mixins" as *;
+@use "../mixins/function" as *;
+@use "../common/var.scss" as *;
+
+@include b(button) {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  @include e(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: getCssVar("color", "text-1");
+  }
+  @include when(circle) {
+    border-radius: getCssVar("radius", "circle");
+  }
+  @include when(block) {
+    width: 100%;
+  }
+  @include when(secondary) {
+    color: getCssVar("color", "text-1");
+    background-color: getCssVar("color", "fill-3");
+    border: 1px solid getCssVar("color", "fill-3");
+    &:hover {
+      color: getCssVar("color", "text-1");
+      background-color: getCssVar("color", "fill-4");
+      border: 1px solid getCssVar("color", "fill-4");
+    }
+    @include when(disabled, loading) {
+      cursor: default;
+      color: getCssVar("color", "text-3");
+      border: 1px solid getCssVar("color", "fill-2");
+      background-color: getCssVar("color", "fill-2");
+      &:hover {
+        color: getCssVar("color", "text-3");
+        background-color: getCssVar("color", "fill-2");
+        border: 1px solid getCssVar("color", "fill-2");
+      }
+    }
+  }
+  @include m(default) {
+    background-color: getCssVar("color", "bg-2");
+    color: getCssVar("color", "text-1");
+    border: 1px solid getCssVar("color", "fill-4");
+    &:hover {
+      color: getCssVar("color", "primary-6");
+      border: 1px solid getCssVar("color", "primary-6");
+    }
+    &:focus-visible {
+      box-shadow: 0 0 0 4px getCssVar("color", "primary-3");
+    }
+    @include when(disabled, loading) {
+      cursor: default;
+      color: getCssVar("color", "text-3");
+      border: 1px solid getCssVar("color", "fill-3");
+      &:hover {
+        color: getCssVar("color", "text-3");
+        border: 1px solid getCssVar("color", "fill-3");
+      }
+    }
+    @include this-is(text) {
+      background-color: transparent;
+      border: 1px solid transparent;
+      &:hover {
+        background-color: getCssVar("color", "fill-2");
+        border: 1px solid getCssVar("color", "fill-2");
+        color: getCssVar("color", "text-1");
+      }
+    }
+    @include this-is(link) {
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: getCssVar("color", "text-1");
+      &:hover {
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: getCssVar("color", "primary-6");
+      }
+      &:active {
+        color: getCssVar("color", "primary-7");
+      }
+    }
+  }
+
+  @each $type in $type-list {
+    @include m(#{$type}) {
+      background-color: getCssVar("color", #{$type}-6);
+      color: getCssVar("color", "white");
+      border: 1px solid getCssVar("color", #{$type}-6);
+      &:hover {
+        background-color: getCssVar("color", #{$type}-5);
+        border: 1px solid getCssVar("color", #{$type}-5);
+      }
+      &:focus-visible {
+        box-shadow: 0 0 0 4px getCssVar("color", #{$type}-3);
+      }
+      @include be(button, icon) {
+        color: getCssVar("color", "white");
+      }
+      @include when(disabled, loading) {
+        cursor: default;
+        background-color: getCssVar("color", #{$type}-4);
+        border: 1px solid getCssVar("color", #{$type}-4);
+        &:hover {
+          background-color: getCssVar("color", #{$type}-4);
+          border: 1px solid getCssVar("color", #{$type}-4);
+        }
+      }
+      @include this-is(text) {
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: getCssVar("color", #{$type}-6);
+        &:hover {
+          background-color: getCssVar("color", "fill-2");
+          border: 1px solid getCssVar("color", "fill-2");
+        }
+      }
+      @include this-is(link) {
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: getCssVar("color", #{$type}-6);
+        &:hover {
+          background-color: transparent;
+          border: 1px solid transparent;
+          color: getCssVar("color", #{$type}-5);
+        }
+        &:active {
+          color: getCssVar("color", #{$type}-7);
+        }
+      }
+    }
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      height: getCssVar("size", #{$size});
+      font-size: getCssVar("font-size", #{$size});
+      line-height: getCssVar("line-height", #{$size});
+      border-radius: getCssVar("radius", #{$size});
+      @if $size == mini {
+        padding: 0 11px;
+        gap: 4px;
+      }
+      @if $size == small {
+        padding: 0 11px;
+        gap: 4px;
+      }
+      @if $size == medium {
+        padding: 0 15px;
+        gap: 8px;
+      }
+      @if $size == large {
+        padding: 0 19px;
+        gap: 8px;
+      }
+      @include be(button, icon) {
+        font-size: getCssVar("font-size", #{$size});
+      }
+      @include when(only-icon) {
+        height: getCssVar("size", #{$size});
+        width: getCssVar("size", #{$size});
+        line-height: getCssVar("size", #{$size});
+        padding: 0;
+      }
+      @include this-is(link) {
+        height: getCssVar("line-height", #{$size});
+        line-height: getCssVar("line-height", #{$size});
+        @if $size == mini {
+          padding: 0 4px;
+        }
+        @if $size == small {
+          padding: 0 4px;
+        }
+        @if $size == medium {
+          padding: 0 8px;
+        }
+        @if $size == large {
+          padding: 0 8px;
+        }
+      }
+    }
+  }
+}
+
+@include b(button-group) {
+  display: flex;
+  @include b(button) {
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      @include when(secondary) {
+        border-right: 1px solid getCssVar("color", "fill-4");
+        &:hover {
+          border-right: 1px solid getCssVar("color", "fill-4");
+        }
+      }
+    }
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      @include when(secondary) {
+        border-right: 1px solid getCssVar("color", "fill-4");
+        &:hover {
+          border-left: 1px solid getCssVar("color", "fill-4");
+        }
+      }
+    }
+  }
+  @include bm(button, default) {
+    &:not(:last-child) {
+      border-right: 1px solid getCssVar("color", "fill-4");
+      &:hover {
+        border-right: 1px solid getCssVar("color", "primary-6");
+      }
+    }
+    &:not(:first-child) {
+      border-left: 1px solid transparent;
+      &:hover {
+        border-left: 1px solid getCssVar("color", "primary-6");
+      }
+    }
+    @include when(link) {
+      border-right: none;
+      &:hover {
+        border-right: none;
+      }
+    }
+  }
+  @each $type in $type-list {
+    @include bm(button, #{$type}) {
+      &:not(:last-child) {
+        border-right: 1px solid getCssVar("color", #{$type}-5);
+      }
+      @include when(link) {
+        border-right: none;
+      }
+    }
+  }
+  @each $size in $size-list {
+    @include bm(button, #{$size}) {
+      &:not(:last-child) {
+        @include when(link) {
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: -1px;
+            width: 0;
+            height: getCssVar("font-size", #{$size});
+            border-right: 1px solid getCssVar("color", "fill-4");
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(card) {
+  background-color: getCssVar('color', 'bg-2');
+  font-size: getCssVar('font-size', 'medium');
+  border-radius: getCssVar('radius', 'larger');
+  border: 1px solid getCssVar('color', 'fill-3');
+  display: inline-flex;
+  flex-direction: column;
+  overflow: hidden;
+  @include e(image) {
+    overflow: hidden;
+  }
+  @include e(body) {
+    padding: 16px;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    overflow: hidden;
+  }
+  @include e(header) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(title) {
+    flex: 1;
+    font-size: getCssVar('font-size', 'large');
+  }
+  @include e(subtitle) {
+    font-size: getCssVar('font-size', 'medium');
+    color: getCssVar('color', 'text-3');
+  }
+  @include e(expand) {
+  }
+  @include e(content) {
+    flex: 1;
+    overflow: hidden;
+  }
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+  }
+  @include m(always) {
+    box-shadow: getCssVar('shadow', '1');
+  }
+  @include m(hover) {
+    &:hover {
+      box-shadow: getCssVar('shadow', '1');
+    }
+  }
+}