ep-craft 0.1.2 → 0.1.3

package/theme-chalk/src/color-picker-panel.scss

@@ -0,0 +1,294 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@mixin disable {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+@mixin alpha-bg {
+  background-image:
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position:
+    0 0,
+    6px 0,
+    6px -6px,
+    0 6px;
+}
+
+@mixin color-picker-thumb {
+  position: absolute;
+  cursor: pointer;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  border-radius: 1px;
+  background: #fff;
+  border: 1px solid getCssVar('border-color', 'lighter');
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  z-index: 1;
+
+  &:focus-visible {
+    outline: 2px solid getCssVar('color-primary');
+    outline-offset: 1px;
+  }
+}
+
+@mixin bar-background($side: right) {
+  background: linear-gradient(
+    to $side,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+}
+
+@include b(color-picker-panel) {
+  @include set-component-css-var('colorpicker', $colorpicker);
+  @include set-css-var-value(
+    ('fill-color', 'blank'),
+    getCssVar('colorpicker', 'bg-color')
+  );
+}
+
+@include b(color-picker-panel) {
+  width: 300px;
+  padding: 12px;
+  box-sizing: content-box;
+  background: getCssVar('colorpicker', 'bg-color');
+
+  @include when(border) {
+    border: solid 1px getCssVar('border-color-lighter');
+    border-radius: 4px;
+  }
+
+  @include e(wrapper) {
+    margin-bottom: 6px;
+
+    @include e(footer) {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 12px;
+      text-align: right;
+      @include b(input) {
+        line-height: 26px;
+        font-size: 12px;
+        color: $color-black;
+        width: 160px;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    @include b(color-svpanel) {
+      @include disable;
+    }
+    @include b(color-hue-slider) {
+      @include disable;
+    }
+    @include e(thumb) {
+      cursor: not-allowed;
+    }
+    @include b(color-alpha-slider) {
+      @include disable;
+    }
+    @include b(color-predefine) {
+      @include e(color-selector) {
+        @include disable;
+      }
+    }
+  }
+}
+
+@include b(color-predefine) {
+  display: flex;
+  font-size: 12px;
+  margin-top: 8px;
+  width: 280px;
+
+  @include e(colors) {
+    display: flex;
+    gap: 8px;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
+  @include e(color-selector) {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border-radius: getCssVar('border-radius-base');
+    border: none;
+    outline: none;
+    overflow: hidden;
+    cursor: pointer;
+
+    &.selected {
+      box-shadow: 0 0 3px 2px getCssVar('color-primary');
+    }
+
+    &:focus-visible {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 2px;
+    }
+
+    > div {
+      display: flex;
+      height: 100%;
+    }
+
+    @include when(alpha) {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+}
+
+@include b(color-hue-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  background-color: #f00;
+  padding: 0 2px;
+  float: right;
+
+  @include e(bar) {
+    position: relative;
+    @include bar-background;
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    @include color-picker-thumb;
+  }
+
+  @include when(vertical) {
+    width: 12px;
+    height: 180px;
+    padding: 2px 0;
+
+    .#{$namespace}-color-hue-slider__bar {
+      @include bar-background(bottom);
+    }
+
+    .#{$namespace}-color-hue-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+@include b(color-svpanel) {
+  position: relative;
+  width: 280px;
+  height: 180px;
+  background-image:
+    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
+    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+
+  @include e(cursor) {
+    position: absolute;
+    cursor: pointer;
+    width: 4px;
+    height: 4px;
+    box-shadow:
+      0 0 0 1.5px #fff,
+      inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
+      0 0 1px 2px rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+    transform: translate(-2px, -2px);
+
+    &:focus-visible {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 2px;
+    }
+  }
+}
+
+@include b(color-alpha-slider) {
+  position: relative;
+  box-sizing: border-box;
+  width: 280px;
+  height: 12px;
+  @include alpha-bg;
+
+  @include when(disabled) {
+    @include e(thumb) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(bar) {
+    position: relative;
+    background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      getCssVar('bg-color') 100%
+    );
+    height: 100%;
+  }
+
+  @include e(thumb) {
+    @include color-picker-thumb;
+  }
+
+  @include when(vertical) {
+    width: 20px;
+    height: 180px;
+
+    .#{$namespace}-color-alpha-slider__bar {
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+    }
+
+    .#{$namespace}-color-alpha-slider__thumb {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+    }
+  }
+}
+
+.#{bem('color-picker-panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker-panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}

package/theme-chalk/src/color-picker.scss

@@ -0,0 +1,165 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+$color-picker-size: () !default;
+$color-picker-size: map.merge($common-component-size, $color-picker-size);
+
+@mixin alpha-bg {
+  background-image:
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position:
+    0 0,
+    6px 0,
+    6px -6px,
+    0 6px;
+}
+
+@include b(color-picker) {
+  display: inline-block;
+  position: relative;
+  line-height: normal;
+  outline: none;
+  height: map.get($color-picker-size, 'default');
+  width: map.get($color-picker-size, 'default');
+
+  &:hover:not(.is-disabled, .is-focused) {
+    .#{$namespace}-color-picker__trigger {
+      border-color: getCssVar('border-color-hover');
+    }
+  }
+
+  &:focus-visible:not(.is-disabled) {
+    .#{$namespace}-color-picker__trigger {
+      outline: 2px solid getCssVar('color-primary');
+      outline-offset: 1px;
+    }
+  }
+
+  @include when(focused) {
+    .#{$namespace}-color-picker__trigger {
+      border-color: getCssVar('color-primary');
+    }
+  }
+
+  @include when(disabled) {
+    .#{$namespace}-color-picker__trigger {
+      cursor: not-allowed;
+      background-color: getCssVar('fill-color', 'light');
+    }
+
+    @include e(color) {
+      opacity: 0.3;
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($color-picker-size, $size);
+      width: map.get($color-picker-size, $size);
+    }
+  }
+
+  @include m(small) {
+    .#{$namespace}-color-picker__icon,
+    .#{$namespace}-color-picker__empty {
+      transform: scale(0.8);
+    }
+  }
+
+  @include e(trigger) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    padding: 4px;
+    border: 1px solid getCssVar('border-color');
+    border-radius: 4px;
+    font-size: 0;
+    position: relative;
+    cursor: pointer;
+  }
+
+  @include e(color) {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    border: 1px solid getCssVar('text-color', 'secondary');
+    border-radius: getCssVar('border-radius-small');
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    @include when(alpha) {
+      @include alpha-bg;
+      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    }
+  }
+
+  @include e(color-inner) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  & .#{$namespace}-color-picker__empty {
+    font-size: 12px;
+    color: getCssVar('text-color', 'secondary');
+  }
+
+  & .#{$namespace}-color-picker__icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: $color-white;
+    font-size: 12px;
+  }
+
+  @include e(panel) {
+    background-color: $color-white;
+    border-radius: getCssVar('border-radius-base');
+    box-shadow: map.get($dropdown, 'menu-box-shadow');
+    &.#{$namespace}-popper {
+      border: 1px solid getCssVar('border-color-lighter');
+    }
+  }
+}
+
+.#{bem('color-picker')},
+.#{bem('color-picker', 'panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker')},
+  .#{bem('color-picker', 'panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}

package/theme-chalk/src/common/popup.scss

@@ -0,0 +1,47 @@
+@use './var' as *;
+@use '../mixins/mixins' as *;
+@use '../mixins/var' as *;
+
+:root {
+  @include set-component-css-var('popup', $popup);
+}
+
+.v-modal-enter {
+  animation: v-modal-in getCssVar('transition-duration-fast') ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out getCssVar('transition-duration-fast') ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: getCssVar('popup-modal-opacity');
+  background: getCssVar('popup-modal-bg-color');
+}
+
+@include b(popup-parent) {
+  @include m(hidden) {
+    overflow: hidden;
+  }
+}

package/theme-chalk/src/common/transition.scss

@@ -0,0 +1,125 @@
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+  transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+  opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+  transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: center top;
+
+  &[data-popper-placement^='top'] {
+    transform-origin: center bottom;
+  }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition: getCssVar('transition-md-fade');
+  transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+  opacity: 0;
+  transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+  transition:
+    getCssVar('transition-duration') height ease-in-out,
+    getCssVar('transition-duration') padding-top ease-in-out,
+    getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+  transition:
+    getCssVar('transition-duration') max-height ease-in-out,
+    getCssVar('transition-duration') padding-top ease-in-out,
+    getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.horizontal-collapse-transition {
+  transition:
+    getCssVar('transition-duration') width ease-in-out,
+    getCssVar('transition-duration') padding-left ease-in-out,
+    getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+  transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+  position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+  transition: opacity getCssVar('transition-duration')
+    cubic-bezier(0.55, 0, 0.1, 1);
+}