@tendaui/components 1.0.0 → 1.0.2

package/styles/components/checkbox/_var.scss

@@ -1,60 +1,60 @@
-// 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
-// 如：$button-line-bg-color-hover
-// 如：$button-line-height-s
-
-$checkbox-cls: '#{$prefix}-checkbox';
-
-// 颜色
-$checkbox-border-color: $border-level-2-color;
-$checkbox-border-color-checked: $brand-color;
-$checkbox-border-color-hover: $brand-color;
-
-$checkbox-input-color: $bg-color-container;
-$checkbox-input-color-checked: $brand-color;
-$checkbox-input-color-disabled: $bg-color-component-disabled;
-
-$checkbox-check-color: $text-color-anti;
-$checkbox-check-color-disabled: $text-color-disabled;
-// 图标禁止选中状态下时icon的色值变量
-$checkbox-check-icon-disabled-color: $text-color-disabled;
-
-$checkbox-input-color-indeterminate: $brand-color;
-$checkbox-indeterminate-color-disabled: $text-color-disabled;
-
-$checkbox-label-color: $text-color-primary;
-
-// 尺寸
-$checkbox-size: 16px;
-$checkbox-border-radius: $border-radius-default;
-$checkbox-margin-right: $comp-margin-s;
-
-$checkbox-check-width: 5px;
-$checkbox-check-height: 9px;
-$checkbox-check-size: (
-  ($checkbox-check-width + $checkbox-check-height) / sqrt(2)
-);
-$checkbox-check-left: 3px;
-
-$checkbox-indeterminate-width: 16px;
-$checkbox-indeterminate-height: 4px;
-$checkbox-indeterminate-color: $font-white-1;
-
-// 字号
-$checkbox-font: $font-body-medium;
-
-// padding
-$checkbox-input-label-spacer: $spacer;
-
-// 组合复选框margin
-$checkbox-group-gap: $spacer-2;
-// 单个复选框margin
-$checkbox-margin: inherit;
+// 组件变量
+// 名称可按如下规则定义：
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button，
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius等
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+$checkbox-cls: '#{$prefix}-checkbox';
+
+// 颜色
+$checkbox-border-color: $border-level-2-color;
+$checkbox-border-color-checked: $brand-color;
+$checkbox-border-color-hover: $brand-color;
+
+$checkbox-input-color: $bg-color-container;
+$checkbox-input-color-checked: $brand-color;
+$checkbox-input-color-disabled: $bg-color-component-disabled;
+
+$checkbox-check-color: $text-color-anti;
+$checkbox-check-color-disabled: $text-color-disabled;
+// 图标禁止选中状态下时icon的色值变量
+$checkbox-check-icon-disabled-color: $text-color-disabled;
+
+$checkbox-input-color-indeterminate: $brand-color;
+$checkbox-indeterminate-color-disabled: $text-color-disabled;
+
+$checkbox-label-color: $text-color-primary;
+
+// 尺寸
+$checkbox-size: 16px;
+$checkbox-border-radius: $border-radius-default;
+$checkbox-margin-right: $comp-margin-s;
+
+$checkbox-check-width: 5px;
+$checkbox-check-height: 9px;
+$checkbox-check-size: (
+  ($checkbox-check-width + $checkbox-check-height) / sqrt(2)
+);
+$checkbox-check-left: 3px;
+
+$checkbox-indeterminate-width: 16px;
+$checkbox-indeterminate-height: 4px;
+$checkbox-indeterminate-color: $font-white-1;
+
+// 字号
+$checkbox-font: $font-body-medium;
+
+// padding
+$checkbox-input-label-spacer: $spacer;
+
+// 组合复选框margin
+$checkbox-group-gap: $spacer-2;
+// 单个复选框margin
+$checkbox-margin: inherit;

package/styles/components/color-picker/_index.scss

@@ -0,0 +1,586 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../_vars.scss";
+
+@import "./_vars.scss";
+
+@import "./_mixins.scss";
+
+@import "../../mixins/_reset.scss";
+
+.#{$prefix}-color-picker__panel {
+  padding: 0;
+  width: $color-picker-panel-width;
+  background: $bg-color-container;
+  box-shadow: $color-picker-panel-shadow;
+  border-radius: $border-radius-medium;
+  user-select: none;
+}
+
+.#{$prefix}-popup__content {
+  .#{$prefix}-color-picker__panel {
+    background: transparent;
+    box-shadow: unset;
+  }
+}
+
+.#{$prefix}-color-picker {
+  @include reset;
+
+  &.t-popup__content {
+    box-shadow: $color-picker-panel-shadow;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $color-picker-icon-font-size;
+    background: transparent;
+    transition: $anim-duration-base linear;
+    color: $text-color-secondary;
+    border-radius: $color-picker-icon-radius;
+    cursor: pointer;
+
+    &:hover {
+      background: $bg-color-container-hover;
+      transition: $anim-duration-base linear;
+    }
+    &.#{$prefix}-is-disabled {
+      color: $text-color-disabled;
+      pointer-events: none;
+    }
+  }
+}
+
+.#{$prefix}-color-picker__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $color-picker-panel-padding;
+  position: relative;
+  z-index: 2;
+
+  .#{$prefix}-color-picker__close {
+    flex-shrink: 0;
+  }
+
+  & + .#{$prefix}-color-picker__body {
+    padding-top: 0;
+  }
+}
+
+.#{$prefix}-color-picker__body {
+  padding: $color-picker-panel-padding;
+  padding-bottom: calc($color-picker-panel-padding - 4px);
+}
+
+.#{$prefix}-color-picker__thumb {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  border-color: currentcolor;
+  width: $color-picker-slider-thumb-size;
+  height: $color-picker-slider-thumb-size;
+  border-radius: $border-radius-circle;
+  box-shadow: $color-picker-thumbs-shadow;
+  background: $text-color-anti;
+  color: $text-color-brand;
+  padding: $color-picker-slider-thumb-padding;
+  box-sizing: border-box;
+
+  &::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: currentcolor;
+    border-radius: $border-radius-circle;
+    display: block;
+  }
+}
+
+.#{$prefix}-color-picker__saturation {
+  height: $color-picker-saturation-height;
+  border-radius: $color-picker-saturation-radius;
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    /* stylelint-disable-next-line color-no-hex */
+    background: linear-gradient(90deg, #fff, transparent);
+  }
+
+  &::after {
+    /* stylelint-disable-next-line color-no-hex */
+    background: linear-gradient(0deg, #000, transparent);
+  }
+
+  .#{$prefix}-color-picker__thumb {
+    width: $color-picker-saturation-thumb-size;
+    height: $color-picker-saturation-thumb-size;
+    border-radius: $border-radius-circle;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@mixin transparentBgImage() {
+  /* stylelint-disable-next-line color-no-hex */
+  background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5),
+    linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5);
+  background-size: 6px 6px;
+  background-position:
+    0 0,
+    3px 3px;
+}
+
+.#{$prefix}-color-picker__slider-wrapper {
+  border-radius: $color-picker-slider-wrapper-radius;
+  padding: $color-picker-slider-wrapper-padding;
+  position: relative;
+
+  &--hue-type {
+    /* stylelint-disable-next-line color-named */
+    background: red;
+  }
+
+  &--alpha-type {
+    background: $text-color-anti;
+    @include transparentBgImage();
+  }
+}
+
+.#{$prefix}-color-picker__slider-padding {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: $color-picker-slider-height;
+  border-radius: $color-picker-slider-wrapper-radius;
+}
+
+.#{$prefix}-color-picker__slider {
+  height: $color-picker-slider-height;
+  position: relative;
+  border-radius: $color-picker-slider-wrapper-radius;
+  cursor: pointer;
+  color: transparent;
+  outline: none;
+  z-index: 1;
+
+  .#{$prefix}-color-picker__thumb {
+    transform: translate($color-picker-slider-thumb-transform-x, -50%);
+    top: 50%;
+  }
+
+  .#{$prefix}-color-picker__rail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+}
+
+.#{$prefix}-color-picker__alpha,
+.#{$prefix}-color-picker__format {
+  margin: $color-picker-margin 0 0 0;
+}
+
+.#{$prefix}-color-picker__hue {
+  /* stylelint-disable color-no-hex, color-named */
+  background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+}
+
+.#{$prefix}-color-picker__alpha {
+  .#{$prefix}-color-picker__rail {
+    background: linear-gradient(to right, transparent, currentcolor);
+  }
+}
+
+.#{$prefix}-color-picker__sliders-wrapper {
+  display: flex;
+  align-items: center;
+  margin: $color-picker-margin 0;
+}
+
+.#{$prefix}-color-picker__sliders {
+  width: 100%;
+}
+
+.#{$prefix}-color-picker__sliders-preview {
+  flex-shrink: 0;
+  margin-left: $color-picker-margin;
+  width: $color-picker-gradient-preview-width;
+  height: $color-picker-gradient-preview-height;
+  border-radius: $color-picker-gradient-preview-radius;
+  overflow: hidden;
+  background: $text-color-anti;
+  @include transparentBgImage();
+
+  &-inner {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$prefix}-color-picker__gradient {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  margin-bottom: $color-picker-margin;
+
+  &-slider {
+    flex: 1;
+  }
+
+  &-degree {
+    position: relative;
+    flex-shrink: 0;
+    margin-left: $color-picker-margin;
+    width: $color-picker-degree-width;
+    .#{$prefix}-input {
+      margin: 0;
+      font: $color-picker-font;
+    }
+    .#{$prefix}-input-number {
+      width: 100%;
+      padding: 0;
+    }
+  }
+
+  .gradient-thumbs {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: inherit;
+    cursor: pointer;
+
+    &__item {
+      top: 50%;
+      left: 0;
+      transform: translate(-50%, -50%);
+      z-index: 0;
+      cursor: pointer;
+
+      &::before {
+        display: none;
+      }
+      &.#{$prefix}-is-active {
+        z-index: 1;
+        outline: 2px solid $component-border;
+      }
+
+      &-inner {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: $border-radius-circle;
+        overflow: hidden;
+
+        &::before {
+          content: "";
+          width: 100%;
+          height: 100%;
+          display: block;
+          background-color: currentcolor;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-color-picker__format {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &--item {
+    &:first-child {
+      flex-shrink: 0;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+    .#{$prefix}-size-m,
+    .#{$prefix}-input.#{$prefix}-size-m {
+      font: $color-picker-font;
+    }
+    .#{$prefix}-input-number .#{$prefix}-input {
+      margin: 0;
+    }
+
+    .input-group {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-left: $color-picker-input-format-margin-left;
+
+      &__item {
+        flex: 1;
+        width: 0;
+        margin-left: -1px;
+        .#{$prefix}-input {
+          padding: 0 1px;
+
+          &:focus,
+          &:focus-within,
+          &:hover {
+            z-index: 1;
+          }
+        }
+
+        &:not(:first-child):not(:last-child) {
+          .#{$prefix}-input {
+            border-radius: 0;
+          }
+        }
+
+        &:first-child:not(:last-child) {
+          .#{$prefix}-input {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:last-child:not(:first-child) {
+          .#{$prefix}-input {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+      .#{$prefix}-input-number {
+        width: 100%;
+        padding: 0;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &-mode-select {
+    width: $color-picker-select-format-width;
+    display: flex;
+
+    .t-select,
+    .t-input {
+      padding-right: 0;
+    }
+
+    .t-input--prefix > .t-input__suffix {
+      padding-left: 0;
+    }
+
+    .t-select__right-icon {
+      margin-right: $color-picker-select-format-margin-right;
+    }
+  }
+}
+
+.#{$prefix}-color-picker__swatches-wrap {
+  margin-top: $color-picker-margin;
+  position: relative;
+
+  .#{$prefix}-color-picker__swatches {
+    + .#{$prefix}-color-picker__swatches {
+      margin-top: $color-picker-margin;
+    }
+
+    &--title {
+      font: $color-picker-font;
+      padding: 0;
+      color: $text-color-primary;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &--actions {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      font-size: 0;
+      .#{$prefix}-color-picker__icon {
+        width: $color-picker-swatch-icon-size;
+        height: $color-picker-swatch-icon-size;
+        margin-left: $color-picker-swatch-action-margin-left;
+      }
+    }
+
+    &--items {
+      width: 100%;
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat($color-picker-swatch-columns, $color-picker-swatch-width);
+      gap: $color-picker-swatch-row-gap $color-picker-swatch-column-gap;
+      max-height: $color-picker-swatch-rows-max-height;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: $color-picker-swatch-item-padding;
+      position: relative;
+      left: $color-picker-swatch-item-left-negative-padding;
+      box-sizing: content-box;
+    }
+
+    &--item {
+      display: flex;
+      width: $color-picker-swatch-width;
+      height: $color-picker-swatch-height;
+      border-radius: $border-radius-default;
+      padding: $color-picker-swatch-padding;
+      overflow: hidden;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      transform-origin: center;
+      transition: all $anim-duration-base $anim-time-fn-easing;
+      box-sizing: border-box;
+
+      &:hover {
+        transform: scale(1.25);
+        transform-origin: center;
+      }
+
+      // 暂时先不删，待react同步后再删除
+      &__color {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        border: 1px solid $component-border;
+        border-radius: $border-radius-default;
+        flex-shrink: 0;
+      }
+
+      // 暂时先不删，待react同步后再删除
+      &__inner {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      &:not(.#{$prefix}-is-active):hover {
+        padding: 0;
+      }
+
+      // 暂时先不删，待react同步后再删除
+      &.#{$prefix}-is-active .#{$prefix}-color-picker__swatches--item__color,
+      &.#{$prefix}-is-active .#{$prefix}-color-picker__swatches--color {
+        border-color: $text-color-brand;
+      }
+    }
+
+    &--color {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      border-radius: $border-radius-default;
+      box-sizing: border-box;
+    }
+
+    &--inner {
+      width: 100%;
+      height: 100%;
+      display: block;
+      border-radius: $border-radius-default;
+      box-shadow: $colot-picker-swatch-item-color-inset-shadow;
+    }
+  }
+}
+
+.#{$prefix}-color-picker__trigger {
+  &--default {
+    display: inline-flex;
+    align-items: center;
+    > .#{$prefix}-input {
+      width: fit-content;
+    }
+    .#{$prefix}-input {
+      padding: $color-picker-trigger-input-padding;
+    }
+
+    &__color {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+
+      .color-inner {
+        border: 1px solid $scrollbar-color;
+        display: block;
+        width: $color-picker-trigger-input-color-inner-size;
+        height: $color-picker-trigger-input-color-inner-size;
+        color: transparent;
+        position: relative;
+        border-radius: $border-radius-small;
+
+        &.#{$prefix}-size-s {
+          width: $color-picker-trigger-input-color-inner-size-s;
+          height: $color-picker-trigger-input-color-inner-size-s;
+        }
+
+        &.#{$prefix}-size-l {
+          width: $color-picker-trigger-input-color-inner-size-l;
+          height: $color-picker-trigger-input-color-inner-size-l;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-color-picker__gradient-slider {
+  padding: $color-picker-slider-wrapper-padding;
+  border-radius: $color-picker-slider-wrapper-radius;
+
+  .#{$prefix}-color-picker--bg-alpha {
+    background: $text-color-anti;
+    @include transparentBgImage();
+  }
+}
+
+.#{$prefix}-color-picker__panel.#{$prefix}-is-disabled {
+  .#{$prefix}-color-picker__saturation,
+  .#{$prefix}-color-picker__slider,
+  .#{$prefix}-color-picker__swatches--item {
+    opacity: 0.8;
+    cursor: not-allowed;
+  }
+  .#{$prefix}-color-picker__gradient-slider {
+    .gradient-thumbs,
+    .gradient-thumbs__item {
+      cursor: not-allowed;
+    }
+  }
+  .#{$prefix}-color-picker__swatches--item:hover {
+    padding: $color-picker-swatch-padding;
+  }
+}
+
+// 覆盖select-option 默认样式，使其更紧凑点
+.#{$prefix}-color-picker__select-options {
+  > .#{$prefix}-popup__content {
+    box-shadow: $shadow-1, $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;
+  }
+}