rappel-ui 1.0.1 → 1.0.2

package/theme-chalk/re-button.css

@@ -0,0 +1,446 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+.re-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  padding: 8px 16px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--re-button-bgcolor);
+  color: var(--re-button-color);
+  border-color: var(--re-button-border-color);
+}
+.re-button__content {
+  display: inline-flex;
+  align-items: center;
+}
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.re-button__loading {
+  animation: rotating 2s linear infinite;
+}
+.re-button__loading + * {
+  margin-left: 4px;
+}
+.re-button__icon {
+  margin-right: 4px;
+  width: 1em;
+  height: 1em;
+}
+.re-button.is-link {
+  padding: 2px;
+  height: auto;
+  border-color: var(--re-color-fill-transparent);
+  background-color: var(--re-color-fill-transparent);
+  text-decoration: underline;
+}
+.re-button.is-plain:hover:not(.is-disabled) {
+  border-color: var(--re-color-primary-base);
+  background-color: var(--re-color-fill-blank);
+}
+.re-button.is-round {
+  border-radius: 20px;
+}
+.re-button.is-circle {
+  width: 32px;
+  border-radius: 50%;
+  padding: 8px;
+}
+.re-button:active:not(.is-disabled) {
+  transform: scale(0.97);
+  transition: transform 0s ease;
+}
+.re-button:focus-visible {
+  outline: none;
+}
+.re-button + .re-button {
+  margin-left: 10px;
+}
+.re-button {
+  --re-button-bgcolor: var(--re-color-fill-blank);
+  --re-button-color: var(--re-color-text-secondary);
+  --re-button-border-color: var(--re-color-border-base);
+}
+.re-button:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+}
+.re-button.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-border-base);
+  color: var(--re-color-text-disabled);
+}
+.re-button.is-link {
+  --re-button-color: var(--re-color-text-secondary);
+}
+.re-button.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-text-disabled);
+}
+.re-button.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--primary {
+  --re-button-bgcolor: var(--re-color-primary-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-base);
+}
+.re-button--primary:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-hover);
+}
+.re-button--primary.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-primary-shade-4);
+  border-color: var(--re-color-primary-shade-4);
+  color: var(--re-color-fill-blank);
+}
+.re-button--primary.is-link {
+  --re-button-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-plain {
+  background-color: var(--re-color-primary-shade-1);
+  color: var(--re-color-primary-base);
+  border-color: var(--re-color-primary-shade-6);
+}
+.re-button--primary.is-plain:hover:not(.is-disabled) {
+  color: var(--re-color-fill-blank);
+  background-color: var(--re-color-primary-base);
+  border-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-plain.is-disabled {
+  background-color: var(--re-color-primary-shade-1);
+  color: var(--re-color-primary-shade-4);
+  border-color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--success {
+  --re-button-bgcolor: var(--re-color-success-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-base);
+}
+.re-button--success:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-hover);
+}
+.re-button--success.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-success-shade-4);
+  border-color: var(--re-color-success-shade-4);
+  color: var(--re-color-fill-blank);
+}
+.re-button--success.is-link {
+  --re-button-color: var(--re-color-success-base);
+}
+.re-button--success.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-success-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-plain {
+  background-color: var(--re-color-success-shade-1);
+  color: var(--re-color-success-base);
+  border-color: var(--re-color-success-shade-6);
+}
+.re-button--success.is-plain:hover:not(.is-disabled) {
+  color: var(--re-color-fill-blank);
+  background-color: var(--re-color-success-base);
+  border-color: var(--re-color-success-base);
+}
+.re-button--success.is-plain.is-disabled {
+  background-color: var(--re-color-success-shade-1);
+  color: var(--re-color-success-shade-4);
+  border-color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--danger {
+  --re-button-bgcolor: var(--re-color-danger-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-base);
+}
+.re-button--danger:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-hover);
+}
+.re-button--danger.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-danger-shade-4);
+  border-color: var(--re-color-danger-shade-4);
+  color: var(--re-color-fill-blank);
+}
+.re-button--danger.is-link {
+  --re-button-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-danger-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-plain {
+  background-color: var(--re-color-danger-shade-1);
+  color: var(--re-color-danger-base);
+  border-color: var(--re-color-danger-shade-6);
+}
+.re-button--danger.is-plain:hover:not(.is-disabled) {
+  color: var(--re-color-fill-blank);
+  background-color: var(--re-color-danger-base);
+  border-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-plain.is-disabled {
+  background-color: var(--re-color-danger-shade-1);
+  color: var(--re-color-danger-shade-4);
+  border-color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--warning {
+  --re-button-bgcolor: var(--re-color-warning-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-base);
+}
+.re-button--warning:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-hover);
+}
+.re-button--warning.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-warning-shade-4);
+  border-color: var(--re-color-warning-shade-4);
+  color: var(--re-color-fill-blank);
+}
+.re-button--warning.is-link {
+  --re-button-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-warning-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-plain {
+  background-color: var(--re-color-warning-shade-1);
+  color: var(--re-color-warning-base);
+  border-color: var(--re-color-warning-shade-6);
+}
+.re-button--warning.is-plain:hover:not(.is-disabled) {
+  color: var(--re-color-fill-blank);
+  background-color: var(--re-color-warning-base);
+  border-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-plain.is-disabled {
+  background-color: var(--re-color-warning-shade-1);
+  color: var(--re-color-warning-shade-4);
+  border-color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--info {
+  --re-button-bgcolor: var(--re-color-info-base);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-base);
+}
+.re-button--info:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-hover);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-hover);
+}
+.re-button--info.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--re-color-info-shade-4);
+  border-color: var(--re-color-info-shade-4);
+  color: var(--re-color-fill-blank);
+}
+.re-button--info.is-link {
+  --re-button-color: var(--re-color-info-base);
+}
+.re-button--info.is-link:hover:not(.is-disabled) {
+  --re-button-color: var(--re-color-info-hover);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link.is-disabled {
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-fill-blank);
+  color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-plain {
+  background-color: var(--re-color-info-shade-1);
+  color: var(--re-color-info-base);
+  border-color: var(--re-color-info-shade-6);
+}
+.re-button--info.is-plain:hover:not(.is-disabled) {
+  color: var(--re-color-fill-blank);
+  background-color: var(--re-color-info-base);
+  border-color: var(--re-color-info-base);
+}
+.re-button--info.is-plain.is-disabled {
+  background-color: var(--re-color-info-shade-1);
+  color: var(--re-color-info-shade-4);
+  border-color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-loading:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  pointer-events: none;
+  border-radius: inherit;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.re-button--large {
+  padding: 12px 20px;
+}
+.re-button-- {
+  padding: 8px 16px;
+}
+.re-button--small {
+  padding: 6px 12px;
+}
+.re-button--mini {
+  padding: 4px 8px;
+}

package/theme-chalk/root-vars.css

@@ -0,0 +1,132 @@
+@charset "UTF-8";
+/**
+ * 将十六进制颜色转换为RGB颜色
+ * @param $hex 十六进制颜色值
+ * @returns RGB颜色值
+ * color.channel($color, "red", $space: rgb)
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $value RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 将RGB颜色转换为十六进制颜色
+ * @param $color RGB颜色值
+ * @returns 十六进制颜色值
+ */
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+/**
+ * 生成不同(0.9-0.1)透明度对应的等值颜色：
+         primary: (
+            base: #937bff,
+            hover: #7e69dc,
+            shade-9: #9e88ff,
+            shade-8: #a995ff,
+            shade-7: #b3a3ff,
+            shade-6: #beb0ff,
+            shade-5: #c9bdff,
+            shade-4: #d4caff,
+            shade-3: #ded7ff,
+            shade-2: #e9e5ff,
+            shade-1: #f4f2ff
+        ),
+ */
+:root {
+  --re-color-primary: #937bff;
+  --re-color-text-darkest: #000000;
+  --re-color-text-base: #303131;
+  --re-color-text-secondary: #606062;
+  --re-color-text-neutral: #909093;
+  --re-color-text-placeholder: #b2b2b6;
+  --re-color-text-disabled: #cdcdd1;
+  --re-color-text-lightest: #ffffff;
+  --re-color-border-darker: #c3c3cb;
+  --re-color-border-dark: #d0d0d8;
+  --re-color-border-base: #dbdbe0;
+  --re-color-border-light: #e4e4e8;
+  --re-color-border-lighter: #ededef;
+  --re-color-border-extra-light: #efeff3;
+  --re-color-border-theme: #d4caff;
+  --re-color-fill-darker: #d7d7dc;
+  --re-color-fill-dark: #e8e8ec;
+  --re-color-fill-base: #ededf0;
+  --re-color-fill-light: #f1f1f4;
+  --re-color-fill-lighter: #f6f6f7;
+  --re-color-fill-extra-light: #f8f8f9;
+  --re-color-fill-theme: #f7f7fb;
+  --re-color-fill-blank: #ffffff;
+  --re-color-fill-transparent: transparent;
+  --re-color-primary-base: #937bff;
+  --re-color-primary-hover: #7d69d9;
+  --re-color-primary-shade-9: #9e88ff;
+  --re-color-primary-shade-8: #a995ff;
+  --re-color-primary-shade-7: #b3a3ff;
+  --re-color-primary-shade-6: #beb0ff;
+  --re-color-primary-shade-5: #c9bdff;
+  --re-color-primary-shade-4: #d4caff;
+  --re-color-primary-shade-3: #dfd7ff;
+  --re-color-primary-shade-2: #e9e5ff;
+  --re-color-primary-shade-1: #f4f2ff;
+  --re-color-success-base: #06b56d;
+  --re-color-success-hover: #059a5d;
+  --re-color-success-shade-9: #1fbc7c;
+  --re-color-success-shade-8: #38c48a;
+  --re-color-success-shade-7: #51cb99;
+  --re-color-success-shade-6: #6ad3a7;
+  --re-color-success-shade-5: #83dab6;
+  --re-color-success-shade-4: #9be1c5;
+  --re-color-success-shade-3: #b4e9d3;
+  --re-color-success-shade-2: #cdf0e2;
+  --re-color-success-shade-1: #e6f8f0;
+  --re-color-danger-base: #ee6979;
+  --re-color-danger-hover: #ca5967;
+  --re-color-danger-shade-9: #f07886;
+  --re-color-danger-shade-8: #f18794;
+  --re-color-danger-shade-7: #f396a1;
+  --re-color-danger-shade-6: #f5a5af;
+  --re-color-danger-shade-5: #f7b4bc;
+  --re-color-danger-shade-4: #f8c3c9;
+  --re-color-danger-shade-3: #fad2d7;
+  --re-color-danger-shade-2: #fce1e4;
+  --re-color-danger-shade-1: #fdf0f2;
+  --re-color-warning-base: #cd9a0a;
+  --re-color-warning-hover: #ae8309;
+  --re-color-warning-shade-9: #d2a422;
+  --re-color-warning-shade-8: #d7ae3b;
+  --re-color-warning-shade-7: #dcb853;
+  --re-color-warning-shade-6: #e1c26c;
+  --re-color-warning-shade-5: #e6cd85;
+  --re-color-warning-shade-4: #ebd79d;
+  --re-color-warning-shade-3: #f0e1b6;
+  --re-color-warning-shade-2: #f5ebce;
+  --re-color-warning-shade-1: #faf5e7;
+  --re-color-info-base: #8e8e91;
+  --re-color-info-hover: #79797b;
+  --re-color-info-shade-9: #99999c;
+  --re-color-info-shade-8: #a5a5a7;
+  --re-color-info-shade-7: #b0b0b2;
+  --re-color-info-shade-6: #bbbbbd;
+  --re-color-info-shade-5: #c7c7c8;
+  --re-color-info-shade-4: #d2d2d3;
+  --re-color-info-shade-3: #ddddde;
+  --re-color-info-shade-2: #e8e8e9;
+  --re-color-info-shade-1: #f4f4f4;
+}

package/theme-chalk/src/base.scss

@@ -0,0 +1,30 @@
+@forward './root-vars.scss';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  font-weight: normal;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-smoothing: antialiased;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Microsoft YaHei,
+    微软雅黑,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+}

package/theme-chalk/src/button.scss

@@ -0,0 +1,104 @@
+@use 'mixins/index' as *;
+@use 'mixins/_button' as *;
+@use 'function/index' as *;
+@use 'css-vars/_button' as *;
+@use 'sass:map';
+
+@include buildCls('button') {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  -webkit-user-select: none;
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  padding: map.get($button-padding, '');
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: getCssVar('button', 'bgcolor');
+  color: getCssVar('button', 'color');
+  border-color: getCssVar('button', 'border-color');
+
+  &__content {
+    display: inline-flex;
+    align-items: center;
+  }
+  &__loading {
+    @keyframes rotating {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    animation: rotating 2s linear infinite;
+    & + * {
+      margin-left: 4px;
+    }
+  }
+  &__icon {
+    margin-right: 4px;
+    width: 1em;
+    height: 1em;
+  }
+
+  @include is('link') {
+    padding: 2px;
+    height: auto;
+    border-color: getCssVar('color', 'fill', 'transparent');
+    background-color: getCssVar('color', 'fill', 'transparent');
+    text-decoration: underline;
+  }
+
+  @include is('plain') {
+    @include hover {
+      border-color: getCssVar('color', 'primary', 'base');
+      background-color: getCssVar('color', 'fill', 'blank');
+    }
+  }
+
+  @include is('round') {
+    border-radius: getNamespace('round');
+  }
+
+  @include is('circle') {
+    width: 32px;
+    border-radius: 50%;
+    padding: 8px;
+  }
+
+  &:active:not(.is-disabled) {
+    transform: scale(0.97);
+    transition: transform 0s ease;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  & + & {
+    margin-left: 10px;
+  }
+
+  @each $type in $button-types {
+    @include button-modifier-style($button, $type);
+  }
+
+  @each $size in map.keys($button-padding) {
+    &--#{$size} {
+      padding: map.get($button-padding, $size);
+    }
+  }
+}