@douyinfe/semi-foundation 2.1.0-next.0 → 2.1.0

package/lib/cjs/button/button.css

@@ -1,309 +0,0 @@
-/* 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

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

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

package/lib/cjs/button/constants.js

@@ -1,28 +0,0 @@
-"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;