tiny-ui 1.0.2 → 1.0.3

package/lib/style/themes/_light.scss

@@ -0,0 +1,380 @@
+// Light theme token values
+$light-theme: (
+  // ---- Background ----
+  color-bg: #fff,
+  color-bg-elevated: #fff,
+  color-bg-container: #fff,
+  color-bg-spotlight: #f5f5f5,
+  color-bg-disabled: #f5f5f5,
+  color-bg-layout: #fff,
+
+  // ---- Text ----
+  color-text: rgba(0, 0, 0, 0.85),
+  color-text-secondary: rgba(0, 0, 0, 0.65),
+  color-text-tertiary: rgba(0, 0, 0, 0.45),
+  color-text-quaternary: rgba(0, 0, 0, 0.25),
+  color-text-heading: rgba(0, 0, 0, 0.85),
+  color-text-label: rgba(0, 0, 0, 0.85),
+  color-text-placeholder: #bfbfbf,
+
+  // ---- Primary ----
+  color-primary: #6e41bf,
+  color-primary-hover: #8b62d0,
+  color-primary-active: #5a30a8,
+  color-primary-bg: #f3eefa,
+  color-primary-border: #c4a7e6,
+  color-primary-bg-hover: #ece3f7,
+  color-primary-text-hover: #8b62d0,
+
+  // ---- Border ----
+  color-border: #d9d9d9,
+  color-border-secondary: #e8e8e8,
+  color-border-light: #f0f0f0,
+  color-border-btn-default: #d0d0d5,
+
+  // ---- Fill ----
+  color-fill: #fafafa,
+  color-fill-secondary: #f5f5f5,
+  color-fill-tertiary: #f0f0f0,
+
+  // ---- Success ----
+  color-success: #52c41a,
+  color-success-bg: #f6ffed,
+  color-success-border: #b7eb8f,
+  color-success-text: #49b10e,
+
+  // ---- Warning ----
+  color-warning: #ff9800,
+  color-warning-bg: #fffbe6,
+  color-warning-border: #ffe58f,
+  color-warning-text: #d48806,
+
+  // ---- Danger / Error ----
+  color-danger: #f44336,
+  color-danger-bg: #fff1f0,
+  color-danger-border: #ffa39e,
+  color-danger-text: #cf1322,
+  color-danger-hover: #ff7875,
+
+  // ---- Info ----
+  color-info: #1890ff,
+  color-info-bg: #e6f7ff,
+  color-info-border: #91d5ff,
+  color-info-text: #096dd9,
+
+  // ---- Shadows ----
+  shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075),
+  shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15),
+  shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175),
+  shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.12) #{','} 0 6px 16px 0 rgba(0, 0, 0, 0.08) #{','} 0 9px 28px 8px rgba(0, 0, 0, 0.05),
+  shadow-card: 0 1px 6px rgba(0, 0, 0, 0.12),
+  shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.15),
+  shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.15) #{','} 0 1px 1px rgba(0, 0, 0, 0.075),
+
+  // ---- Overlay ----
+  color-overlay-bg: rgba(0, 0, 0, 0.55),
+  color-overlay-inverted: rgba(255, 255, 255, 0.75),
+
+  // ---- Component-specific: Button ----
+  btn-default-color: #32325d,
+  btn-default-bg: #fff,
+  btn-default-border: #d0d0d5,
+  btn-default-hover-bg: #fff,
+  btn-default-hover-border: #6e41bf,
+  btn-default-hover-color: #6e41bf,
+  btn-default-active-bg: #f2f2f2,
+  btn-default-active-border: #6e41bf,
+  btn-default-active-color: #6e41bf,
+  btn-disabled-color: rgba(0, 0, 0, 0.25),
+  btn-disabled-bg: #f5f5f5,
+  btn-disabled-border: #d9d9d9,
+  btn-loading-bg: #fff,
+  btn-ghost-hover-bg: #f3eefa,
+  btn-ghost-active-bg: #ece3f7,
+  btn-outline-hover-bg: #f3eefa,
+  btn-outline-active-bg: #ece3f7,
+  btn-link-disabled-color: rgba(0, 0, 0, 0.25),
+
+  // ---- Component-specific: Input ----
+  input-bg: #fff,
+  input-border: #d9d9d9,
+  input-disabled-bg: #f4f4f5,
+  input-disabled-color: #999,
+  input-addon-bg: #fafafa,
+  input-focus-shadow: 0 0 0 2px rgba(110, 65, 191, 0.2),
+  input-focus-border: rgba(110, 65, 191, 0.8),
+
+  // ---- Component-specific: Select ----
+  select-dropdown-bg: #fff,
+  select-option-active-bg: #f5f5f5,
+  select-option-selected-bg: #f3eefa,
+  select-option-disabled-bg: #fff,
+
+  // ---- Component-specific: Card ----
+  card-bg: #fff,
+  card-border: #e8e8e8,
+  card-header-color: rgba(0, 0, 0, 0.85),
+  card-shadow-border: rgba(0, 0, 0, 0.07),
+
+  // ---- Component-specific: Modal ----
+  modal-bg: #fff,
+  modal-header-bg: #fff,
+  modal-header-border: #e8e8e8,
+  modal-footer-border: #e8e8e8,
+
+  // ---- Component-specific: Drawer ----
+  drawer-bg: #fff,
+  drawer-border: #e8e8e8,
+
+  // ---- Component-specific: Menu ----
+  menu-light-bg: #fff,
+  menu-light-color: #32325d,
+  menu-light-border: #f0f0f0,
+  menu-dark-bg: #001529,
+  menu-dark-color: rgba(255, 255, 255, 0.65),
+  menu-dark-border: #001529,
+  menu-divider-color: rgba(0, 0, 0, 0.1),
+  menu-group-title-color: rgba(0, 0, 0, 0.45),
+
+  // ---- Component-specific: Notification / Message ----
+  notification-bg: #fff,
+  notification-close-color: rgba(0, 0, 0, 0.2),
+  notification-close-hover: rgba(0, 0, 0, 0.7),
+  message-bg: #fff,
+
+  // ---- Component-specific: Badge ----
+  badge-shadow: 0 0 0 1.5px #fff,
+
+  // ---- Component-specific: Tag ----
+  tag-bg: #fafafa,
+  tag-border: #d9d9d9,
+  tag-checkable-bg: #fff,
+  tag-magenta-color: #eb2f96,
+  tag-magenta-bg: #fff0f6,
+  tag-magenta-border: #ffadd2,
+  tag-red-color: #f5222d,
+  tag-red-bg: #fff1f0,
+  tag-red-border: #ffa39e,
+  tag-volcano-color: #fa541c,
+  tag-volcano-bg: #fff2e8,
+  tag-volcano-border: #ffbb96,
+  tag-orange-color: #fa8c16,
+  tag-orange-bg: #fff7e6,
+  tag-orange-border: #ffd591,
+  tag-gold-color: #faad14,
+  tag-gold-bg: #fffbe6,
+  tag-gold-border: #ffe58f,
+  tag-lime-color: #a0d911,
+  tag-lime-bg: #fcffe6,
+  tag-lime-border: #eaff8f,
+  tag-green-color: #52c41a,
+  tag-green-bg: #f6ffed,
+  tag-green-border: #b7eb8f,
+  tag-cyan-color: #13c2c2,
+  tag-cyan-bg: #e6fffb,
+  tag-cyan-border: #87e8de,
+  tag-blue-color: #1890ff,
+  tag-blue-bg: #e6f7ff,
+  tag-blue-border: #91d5ff,
+  tag-geekblue-color: #2f54eb,
+  tag-geekblue-bg: #f0f5ff,
+  tag-geekblue-border: #adc6ff,
+  tag-purple-color: #722ed1,
+  tag-purple-bg: #f9f0ff,
+  tag-purple-border: #d3adf7,
+
+  // ---- Component-specific: Tabs ----
+  tabs-border: #f0f0f0,
+  tabs-card-bg: #fafafa,
+  tabs-card-active-bg: #fff,
+
+  // ---- Component-specific: Collapse ----
+  collapse-bg: #fafafa,
+  collapse-border: #d9d9d9,
+  collapse-content-bg: #fff,
+  collapse-header-hover-bg: #efefef,
+  collapse-borderless-bg: #fff,
+
+  // ---- Component-specific: Descriptions ----
+  descriptions-label-bg: #fafafa,
+  descriptions-border: #dfe2e5,
+
+  // ---- Component-specific: Steps ----
+  steps-tail-color: #dcdcdc,
+  steps-icon-bg: #fff,
+
+  // ---- Component-specific: Timeline ----
+  timeline-line-color: #e8e8e8,
+  timeline-dot-bg: #fff,
+  timeline-head-bg: #fff,
+
+  // ---- Component-specific: Slider ----
+  slider-rail-bg: #e4e8f1,
+  slider-thumb-bg: rgb(245, 248, 250),
+  slider-thumb-border: #9570d4,
+  slider-dot-bg: #fff,
+  slider-dot-border: #f0f0f0,
+  slider-dot-active-border: #9570d4,
+  slider-mark-color: rgba(0, 0, 0, 0.4),
+  slider-mark-active-color: rgba(0, 0, 0, 0.7),
+
+  // ---- Component-specific: Progress ----
+  progress-trail-bg: #e4e8f1,
+  progress-text-color: #48576a,
+  progress-circle-trail: #e5e9f2,
+
+  // ---- Component-specific: Skeleton ----
+  skeleton-bg: #f2f2f2,
+  skeleton-shimmer: linear-gradient(to right, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%),
+
+  // ---- Component-specific: Keyboard ----
+  kbd-bg: #f6f6f6,
+  kbd-border: #d8d8d8,
+  kbd-border-bottom: #ccc,
+  kbd-color: #333,
+  kbd-shadow: inset 0 -1px 0 #ccc,
+
+  // ---- Component-specific: Transfer ----
+  transfer-border: #d9d9d9,
+  transfer-header-bg: #fff,
+  transfer-item-hover-bg: #f5f5f5,
+  transfer-footer-bg: #fff,
+  transfer-footer-border: #f0f0f0,
+
+  // ---- Component-specific: Upload ----
+  upload-dragger-bg: #fafafa,
+  upload-dragger-border: #d9d9d9,
+  upload-dragger-hover-bg: #efefef,
+  upload-item-hover-bg: #f5f5f5,
+
+  // ---- Component-specific: Date/Time picker ----
+  picker-input-bg: #fff,
+  picker-dropdown-bg: #fff,
+  picker-cell-hover-bg: #f5f5f5,
+  picker-cell-selected-hover-bg: #5a30a8,
+  picker-cell-disabled-bg: #f5f5f5,
+  picker-clear-bg: #fff,
+
+  // ---- Component-specific: Split ----
+  split-bar-bg: #f8f8f9,
+  split-bar-border: #dcdee2,
+  split-bar-line: #d5d5d5,
+
+  // ---- Component-specific: Popup ----
+  popup-light-bg: #fff,
+  popup-dark-bg: #262626,
+  popup-arrow-shadow: rgba(0, 0, 0, 0.07),
+
+  // ---- Component-specific: Layout ----
+  layout-sidebar-bg: #12131a,
+  layout-sidebar-trigger-bg: rgb(0, 33, 64),
+  layout-sidebar-light-bg: #fff,
+  layout-sidebar-light-color: #333,
+  layout-sidebar-light-trigger-bg: #efefef,
+  layout-sidebar-light-trigger-icon: #bbb,
+
+  // ---- Component-specific: Anchor ----
+  anchor-bg: #fff,
+  anchor-ink-bg: #f0f0f0,
+  anchor-ball-bg: #fff,
+
+  // ---- Component-specific: Form ----
+  form-notice-bg: #fff7cc,
+  form-notice-color: #555,
+  form-error-color: #ff4d4f,
+  form-error-hover: #ff7875,
+
+  // ---- Component-specific: Checkbox / Radio ----
+  checkbox-bg: #fff,
+  checkbox-border: #d9d9d9,
+  checkbox-disabled-bg: #f5f5f5,
+  checkbox-check-color: #fff,
+  radio-bg: #fff,
+  radio-disabled-border: #d9d9d9,
+  radio-disabled-dot: rgba(0, 0, 0, 0.2),
+
+  // ---- Component-specific: Switch ----
+  switch-bg: rgba(0, 0, 0, 0.25),
+  switch-thumb-bg: #fff,
+  switch-thumb-border: rgba(0, 0, 0, 0.25),
+  switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2),
+
+  // ---- Component-specific: Divider ----
+  divider-color: #e4e4e4,
+  divider-text-color: #333,
+
+  // ---- Component-specific: Popover ----
+  popover-dark-border: #4a4a4a,
+
+  // ---- Component-specific: Native select ----
+  native-select-bg: #fff,
+  native-select-disabled-bg: #ddd,
+  native-select-disabled-color: #a5a5a5,
+
+  // ---- Component-specific: Pagination ----
+  pagination-bg: #fff,
+  pagination-disabled-bg: #f5f5f5,
+  pagination-disabled-active-bg: #dbdbdb,
+  pagination-disabled-color: #d9d9d9,
+
+  // ---- Component-specific: Typography ----
+  typography-heading-color: rgba(0, 0, 0, 0.85),
+  typography-body-color: rgba(0, 0, 0, 0.65),
+  typography-code-bg: rgba(0, 0, 0, 0.06),
+  typography-code-border: rgba(0, 0, 0, 0.06),
+  typography-mark-bg: #ffe58f,
+
+  // ---- Component-specific: Result ----
+  result-content-bg: #fafafa,
+
+  // ---- Component-specific: Empty ----
+  empty-desc-color: rgba(0, 0, 0, 0.35),
+
+  // ---- Component-specific: Carousel ----
+  carousel-arrow-bg: rgba(0, 0, 0, 0.25),
+  carousel-arrow-hover-bg: rgba(0, 0, 0, 0.45),
+  carousel-dot-bg: rgba(255, 255, 255, 0.3),
+  carousel-dot-hover-bg: rgba(255, 255, 255, 0.6),
+  carousel-dot-active-bg: #fff,
+
+  // ---- Component-specific: Avatar ----
+  avatar-border: #fff,
+  avatar-presence-shadow: 0 0 0 0.1rem #fff,
+
+  // ---- Component-specific: BackTop ----
+  back-top-bg: rgba(0, 0, 0, 0.3),
+
+  // ---- Component-specific: Input Number ----
+  input-number-control-border: #d9d9d9,
+  input-number-control-active-bg: #f4f4f4,
+  input-number-icon-color: #999,
+
+  // ---- Component-specific: Tree ----
+  tree-arrow-color: #999,
+  tree-hover-bg: #f5f5f5,
+
+  // ---- Component-specific: Textarea ----
+  textarea-counter-color: #666,
+
+  // ---- Component-specific: Table ----
+  table-header-bg: #f6f9fc,
+  table-border: #e9ecef,
+  table-hover: #f6f9fc,
+  table-selected-bg: rgba(110, 65, 191, 0.06),
+
+  // ---- Component-specific: Segmented ----
+  segmented-bg: #e9ecef,
+  segmented-active-bg: #fff,
+
+  // ---- Component-specific: Cascader ----
+  cascader-bg: #fff,
+  cascader-border: #d9d9d9,
+  cascader-dropdown-bg: #fff,
+  cascader-hover: #f5f5f5,
+  cascader-selected-bg: rgba(110, 65, 191, 0.06),
+
+  // ---- Component-specific: Calendar ----
+  calendar-bg: #fff,
+  calendar-border: #e9ecef,
+  calendar-hover: #f6f9fc,
+);

package/lib/switch/style/_index.scss

@@ -0,0 +1,144 @@
+@use '../../style/variables' as *;
+@use './mixin' as *;
+
+.#{$prefix}-switch {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: var(--ty-switch-bg);
+    transition: background-color 300ms;
+    user-select: none;
+  }
+
+  &__thumb {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    left: 0;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    background-color: var(--ty-switch-thumb-bg);
+    border: 1px solid var(--ty-switch-thumb-border);
+    box-shadow: var(--ty-switch-thumb-shadow);
+    transition: all 300ms;
+    color: var(--ty-switch-bg);
+  }
+
+  &__label {
+    box-sizing: border-box;
+    display: block;
+    color: #fff;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    padding-left: 11px;
+    padding-right: 5px;
+    transition: all 300ms;
+  }
+
+  &_checked {
+    .#{$prefix}-switch {
+      &__bg {
+        background-color: var(--ty-color-primary);
+      }
+
+      &__thumb {
+        left: 100%;
+        border-color: var(--ty-color-primary);
+        color: var(--ty-color-primary);
+      }
+
+      &__label {
+        padding-left: 5px;
+        padding-right: 11px;
+      }
+    }
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  //TODO: optimise
+  &_loading {
+    .#{$prefix}-switch__thumb:before {
+      display: inline-block !important;
+    }
+  }
+
+  &_sm {
+    margin: 0 10px;
+    font-size: $switch-sm-font-size;
+    width: 29px;
+    height: 14px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 18px;
+      }
+
+      &__thumb {
+        @include switch-bg(18px);
+      }
+
+      &__label {
+        line-height: 14px;
+      }
+    }
+  }
+
+  &_md {
+    margin: 0 12px;
+    font-size: $switch-md-font-size;
+    width: 36px;
+    height: 16px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 22px;
+      }
+
+      &__thumb {
+        @include switch-bg(22px);
+      }
+
+      &__label {
+        line-height: 17px;
+      }
+    }
+  }
+
+  &_lg {
+    margin: 0 14px;
+    font-size: $switch-lg-font-size;
+    width: 42px;
+    height: 20px;
+
+    .#{$prefix}-switch {
+      &__bg {
+        border-radius: 26px;
+      }
+
+      &__thumb {
+        @include switch-bg(26px);
+      }
+
+      &__label {
+        line-height: 20px;
+      }
+    }
+  }
+}

package/lib/switch/style/_mixin.scss

@@ -0,0 +1,16 @@
+@use "../../style/mixins" as *;
+
+@mixin switch-bg($size) {
+  width: $size;
+  height: $size;
+  border-radius: $size;
+
+  &:before {
+    content: '';
+    width: calc(($size - 22px) / 2) + 10px;
+    height: calc(($size - 22px) / 2) + 10px;
+    @include loader();
+    display: none;
+  }
+}
+

package/lib/switch/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/table/style/_index.scss

@@ -0,0 +1,143 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-table {
+  color: var(--ty-color-text, #{$gray-800});
+  font-size: $font-size-base;
+
+  &__wrapper {
+    overflow-x: auto;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+  }
+
+  &_bordered &__table {
+    border: 1px solid var(--ty-table-border, #{$gray-300});
+  }
+
+  &_bordered &__cell {
+    border: 1px solid var(--ty-table-border, #{$gray-300});
+  }
+
+  // Sizes
+  &_sm &__cell {
+    padding: 8px 8px;
+    font-size: $font-size-sm;
+  }
+
+  &_md &__cell {
+    padding: 12px 16px;
+  }
+
+  &_lg &__cell {
+    padding: 16px 16px;
+    font-size: $font-size-lg;
+  }
+
+  // Sticky header for virtual scroll
+  &__thead_sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  // Spacer rows for virtual scroll
+  &__row_spacer td {
+    padding: 0 !important;
+    border: 0 !important;
+  }
+
+  // Header
+  &__thead {
+    .#{$prefix}-table__cell {
+      background: var(--ty-table-header-bg, #{$gray-100});
+      font-weight: 500;
+      border-bottom: 1px solid var(--ty-table-border, #{$gray-300});
+    }
+  }
+
+  // Cells
+  &__cell {
+    text-align: left;
+    vertical-align: middle;
+
+    &_sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background: var(--ty-table-hover, #{$gray-200});
+      }
+    }
+
+    &_ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 0;
+    }
+
+    &_align-center {
+      text-align: center;
+    }
+
+    &_align-right {
+      text-align: right;
+    }
+  }
+
+  // Rows
+  &__tbody &__row {
+    border-bottom: 1px solid var(--ty-table-border, #{$gray-200});
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--ty-table-hover, #{$gray-100});
+    }
+
+    &_selected {
+      background: var(--ty-table-selected-bg, rgba(110, 65, 191, 0.06));
+    }
+  }
+
+  // Selection column
+  &__selection-col {
+    width: 40px;
+    text-align: center;
+  }
+
+  // Sorter
+  &__col-title {
+    display: inline;
+  }
+
+  &__sorter {
+    display: inline-flex;
+    flex-direction: column;
+    margin-left: 4px;
+    vertical-align: middle;
+    line-height: 1;
+  }
+
+  &__sorter-icon {
+    font-size: 8px;
+    line-height: 8px;
+    color: var(--ty-color-text-secondary, #{$gray-400});
+
+    &_active {
+      color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  // Empty & loading
+  &__empty-cell,
+  &__loading-cell {
+    text-align: center;
+    padding: 32px !important;
+    color: var(--ty-color-text-secondary, #{$gray-500});
+  }
+
+}

package/lib/table/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/tabs/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map