savor-ui 0.0.1

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

@@ -0,0 +1,58 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+@use '../common/var.scss' as *;
+
+@include b(skeleton) {
+  @include when(animation) {
+    @include be(skeleton, line-item) {
+      background: linear-gradient(
+        90deg,
+        getCssVar('color', 'fill-2') 25%,
+        getCssVar('color', 'fill-3') 37%,
+        getCssVar('color', 'fill-2') 63%
+      );
+      background-size: 400% 100%;
+      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
+    }
+    @include be(skeleton, shape) {
+      background: linear-gradient(
+        90deg,
+        getCssVar('color', 'fill-2') 25%,
+        getCssVar('color', 'fill-3') 37%,
+        getCssVar('color', 'fill-2') 63%
+      );
+      background-size: 400% 100%;
+      animation: skeleton-animation 1.5s cubic-bezier(0, 0, 1, 1) infinite;
+    }
+  }
+  @include e(line) {
+    display: flex;
+    flex-direction: column;
+  }
+  @include e(line-item) {
+    height: 20px;
+    background-color: getCssVar('color', 'fill-2');
+  }
+  @include e(shape) {
+    background-color: getCssVar('color', 'fill-2');
+    @include when(circle) {
+      border-radius: getCssVar('radius', 'circle');
+    }
+  }
+  @each $size in $size-list {
+    @include m($size) {
+      height: getCssVar('size', $size);
+      width: getCssVar('size', $size);
+      border-radius: getCssVar('radius', $size);
+    }
+  }
+
+  @keyframes skeleton-animation {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+@use "../mixins/mixins.scss" as *;
+
+@include b(space) {
+  display: inline-flex;
+  @include e(item) {
+    display: flex;
+  }
+  @include m(horizontal) {
+    flex-direction: row;
+  }
+  @include m(vertical) {
+    flex-direction: column;
+  }
+  @include m(fill) {
+    width: 100%;
+    @include child-be(space, item) {
+      width: 100%;
+    }
+  }
+  @include m(align-center) {
+    align-items: center;
+    @include child-be(space, item) {
+      align-items: center;
+    }
+  }
+  @include m(align-start) {
+    align-items: flex-start;
+    @include child-be(space, item) {
+      align-items: flex-start;
+    }
+  }
+  @include m(align-end) {
+    align-items: flex-end;
+    @include child-be(space, item) {
+      align-items: flex-end;
+    }
+  }
+  @include m(align-end) {
+    align-items: flex-end;
+    @include child-be(space, item) {
+      align-items: flex-end;
+    }
+  }
+  @include m(justify-start) {
+    justify-content: flex-start;
+    @include child-be(space, item) {
+      justify-content: flex-start;
+    }
+  }
+  @include m(justify-center) {
+    justify-content: center;
+    @include child-be(space, item) {
+      justify-content: center;
+    }
+  }
+  @include m(justify-end) {
+    justify-content: flex-end;
+    @include child-be(space, item) {
+      justify-content: flex-end;
+    }
+  }
+  @include m(justify-between) {
+    justify-content: space-between;
+    @include child-be(space, item) {
+      justify-content: space-between;
+    }
+  }
+  @include m(justify-around) {
+    justify-content: space-around;
+    @include child-be(space, item) {
+      justify-content: space-around;
+    }
+  }
+}

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

@@ -0,0 +1,151 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(split) {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-direction: row;
+
+  @include e(panel) {
+    flex-grow: 0;
+    overflow: auto;
+    scrollbar-width: thin;
+    box-sizing: border-box;
+    height: 100%;
+    transition:
+      height 0.2s getCssVar("bezier", "1"),
+      width 0.2s getCssVar("bezier", "1");
+
+    @include when(collapsed) {
+      overflow: hidden !important;
+    }
+  }
+
+  @include when(dragging) {
+    @include be(split, panel) {
+      transition: none !important;
+    }
+  }
+
+  @include e(bar) {
+    flex: none;
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    width: 0;
+    &:hover {
+      @include be(split, collapse) {
+        opacity: 1;
+      }
+    }
+
+    @include when(resizable) {
+      @include be(split, dragger) {
+        cursor: ew-resize;
+        &:hover::before {
+          background-color: getCssVar("color", "primary-3");
+        }
+      }
+    }
+
+    @include when(dragging) {
+      @include be(split, dragger) {
+        &::before {
+          background-color: getCssVar("color", "primary-3");
+        }
+      }
+    }
+  }
+
+  @include e(dragger) {
+    z-index: 1;
+    position: absolute;
+    background: transparent;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 100%;
+    cursor: default;
+    touch-action: none;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: getCssVar("color", "fill-3");
+      height: 100%;
+      width: 2px;
+    }
+    &:hover::before {
+      background-color: getCssVar("color", "fill-3");
+    }
+  }
+
+  @include e(collapse) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background-color: getCssVar("color", "fill-3");
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 9;
+    &:hover {
+      background-color: getCssVar("color", "primary-3");
+    }
+  }
+
+  @include e(collapse-prev) {
+    left: -12px;
+    top: 50%;
+    height: 24px;
+    width: 16px;
+    transform: translate(-50%, -50%);
+  }
+
+  @include e(collapse-next) {
+    left: 12px;
+    top: 50%;
+    height: 24px;
+    width: 16px;
+    transform: translate(-50%, -50%);
+  }
+
+  @include e(mask) {
+    position: absolute;
+    z-index: 999;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: ew-resize;
+  }
+
+  @include when(vertical) {
+    flex-direction: column;
+
+    @include be(split, mask) {
+      cursor: ns-resize;
+    }
+    @include be(split, bar) {
+      height: 0;
+      width: unset;
+    }
+    @include be(split, dragger) {
+      width: 100%;
+      height: 16px;
+      cursor: ns-resize;
+      &::before {
+        height: 2px;
+        width: 100%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(statistic) {
+  display: inline-flex;
+  flex-direction: column;
+
+  @include e(title) {
+    font-size: getCssVar('font-size', 'medium');
+    color: getCssVar('color', 'text-2');
+    margin-bottom: 8px;
+  }
+  @include e(content) {
+    display: flex;
+    align-items: flex-end;
+    color: getCssVar('color', 'text-1');
+  }
+  @include e(value) {
+    font-size: 24px;
+    white-space: nowrap;
+  }
+  @include e(prefix) {
+    font-size: getCssVar('font-size', 'medium');
+  }
+  @include e(suffix) {
+    font-size: getCssVar('font-size', 'medium');
+  }
+  @include e(extra) {
+    font-size: getCssVar('font-size', 'medium');
+    color: getCssVar('color', 'text-2');
+    margin-top: 8px;
+  }
+}

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

@@ -0,0 +1,116 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(switch) {
+  display: inline-flex;
+  align-items: center;
+  font-size: getCssVar("font-size", "medium");
+  line-height: 1.5715;
+
+  @include when(disabled) {
+    @include be(switch, core) {
+      background-color: getCssVar("color", "primary-3") !important;
+      border-color: getCssVar("color", "primary-3") !important;
+      cursor: not-allowed;
+    }
+  }
+
+  @include when(error) {
+    @include be(switch, core) {
+      border-color: getCssVar("color", "error-6") !important;
+    }
+  }
+
+  @include when(checked) {
+    @each $size in $size-list {
+      @include this-bm(switch, #{$size}) {
+        @include be(switch, core-action) {
+          left: calc(100% - (getCssVar("size", $size) - 12px + 3px));
+        }
+        @include be(switch, core-label) {
+          padding: 0 calc(getCssVar("size", $size) - 12px + 8px) 0 8px;
+        }
+      }
+    }
+  }
+
+  @include e(inner) {
+    position: absolute;
+    height: 0;
+    width: 0;
+    opacity: 0;
+    margin: 0;
+
+    &:focus-visible {
+      @include next-be(switch, core) {
+        outline: 2px solid getCssVar("color", "primary-6");
+        outline-offset: 1px;
+        transition:
+          outline-offset 0s,
+          outline 0s;
+      }
+    }
+  }
+
+  @include e(core) {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    border-radius: getCssVar("radius", "medium");
+    cursor: pointer;
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  @include e(core-action) {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    border-radius: getCssVar("radius", "small");
+    background-color: getCssVar("color", "bg-3");
+    transition:
+      background-color 0.3s getCssVar("bezier", "1"),
+      left 0.3s getCssVar("bezier", "1");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e(core-label) {
+    width: 100%;
+    transition: padding 0.3s getCssVar("bezier", "1");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: getCssVar("color", "white");
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      height: calc(getCssVar("size", $size) - 4px);
+      min-width: calc((getCssVar("size", $size) - 4px) * 2);
+      @include be(switch, core-action) {
+        height: calc(getCssVar("size", $size) - 12px);
+        width: calc(getCssVar("size", $size) - 12px);
+      }
+      @include be(switch, core-label) {
+        padding: 0 8px 0 calc(getCssVar("size", $size) - 12px + 8px);
+      }
+    }
+  }
+
+  @include when(circle) {
+    @include be(switch, core) {
+      border-radius: 999px;
+    }
+
+    @include be(switch, core-action) {
+      border-radius: getCssVar("radius", "circle");
+    }
+  }
+}