rappel-ui 1.0.0 → 1.0.1

package/theme-chalk/pu-button.css

@@ -1,446 +0,0 @@
-@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 主题色映射
- */
-.pu-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(--pu-button-bgcolor);
-  color: var(--pu-button-color);
-  border-color: var(--pu-button-border-color);
-}
-.pu-button__content {
-  display: inline-flex;
-  align-items: center;
-}
-@keyframes rotating {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.pu-button__loading {
-  animation: rotating 2s linear infinite;
-}
-.pu-button__loading + * {
-  margin-left: 4px;
-}
-.pu-button__icon {
-  margin-right: 4px;
-  width: 1em;
-  height: 1em;
-}
-.pu-button.is-link {
-  padding: 2px;
-  height: auto;
-  border-color: var(--pu-color-fill-transparent);
-  background-color: var(--pu-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);
-}
-.pu-button.is-round {
-  border-radius: 20px;
-}
-.pu-button.is-circle {
-  width: 32px;
-  border-radius: 50%;
-  padding: 8px;
-}
-.pu-button:active:not(.is-disabled) {
-  transform: scale(0.97);
-  transition: transform 0s ease;
-}
-.pu-button:focus-visible {
-  outline: none;
-}
-.pu-button + .pu-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);
-}
-.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);
-}
-.pu-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);
-}
-.pu-button.is-link {
-  --pu-button-color: var(--pu-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;
-}
-.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);
-}
-.pu-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);
-}
-.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);
-}
-.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);
-}
-.pu-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 {
-  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);
-}
-.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);
-}
-.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);
-}
-.pu-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 {
-  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);
-}
-.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);
-}
-.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);
-}
-.pu-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 {
-  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);
-}
-.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);
-}
-.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);
-}
-.pu-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 {
-  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);
-}
-.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);
-}
-.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);
-}
-.pu-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 {
-  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);
-}
-.pu-button--large {
-  padding: 12px 20px;
-}
-.pu-button-- {
-  padding: 8px 16px;
-}
-.pu-button--small {
-  padding: 6px 12px;
-}
-.pu-button--mini {
-  padding: 4px 8px;
-}

package/theme-chalk/root-vars.css

@@ -1,132 +0,0 @@
-@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 {
-  --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;
-}

package/theme-chalk/src/base.scss

@@ -1,30 +0,0 @@
-@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

@@ -1,104 +0,0 @@
-@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);
-    }
-  }
-}