@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/button/button.css

@@ -0,0 +1,309 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-button-split {
+  display: inline-block;
+}
+.semi-button-split .semi-button {
+  border-radius: 0;
+  margin-right: 1px;
+}
+.semi-button-split :first-child {
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-button-split :last-child {
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+  margin-right: unset;
+}
+.semi-button-split:hover .semi-button-borderless:active {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi-button {
+  box-shadow: none;
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  border: 0 transparent solid;
+  border-radius: var(--semi-border-radius-small);
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-weight: 600;
+  outline: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.semi-button-danger {
+  background-color: var(--semi-color-danger);
+  color: white;
+}
+.semi-button-danger:hover {
+  background-color: var(--semi-color-danger-hover);
+}
+.semi-button-danger:active {
+  background-color: var(--semi-color-danger-active);
+}
+.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
+  color: var(--semi-color-danger);
+}
+.semi-button-warning {
+  background-color: var(--semi-color-warning);
+  color: white;
+}
+.semi-button-warning:hover {
+  background-color: var(--semi-color-warning-hover);
+}
+.semi-button-warning:active {
+  background-color: var(--semi-color-warning-active);
+}
+.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
+  color: var(--semi-color-warning);
+}
+.semi-button-tertiary {
+  background-color: var(--semi-color-tertiary);
+  color: white;
+}
+.semi-button-tertiary:hover {
+  background-color: var(--semi-color-tertiary-hover);
+}
+.semi-button-tertiary:active {
+  background-color: var(--semi-color-tertiary-active);
+}
+.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
+  color: var(--semi-color-text-1);
+}
+.semi-button-primary {
+  background-color: var(--semi-color-primary);
+  color: white;
+}
+.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
+  background-color: var(--semi-color-primary-hover);
+}
+.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
+  background-color: var(--semi-color-primary-active);
+}
+.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
+  color: var(--semi-color-primary);
+}
+.semi-button-secondary {
+  background-color: var(--semi-color-secondary);
+  outline-color: var(--semi-color-secondary);
+  color: white;
+}
+.semi-button-secondary:hover {
+  background-color: var(--semi-color-secondary-hover);
+}
+.semi-button-secondary:active {
+  background-color: var(--semi-color-secondary-active);
+}
+.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
+  color: var(--semi-color-secondary);
+}
+.semi-button-disabled {
+  color: var(--semi-color-disabled-text);
+  background-color: var(--semi-color-disabled-bg);
+  cursor: not-allowed;
+}
+.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
+  color: var(--semi-color-disabled-text);
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
+  color: var(--semi-color-disabled-text);
+}
+.semi-button-borderless {
+  background-color: transparent;
+}
+.semi-button-borderless:not(.semi-button-disabled):hover {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-borderless:not(.semi-button-disabled):active {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-button-light {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-light:not(.semi-button-disabled):hover {
+  background-color: var(--semi-color-fill-1);
+}
+.semi-button-light:not(.semi-button-disabled):active {
+  background-color: var(--semi-color-fill-2);
+}
+.semi-button-size-small {
+  height: 24px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-button-size-large {
+  height: 40px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-button-block {
+  width: 100%;
+}
+.semi-button-group > .semi-button {
+  margin: 0;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: 0;
+}
+.semi-button-group > .semi-button .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-button-group > .semi-button-size-large .semi-button-content {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-button-group > .semi-button-size-small .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-button-group > .semi-button.semi-button-with-icon-only {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-button-group > .semi-button:first-child {
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
+  border-right: 1px var(--semi-color-border) solid;
+}
+.semi-button-group > .semi-button:last-child {
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+}
+
+.semi-rtl .semi-button,
+.semi-portal-rtl .semi-button {
+  direction: rtl;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-size-small,
+.semi-portal-rtl .semi-button-size-small {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-size-large,
+.semi-portal-rtl .semi-button-size-large {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-rtl .semi-button-group,
+.semi-portal-rtl .semi-button-group {
+  direction: rtl;
+}
+.semi-rtl .semi-button-group > .semi-button,
+.semi-portal-rtl .semi-button-group > .semi-button {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
+  padding-left: 0;
+  padding-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-group > .semi-button:first-child,
+.semi-portal-rtl .semi-button-group > .semi-button:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+}
+.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
+.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
+  border-left: 1px var(--semi-color-border) solid;
+  border-right: 0;
+}
+.semi-rtl .semi-button-group > .semi-button:last-child,
+.semi-portal-rtl .semi-button-group > .semi-button:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-rtl .semi-button.semi-button-with-icon-only,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
+.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.semi-rtl .semi-button-content-left,
+.semi-portal-rtl .semi-button-content-left {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.semi-rtl .semi-button-content-right,
+.semi-portal-rtl .semi-button-content-right {
+  margin-right: 8px;
+  margin-left: 0;
+}

package/lib/cjs/button/button.scss

@@ -0,0 +1,219 @@
+@import './variables.scss';
+@import './splitButtonGroup.scss';
+
+$module: #{$prefix}-button;
+
+.#{$module} {
+    @include shadow-0;
+    @include font-size-regular;
+    height: $height-button_default;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    cursor: pointer;
+    user-select: none;
+    border: $width-button-border $color-button_primary-border-default solid;
+    border-radius: $radius-button;
+    padding-left: $spacing-button_default-paddingLeft;
+    padding-right: $spacing-button_default-paddingRight;
+    padding-top: $spacing-button_default-paddingTop;
+    padding-bottom: $spacing-button_default-paddingTop;
+    font-weight: $font-button-fontWeight;
+    outline: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    &-danger {
+        background-color: $color-button_danger-bg-default;
+        color: $color-button_danger-text-default;
+        &:hover {
+            background-color: $color-button_danger-bg-hover;
+        }
+        &:active {
+            background-color: $color-button_danger-bg-active;
+        }
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_danger-bg-default;
+        }
+    }
+    &-warning {
+        background-color: $color-button_warning-bg-default;
+        color: $color-button_warning-text-default;
+        &:hover {
+            background-color: $color-button_warning-bg-hover;
+        }
+        &:active {
+            background-color: $color-button_warning-bg-active;
+        }
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_warning-bg-default;
+        }
+    }
+    &-tertiary {
+        background-color: $color-button_tertiary-bg-default;
+        color: $color-button_tertiary-text-default;
+        &:hover {
+            background-color: $color-button_tertiary-bg-hover;
+        }
+        &:active {
+            background-color: $color-button_tertiary-bg-active;
+        }
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_tertiary_solid-text-default;
+        }
+    }
+    &-primary {
+        background-color: $color-button_primary-bg-default;
+        color: $color-button_primary-text-default;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
+            background-color: $color-button_primary-bg-hover;
+        }
+        &:not(.#{$module}-borderless):not(.#{$module}-light):active {
+            background-color: $color-button_primary-bg-active;
+        }
+
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_primary-bg-default;
+        }
+    }
+    &-secondary {
+        background-color: $color-button_secondary-bg-default;
+        outline-color: $color-button_secondary-border-default;
+        color: $color-button_secondary-text-default;
+        &:hover {
+            background-color: $color-button_secondary-bg-hover;
+        }
+        &:active {
+            background-color: $color-button_secondary-bg-active;
+        }
+
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_secondary-bg-default;
+        }
+    }
+    &-disabled {
+        color: $color-button_disabled_solid-text-default;
+        background-color: $color-button_disabled-bg-default;
+        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
+            color: $color-button_disabled-text-hover;
+            background-color: $color-button_disabled-bg-hover;
+        }
+        cursor: not-allowed;
+
+        &.#{$module}-light,
+        &.#{$module}-borderless {
+            color: $color-button_disabled-text-default;
+        }
+    }
+    &-borderless {
+        background-color: transparent;
+        &:not(.#{$module}-disabled):hover {
+            background-color: $color-button_borderless-bg-hover;
+        }
+        &:not(.#{$module}-disabled):active {
+            background-color: $color-button_borderless-bg-active;
+        }
+    }
+
+    &-light {
+        background-color: $color-button_light-bg-default;
+        &:not(.#{$module}-disabled):hover {
+            background-color: $color-button_light-bg-hover;
+        }
+        &:not(.#{$module}-disabled):active {
+            background-color: $color-button_light-bg-active;
+        }
+    }
+    &-size-small {
+        height: $height-button_small;
+        padding-top: $spacing-button_small-paddingTop;
+        padding-bottom: $spacing-button_small-paddingBottom;
+        padding-left: $spacing-button_small-paddingLeft;
+        padding-right: $spacing-button_small-paddingRight;
+    }
+    &-size-large {
+        height: $height-button_large;
+        padding-top: $spacing-button_large-paddingTop;
+        padding-bottom: $spacing-button_large-paddingBottom;
+        padding-left: $spacing-button_large-paddingLeft;
+        padding-right: $spacing-button_large-paddingRight;
+    }
+    &-block {
+        width: 100%;
+    }
+
+    &-group {
+        & > .#{$module} {
+            margin: 0;
+            padding-left: 0;
+            padding-right: 0;
+            border-radius: 0;
+
+            .#{$module}-content {
+                padding-left: $spacing-button_default-paddingLeft;
+                padding-right: $spacing-button_default-paddingRight;
+            }
+
+            &-size-large {
+                .#{$module}-content {
+                    padding-left: $spacing-button_large-paddingLeft;
+                    padding-right: $spacing-button_large-paddingRight;
+                }
+            }
+
+            &-size-small {
+                .#{$module}-content {
+                    padding-left: $spacing-button_small-paddingLeft;
+                    padding-right: $spacing-button_small-paddingRight;
+                }
+            }
+
+            &.#{$module}-with-icon-only {
+                padding-left: 0;
+                padding-right: 0;
+
+                .#{$module}-content {
+                    padding-left: $spacing-button_iconOnly_default-paddingLeft;
+                    padding-right: $spacing-button_iconOnly_default-paddingRight;
+                }
+
+                &.#{$module}-size {
+                    &-small {
+                        .#{$module}-content {
+                            padding-left: $spacing-button_iconOnly_small-paddingLeft;
+                            padding-right: $spacing-button_iconOnly_small-paddingRight;
+                        }
+                    }
+
+                    &-large {
+                        .#{$module}-content {
+                            padding-left: $spacing-button_iconOnly_large-paddingLeft;
+                            padding-right: $spacing-button_iconOnly_large-paddingRight;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                border-top-left-radius: $radius-button_group;
+                border-bottom-left-radius: $radius-button_group;
+            }
+            &:not(:last-child) {
+                .#{$prefix}-button-content {
+                    border-right: $width-button_group-border $color-button_group-border-default solid;
+                }
+            }
+            &:last-child {
+                border-top-right-radius: $radius-button_group;
+                border-bottom-right-radius: $radius-button_group;
+            }
+        }
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/button/constants.d.ts

@@ -0,0 +1,6 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: Record<string, any>;
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/button/constants.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-button")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  sizes: ['default', 'small', 'large'],
+  iconPositions: ['left', 'right'],
+  htmlTypes: ['button', 'reset', 'submit'],
+  btnTypes: ['primary', 'secondary', 'tertiary', 'warning', 'danger'],
+  themes: ['solid', 'borderless', 'light'],
+  DEFAULT_ICON_SIZE: 'default',
+  DEFAULT_ICON_POSITION: 'left'
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;