rappel-ui 1.0.0 → 1.0.2

package/theme-chalk/index.css

@@ -50,85 +50,85 @@
         ),
  */
 :root {
-  --pu-color-primary: #937bff;
-  --pu-color-text-darkest: #000000;
-  --pu-color-text-base: #303131;
-  --pu-color-text-secondary: #606062;
-  --pu-color-text-neutral: #909093;
-  --pu-color-text-placeholder: #b2b2b6;
-  --pu-color-text-disabled: #cdcdd1;
-  --pu-color-text-lightest: #ffffff;
-  --pu-color-border-darker: #c3c3cb;
-  --pu-color-border-dark: #d0d0d8;
-  --pu-color-border-base: #dbdbe0;
-  --pu-color-border-light: #e4e4e8;
-  --pu-color-border-lighter: #ededef;
-  --pu-color-border-extra-light: #efeff3;
-  --pu-color-border-theme: #d4caff;
-  --pu-color-fill-darker: #d7d7dc;
-  --pu-color-fill-dark: #e8e8ec;
-  --pu-color-fill-base: #ededf0;
-  --pu-color-fill-light: #f1f1f4;
-  --pu-color-fill-lighter: #f6f6f7;
-  --pu-color-fill-extra-light: #f8f8f9;
-  --pu-color-fill-theme: #f7f7fb;
-  --pu-color-fill-blank: #ffffff;
-  --pu-color-fill-transparent: transparent;
-  --pu-color-primary-base: #937bff;
-  --pu-color-primary-hover: #7d69d9;
-  --pu-color-primary-shade-9: #9e88ff;
-  --pu-color-primary-shade-8: #a995ff;
-  --pu-color-primary-shade-7: #b3a3ff;
-  --pu-color-primary-shade-6: #beb0ff;
-  --pu-color-primary-shade-5: #c9bdff;
-  --pu-color-primary-shade-4: #d4caff;
-  --pu-color-primary-shade-3: #dfd7ff;
-  --pu-color-primary-shade-2: #e9e5ff;
-  --pu-color-primary-shade-1: #f4f2ff;
-  --pu-color-success-base: #06b56d;
-  --pu-color-success-hover: #059a5d;
-  --pu-color-success-shade-9: #1fbc7c;
-  --pu-color-success-shade-8: #38c48a;
-  --pu-color-success-shade-7: #51cb99;
-  --pu-color-success-shade-6: #6ad3a7;
-  --pu-color-success-shade-5: #83dab6;
-  --pu-color-success-shade-4: #9be1c5;
-  --pu-color-success-shade-3: #b4e9d3;
-  --pu-color-success-shade-2: #cdf0e2;
-  --pu-color-success-shade-1: #e6f8f0;
-  --pu-color-danger-base: #ee6979;
-  --pu-color-danger-hover: #ca5967;
-  --pu-color-danger-shade-9: #f07886;
-  --pu-color-danger-shade-8: #f18794;
-  --pu-color-danger-shade-7: #f396a1;
-  --pu-color-danger-shade-6: #f5a5af;
-  --pu-color-danger-shade-5: #f7b4bc;
-  --pu-color-danger-shade-4: #f8c3c9;
-  --pu-color-danger-shade-3: #fad2d7;
-  --pu-color-danger-shade-2: #fce1e4;
-  --pu-color-danger-shade-1: #fdf0f2;
-  --pu-color-warning-base: #cd9a0a;
-  --pu-color-warning-hover: #ae8309;
-  --pu-color-warning-shade-9: #d2a422;
-  --pu-color-warning-shade-8: #d7ae3b;
-  --pu-color-warning-shade-7: #dcb853;
-  --pu-color-warning-shade-6: #e1c26c;
-  --pu-color-warning-shade-5: #e6cd85;
-  --pu-color-warning-shade-4: #ebd79d;
-  --pu-color-warning-shade-3: #f0e1b6;
-  --pu-color-warning-shade-2: #f5ebce;
-  --pu-color-warning-shade-1: #faf5e7;
-  --pu-color-info-base: #8e8e91;
-  --pu-color-info-hover: #79797b;
-  --pu-color-info-shade-9: #99999c;
-  --pu-color-info-shade-8: #a5a5a7;
-  --pu-color-info-shade-7: #b0b0b2;
-  --pu-color-info-shade-6: #bbbbbd;
-  --pu-color-info-shade-5: #c7c7c8;
-  --pu-color-info-shade-4: #d2d2d3;
-  --pu-color-info-shade-3: #ddddde;
-  --pu-color-info-shade-2: #e8e8e9;
-  --pu-color-info-shade-1: #f4f4f4;
+  --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;
 }
 
 *,
@@ -147,7 +147,7 @@ body {
   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";
 }
 
-.pu-button {
+.re-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -169,11 +169,11 @@ body {
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
-  background-color: var(--pu-button-bgcolor);
-  color: var(--pu-button-color);
-  border-color: var(--pu-button-border-color);
+  background-color: var(--re-button-bgcolor);
+  color: var(--re-button-color);
+  border-color: var(--re-button-border-color);
 }
-.pu-button__content {
+.re-button__content {
   display: inline-flex;
   align-items: center;
 }
@@ -185,76 +185,76 @@ body {
     transform: rotate(360deg);
   }
 }
-.pu-button__loading {
+.re-button__loading {
   animation: rotating 2s linear infinite;
 }
-.pu-button__loading + * {
+.re-button__loading + * {
   margin-left: 4px;
 }
-.pu-button__icon {
+.re-button__icon {
   margin-right: 4px;
   width: 1em;
   height: 1em;
 }
-.pu-button.is-link {
+.re-button.is-link {
   padding: 2px;
   height: auto;
-  border-color: var(--pu-color-fill-transparent);
-  background-color: var(--pu-color-fill-transparent);
+  border-color: var(--re-color-fill-transparent);
+  background-color: var(--re-color-fill-transparent);
   text-decoration: underline;
 }
-.pu-button.is-plain:hover:not(.is-disabled) {
-  border-color: var(--pu-color-primary-base);
-  background-color: var(--pu-color-fill-blank);
+.re-button.is-plain:hover:not(.is-disabled) {
+  border-color: var(--re-color-primary-base);
+  background-color: var(--re-color-fill-blank);
 }
-.pu-button.is-round {
+.re-button.is-round {
   border-radius: 20px;
 }
-.pu-button.is-circle {
+.re-button.is-circle {
   width: 32px;
   border-radius: 50%;
   padding: 8px;
 }
-.pu-button:active:not(.is-disabled) {
+.re-button:active:not(.is-disabled) {
   transform: scale(0.97);
   transition: transform 0s ease;
 }
-.pu-button:focus-visible {
+.re-button:focus-visible {
   outline: none;
 }
-.pu-button + .pu-button {
+.re-button + .re-button {
   margin-left: 10px;
 }
-.pu-button {
-  --pu-button-bgcolor: var(--pu-color-fill-blank);
-  --pu-button-color: var(--pu-color-text-secondary);
-  --pu-button-border-color: var(--pu-color-border-base);
+.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);
 }
-.pu-button:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-primary-shade-1);
-  --pu-button-color: var(--pu-color-primary-base);
-  --pu-button-border-color: var(--pu-color-primary-shade-4);
+.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);
 }
-.pu-button.is-disabled {
+.re-button.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-border-base);
-  color: var(--pu-color-text-disabled);
+  background-color: var(--re-color-fill-blank);
+  border-color: var(--re-color-border-base);
+  color: var(--re-color-text-disabled);
 }
-.pu-button.is-link {
-  --pu-button-color: var(--pu-color-text-secondary);
+.re-button.is-link {
+  --re-button-color: var(--re-color-text-secondary);
 }
-.pu-button.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-primary-base);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
+.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;
 }
-.pu-button.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-text-disabled);
+.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);
 }
-.pu-button.is-loading:before {
+.re-button.is-loading:before {
   z-index: 1;
   content: "";
   position: absolute;
@@ -266,51 +266,51 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--primary {
-  --pu-button-bgcolor: var(--pu-color-primary-base);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-primary-base);
+.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);
 }
-.pu-button--primary:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-primary-hover);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-primary-hover);
+.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);
 }
-.pu-button--primary.is-disabled {
+.re-button--primary.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-primary-shade-4);
-  border-color: var(--pu-color-primary-shade-4);
-  color: var(--pu-color-fill-blank);
-}
-.pu-button--primary.is-link {
-  --pu-button-color: var(--pu-color-primary-base);
-}
-.pu-button--primary.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-primary-hover);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
-}
-.pu-button--primary.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-primary-shade-4);
-}
-.pu-button--primary.is-plain {
-  background-color: var(--pu-color-primary-shade-1);
-  color: var(--pu-color-primary-base);
-  border-color: var(--pu-color-primary-shade-6);
-}
-.pu-button--primary.is-plain:hover:not(.is-disabled) {
-  color: var(--pu-color-fill-blank);
-  background-color: var(--pu-color-primary-base);
-  border-color: var(--pu-color-primary-base);
-}
-.pu-button--primary.is-plain.is-disabled {
-  background-color: var(--pu-color-primary-shade-1);
-  color: var(--pu-color-primary-shade-4);
-  border-color: var(--pu-color-primary-shade-4);
-}
-.pu-button--primary.is-loading:before {
+  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;
@@ -322,51 +322,51 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--success {
-  --pu-button-bgcolor: var(--pu-color-success-base);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-success-base);
+.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);
 }
-.pu-button--success:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-success-hover);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-success-hover);
+.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);
 }
-.pu-button--success.is-disabled {
+.re-button--success.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-success-shade-4);
-  border-color: var(--pu-color-success-shade-4);
-  color: var(--pu-color-fill-blank);
-}
-.pu-button--success.is-link {
-  --pu-button-color: var(--pu-color-success-base);
-}
-.pu-button--success.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-success-hover);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
-}
-.pu-button--success.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-success-shade-4);
-}
-.pu-button--success.is-plain {
-  background-color: var(--pu-color-success-shade-1);
-  color: var(--pu-color-success-base);
-  border-color: var(--pu-color-success-shade-6);
-}
-.pu-button--success.is-plain:hover:not(.is-disabled) {
-  color: var(--pu-color-fill-blank);
-  background-color: var(--pu-color-success-base);
-  border-color: var(--pu-color-success-base);
-}
-.pu-button--success.is-plain.is-disabled {
-  background-color: var(--pu-color-success-shade-1);
-  color: var(--pu-color-success-shade-4);
-  border-color: var(--pu-color-success-shade-4);
-}
-.pu-button--success.is-loading:before {
+  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;
@@ -378,51 +378,51 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--danger {
-  --pu-button-bgcolor: var(--pu-color-danger-base);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-danger-base);
+.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);
 }
-.pu-button--danger:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-danger-hover);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-danger-hover);
+.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);
 }
-.pu-button--danger.is-disabled {
+.re-button--danger.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-danger-shade-4);
-  border-color: var(--pu-color-danger-shade-4);
-  color: var(--pu-color-fill-blank);
-}
-.pu-button--danger.is-link {
-  --pu-button-color: var(--pu-color-danger-base);
-}
-.pu-button--danger.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-danger-hover);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
-}
-.pu-button--danger.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-danger-shade-4);
-}
-.pu-button--danger.is-plain {
-  background-color: var(--pu-color-danger-shade-1);
-  color: var(--pu-color-danger-base);
-  border-color: var(--pu-color-danger-shade-6);
-}
-.pu-button--danger.is-plain:hover:not(.is-disabled) {
-  color: var(--pu-color-fill-blank);
-  background-color: var(--pu-color-danger-base);
-  border-color: var(--pu-color-danger-base);
-}
-.pu-button--danger.is-plain.is-disabled {
-  background-color: var(--pu-color-danger-shade-1);
-  color: var(--pu-color-danger-shade-4);
-  border-color: var(--pu-color-danger-shade-4);
-}
-.pu-button--danger.is-loading:before {
+  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;
@@ -434,51 +434,51 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--warning {
-  --pu-button-bgcolor: var(--pu-color-warning-base);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-warning-base);
+.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);
 }
-.pu-button--warning:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-warning-hover);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-warning-hover);
+.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);
 }
-.pu-button--warning.is-disabled {
+.re-button--warning.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-warning-shade-4);
-  border-color: var(--pu-color-warning-shade-4);
-  color: var(--pu-color-fill-blank);
-}
-.pu-button--warning.is-link {
-  --pu-button-color: var(--pu-color-warning-base);
-}
-.pu-button--warning.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-warning-hover);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
-}
-.pu-button--warning.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-warning-shade-4);
-}
-.pu-button--warning.is-plain {
-  background-color: var(--pu-color-warning-shade-1);
-  color: var(--pu-color-warning-base);
-  border-color: var(--pu-color-warning-shade-6);
-}
-.pu-button--warning.is-plain:hover:not(.is-disabled) {
-  color: var(--pu-color-fill-blank);
-  background-color: var(--pu-color-warning-base);
-  border-color: var(--pu-color-warning-base);
-}
-.pu-button--warning.is-plain.is-disabled {
-  background-color: var(--pu-color-warning-shade-1);
-  color: var(--pu-color-warning-shade-4);
-  border-color: var(--pu-color-warning-shade-4);
-}
-.pu-button--warning.is-loading:before {
+  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;
@@ -490,51 +490,51 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--info {
-  --pu-button-bgcolor: var(--pu-color-info-base);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-info-base);
+.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);
 }
-.pu-button--info:hover:not(.is-disabled) {
-  --pu-button-bgcolor: var(--pu-color-info-hover);
-  --pu-button-color: var(--pu-color-text-lightest);
-  --pu-button-border-color: var(--pu-color-info-hover);
+.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);
 }
-.pu-button--info.is-disabled {
+.re-button--info.is-disabled {
   cursor: not-allowed;
-  background-color: var(--pu-color-info-shade-4);
-  border-color: var(--pu-color-info-shade-4);
-  color: var(--pu-color-fill-blank);
-}
-.pu-button--info.is-link {
-  --pu-button-color: var(--pu-color-info-base);
-}
-.pu-button--info.is-link:hover:not(.is-disabled) {
-  --pu-button-color: var(--pu-color-info-hover);
-  --pu-button-bgcolor: transparent;
-  --pu-button-border-color: transparent;
-}
-.pu-button--info.is-link.is-disabled {
-  background-color: var(--pu-color-fill-blank);
-  border-color: var(--pu-color-fill-blank);
-  color: var(--pu-color-info-shade-4);
-}
-.pu-button--info.is-plain {
-  background-color: var(--pu-color-info-shade-1);
-  color: var(--pu-color-info-base);
-  border-color: var(--pu-color-info-shade-6);
-}
-.pu-button--info.is-plain:hover:not(.is-disabled) {
-  color: var(--pu-color-fill-blank);
-  background-color: var(--pu-color-info-base);
-  border-color: var(--pu-color-info-base);
-}
-.pu-button--info.is-plain.is-disabled {
-  background-color: var(--pu-color-info-shade-1);
-  color: var(--pu-color-info-shade-4);
-  border-color: var(--pu-color-info-shade-4);
-}
-.pu-button--info.is-loading:before {
+  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;
@@ -546,15 +546,15 @@ body {
   border-radius: inherit;
   background-color: rgba(255, 255, 255, 0.5);
 }
-.pu-button--large {
+.re-button--large {
   padding: 12px 20px;
 }
-.pu-button-- {
+.re-button-- {
   padding: 8px 16px;
 }
-.pu-button--small {
+.re-button--small {
   padding: 6px 12px;
 }
-.pu-button--mini {
+.re-button--mini {
   padding: 4px 8px;
 }