rappel-ui 1.0.8 → 1.0.11

package/theme-chalk/re-button.css

@@ -1,47 +1,31 @@
-@charset "UTF-8";
 /**
- * 将十六进制颜色转换为RGB颜色
- * @param $hex 十六进制颜色值
- * @returns RGB颜色值
- * color.channel($color, "red", $space: rgb)
+ * craete same white opacity color
  */
 /**
- * 将RGB颜色转换为十六进制颜色
- * @param $value RGB颜色值
- * @returns 十六进制颜色值
+ * create a darken color
  */
 /**
- * 将RGB颜色转换为十六进制颜色
- * @param $color RGB颜色值
- * @returns 十六进制颜色值
+ * create shape color
  */
 /**
- * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
- * @param $color 颜色
- * @param $opacity 透明度，默认值为1
- * @returns 一个等效的透明度颜色
+ * create dark shape color
  */
 /**
- * 创建一个变暗的颜色，并返回一个变暗的颜色
- * @param $color 颜色
- * @param $factor 颜色变暗的度量，默认为0.15
- * @returns 一个变暗的颜色
- */
+ &.re-tooltip-popover, &.re-tooltip-arrow
+*/
 /**
- * 创建层级颜色
- * @param $base-color 基础颜色
- * @param $darkness 变暗的度量，默认为0.15
- * @returns 主题色映射
+  &.re-tooltip-overlay
  */
 .re-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-size: var(--re-base-font-size);
   text-align: center;
   cursor: pointer;
   white-space: nowrap;
   box-sizing: border-box;
-  transition: all 0.3s ease;
+  transition: width 0.05s ease, height 0.05s ease, background-color 0.03s ease, transform 0.03s ease;
   -webkit-user-select: none;
   user-select: none;
   outline: none;
@@ -78,20 +62,39 @@
   margin-left: 4px;
 }
 .re-button__icon {
-  margin-right: 4px;
   width: 1em;
   height: 1em;
 }
+.re-button__icon + span {
+  margin-left: 4px;
+}
+.re-button.is-dashed {
+  border-style: dashed;
+}
+.re-button.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-fill-blank);
+}
+.re-button.is-link, .re-button.is-text {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
 .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-text {
+  padding: 0;
+  height: auto;
+}
+.re-button.is-text.is-text-padding, .re-button.is-text.is-text-bg {
+  padding: 8px 16px;
+  height: 32px;
+  border: 0 solid transparent;
+}
 .re-button.is-plain:hover:not(.is-disabled) {
-  border-color: var(--re-color-primary-base);
-  background-color: var(--re-color-fill-blank);
+  --re-button-border-color: var(--re-color-primary-base);
+  --re-button-bgcolor: var(--re-color-fill-blank);
 }
 .re-button.is-round {
   border-radius: 20px;
@@ -101,19 +104,12 @@
   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-color: var(--re-color-text-base);
   --re-button-border-color: var(--re-color-border-base);
 }
 .re-button:hover:not(.is-disabled) {
@@ -121,24 +117,18 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-primary-shade-2);
   --re-button-color: var(--re-color-primary-base);
-  --re-button-bgcolor: transparent;
-  --re-button-border-color: transparent;
+  --re-button-border-color: var(--re-color-primary-shade-5);
 }
-.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:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-border-darker);
 }
 .re-button.is-loading:before {
   z-index: 1;
@@ -150,7 +140,58 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-fill-blank);
+  --re-button-border-color: var(--re-color-border-base);
+  --re-button-color: var(--re-color-text-lighter);
+}
+.re-button.is-link, .re-button.is-text {
+  --re-button-color: var(--re-color-text-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button.is-link:hover:not(.is-disabled), .re-button.is-text: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:active:not(.is-disabled), .re-button.is-text:active: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, .re-button.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-text-lighter);
+}
+.re-button.is-text.is-text-padding, .re-button.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button.is-text.is-text-padding:hover:not(.is-disabled), .re-button.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button.is-text.is-text-padding:active:not(.is-disabled), .re-button.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--primary {
   --re-button-bgcolor: var(--re-color-primary-base);
@@ -162,39 +203,49 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-active);
 }
-.re-button--primary.is-link {
-  --re-button-color: var(--re-color-primary-base);
+.re-button--primary:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-primary-shade-4);
 }
-.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-plain, .re-button--primary.is-dashed {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-border-color: var(--re-color-primary-shade-6);
+  --re-button-color: var(--re-color-primary-base);
 }
-.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:hover:not(.is-disabled), .re-button--primary.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-primary-base);
 }
-.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.is-disabled, .re-button--primary.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+  --re-button-color: var(--re-color-primary-shade-4);
 }
 .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-bgcolor: var(--re-color-primary-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--primary.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-primary-active);
 }
-.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-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-1);
+  --re-button-color: var(--re-color-primary-base);
+}
+.re-button--primary.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-primary-shade-2);
+  --re-button-border-color: var(--re-color-primary-active);
+  --re-button-color: var(--re-color-primary-active);
 }
 .re-button--primary.is-loading:before {
   z-index: 1;
@@ -206,7 +257,58 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--primary.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-primary-shade-4);
+  --re-button-border-color: var(--re-color-primary-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--primary.is-link, .re-button--primary.is-text {
+  --re-button-color: var(--re-color-primary-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link:hover:not(.is-disabled), .re-button--primary.is-text: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:active:not(.is-disabled), .re-button--primary.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-primary-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-link.is-disabled, .re-button--primary.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-primary-shade-4);
+}
+.re-button--primary.is-text.is-text-padding, .re-button--primary.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--primary.is-text.is-text-padding:hover:not(.is-disabled), .re-button--primary.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--primary.is-text.is-text-padding:active:not(.is-disabled), .re-button--primary.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--primary.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--primary.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--primary.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--primary.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--success {
   --re-button-bgcolor: var(--re-color-success-base);
@@ -218,39 +320,49 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-success-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-active);
 }
-.re-button--success.is-link {
-  --re-button-color: var(--re-color-success-base);
+.re-button--success:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-success-shade-4);
 }
-.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-plain, .re-button--success.is-dashed {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-border-color: var(--re-color-success-shade-6);
+  --re-button-color: var(--re-color-success-base);
 }
-.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:hover:not(.is-disabled), .re-button--success.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-success-base);
 }
-.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.is-disabled, .re-button--success.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-border-color: var(--re-color-success-shade-4);
+  --re-button-color: var(--re-color-success-shade-4);
 }
 .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-bgcolor: var(--re-color-success-base);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--success.is-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-success-active);
+}
+.re-button--success.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-shade-1);
+  --re-button-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-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-success-shade-2);
+  --re-button-border-color: var(--re-color-success-active);
+  --re-button-color: var(--re-color-success-active);
 }
 .re-button--success.is-loading:before {
   z-index: 1;
@@ -262,7 +374,58 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--success.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-success-shade-4);
+  --re-button-border-color: var(--re-color-success-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--success.is-link, .re-button--success.is-text {
+  --re-button-color: var(--re-color-success-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link:hover:not(.is-disabled), .re-button--success.is-text: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:active:not(.is-disabled), .re-button--success.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-success-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-link.is-disabled, .re-button--success.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-success-shade-4);
+}
+.re-button--success.is-text.is-text-padding, .re-button--success.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--success.is-text.is-text-padding:hover:not(.is-disabled), .re-button--success.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--success.is-text.is-text-padding:active:not(.is-disabled), .re-button--success.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--success.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--success.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--success.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--success.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--danger {
   --re-button-bgcolor: var(--re-color-danger-base);
@@ -274,39 +437,49 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-active);
 }
-.re-button--danger.is-link {
-  --re-button-color: var(--re-color-danger-base);
+.re-button--danger:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-danger-shade-4);
 }
-.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-plain, .re-button--danger.is-dashed {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-border-color: var(--re-color-danger-shade-6);
+  --re-button-color: var(--re-color-danger-base);
 }
-.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:hover:not(.is-disabled), .re-button--danger.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-danger-base);
 }
-.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.is-disabled, .re-button--danger.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-border-color: var(--re-color-danger-shade-4);
+  --re-button-color: var(--re-color-danger-shade-4);
 }
 .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-bgcolor: var(--re-color-danger-base);
+  --re-button-color: var(--re-color-fill-blank);
 }
-.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-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-danger-active);
+}
+.re-button--danger.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-shade-1);
+  --re-button-color: var(--re-color-danger-base);
+}
+.re-button--danger.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-danger-shade-2);
+  --re-button-border-color: var(--re-color-danger-active);
+  --re-button-color: var(--re-color-danger-active);
 }
 .re-button--danger.is-loading:before {
   z-index: 1;
@@ -318,7 +491,58 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--danger.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-danger-shade-4);
+  --re-button-border-color: var(--re-color-danger-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--danger.is-link, .re-button--danger.is-text {
+  --re-button-color: var(--re-color-danger-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link:hover:not(.is-disabled), .re-button--danger.is-text: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:active:not(.is-disabled), .re-button--danger.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-danger-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-link.is-disabled, .re-button--danger.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-danger-shade-4);
+}
+.re-button--danger.is-text.is-text-padding, .re-button--danger.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--danger.is-text.is-text-padding:hover:not(.is-disabled), .re-button--danger.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--danger.is-text.is-text-padding:active:not(.is-disabled), .re-button--danger.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--danger.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--danger.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--danger.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--danger.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--warning {
   --re-button-bgcolor: var(--re-color-warning-base);
@@ -330,39 +554,49 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-active);
 }
-.re-button--warning.is-link {
-  --re-button-color: var(--re-color-warning-base);
+.re-button--warning:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-warning-shade-4);
 }
-.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-plain, .re-button--warning.is-dashed {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-border-color: var(--re-color-warning-shade-6);
+  --re-button-color: var(--re-color-warning-base);
 }
-.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:hover:not(.is-disabled), .re-button--warning.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-warning-base);
 }
-.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.is-disabled, .re-button--warning.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-border-color: var(--re-color-warning-shade-4);
+  --re-button-color: var(--re-color-warning-shade-4);
 }
 .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-bgcolor: var(--re-color-warning-base);
+  --re-button-color: var(--re-color-fill-blank);
 }
-.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-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-warning-active);
+}
+.re-button--warning.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-shade-1);
+  --re-button-color: var(--re-color-warning-base);
+}
+.re-button--warning.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-warning-shade-2);
+  --re-button-border-color: var(--re-color-warning-active);
+  --re-button-color: var(--re-color-warning-active);
 }
 .re-button--warning.is-loading:before {
   z-index: 1;
@@ -374,7 +608,58 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--warning.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-warning-shade-4);
+  --re-button-border-color: var(--re-color-warning-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--warning.is-link, .re-button--warning.is-text {
+  --re-button-color: var(--re-color-warning-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link:hover:not(.is-disabled), .re-button--warning.is-text: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:active:not(.is-disabled), .re-button--warning.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-warning-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-link.is-disabled, .re-button--warning.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-warning-shade-4);
+}
+.re-button--warning.is-text.is-text-padding, .re-button--warning.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--warning.is-text.is-text-padding:hover:not(.is-disabled), .re-button--warning.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--warning.is-text.is-text-padding:active:not(.is-disabled), .re-button--warning.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--warning.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--warning.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--warning.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--warning.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--info {
   --re-button-bgcolor: var(--re-color-info-base);
@@ -386,39 +671,49 @@
   --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:active:not(.is-disabled) {
+  transform: scale(0.98);
+  transition: transform 0s ease;
+  --re-button-bgcolor: var(--re-color-info-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-active);
 }
-.re-button--info.is-link {
-  --re-button-color: var(--re-color-info-base);
+.re-button--info:focus-visible:not(.is-disabled) {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 2px;
+  outline-color: var(--re-color-info-shade-4);
 }
-.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-plain, .re-button--info.is-dashed {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-border-color: var(--re-color-info-shade-6);
+  --re-button-color: var(--re-color-info-base);
 }
-.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:hover:not(.is-disabled), .re-button--info.is-dashed:hover:not(.is-disabled) {
+  --re-button-border-color: var(--re-color-info-base);
 }
-.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.is-disabled, .re-button--info.is-dashed.is-disabled {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-border-color: var(--re-color-info-shade-4);
+  --re-button-color: var(--re-color-info-shade-4);
 }
 .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-bgcolor: var(--re-color-info-base);
+  --re-button-color: var(--re-color-fill-blank);
 }
-.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-plain:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-active);
+  --re-button-color: var(--re-color-text-lightest);
+  --re-button-border-color: var(--re-color-info-active);
+}
+.re-button--info.is-dashed:hover:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-shade-1);
+  --re-button-color: var(--re-color-info-base);
+}
+.re-button--info.is-dashed:active:not(.is-disabled) {
+  --re-button-bgcolor: var(--re-color-info-shade-2);
+  --re-button-border-color: var(--re-color-info-active);
+  --re-button-color: var(--re-color-info-active);
 }
 .re-button--info.is-loading:before {
   z-index: 1;
@@ -430,17 +725,86 @@
   bottom: -1px;
   pointer-events: none;
   border-radius: inherit;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.re-button--info.is-disabled {
+  cursor: not-allowed;
+  --re-button-bgcolor: var(--re-color-info-shade-4);
+  --re-button-border-color: var(--re-color-info-shade-4);
+  --re-button-color: var(--re-color-fill-blank);
+}
+.re-button--info.is-link, .re-button--info.is-text {
+  --re-button-color: var(--re-color-info-base);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link:hover:not(.is-disabled), .re-button--info.is-text: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:active:not(.is-disabled), .re-button--info.is-text:active:not(.is-disabled) {
+  --re-button-color: var(--re-color-info-active);
+  --re-button-bgcolor: transparent;
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-link.is-disabled, .re-button--info.is-text.is-disabled {
+  --re-button-border-color: var(--re-color-fill-transparent);
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+  --re-button-color: var(--re-color-info-shade-4);
+}
+.re-button--info.is-text.is-text-padding, .re-button--info.is-text.is-text-bg {
+  --re-button-border-color: transparent;
+}
+.re-button--info.is-text.is-text-padding:hover:not(.is-disabled), .re-button--info.is-text.is-text-bg:hover:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-light);
+}
+.re-button--info.is-text.is-text-padding:active:not(.is-disabled), .re-button--info.is-text.is-text-bg:active:not(.is-disabled) {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-base);
+}
+.re-button--info.is-text.is-text-padding {
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--info.is-text.is-text-padding.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-transparent);
+}
+.re-button--info.is-text.is-text-bg {
+  --re-button-bgcolor: var(--re-color-fill-lighter);
+}
+.re-button--info.is-text.is-text-bg.is-disabled {
+  --re-button-border-color: transparent;
+  --re-button-bgcolor: var(--re-color-fill-lighter);
 }
 .re-button--large {
   padding: 12px 20px;
+  height: 40px;
+  font-size: 16px;
+  border-radius: 4px;
 }
-.re-button-- {
-  padding: 8px 16px;
+.re-button--large.is-circle {
+  width: 40px;
+  padding: 12px;
 }
 .re-button--small {
   padding: 6px 12px;
+  height: 28px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+.re-button--small.is-circle {
+  width: 28px;
+  padding: 6px;
 }
 .re-button--mini {
   padding: 4px 8px;
+  height: 24px;
+  font-size: 12px;
+  border-radius: 2px;
+}
+.re-button--mini.is-circle {
+  width: 24px;
+  padding: 4px;
 }