tiny-ui 1.0.2 → 1.0.3

package/lib/style/index.scss

@@ -0,0 +1,7 @@
+@use './theme' as *;
+@use './normalise' as *;
+@use './variables' as *;
+@use './tokens' as *;
+@use './animation' as *;
+@use './mixins' as *;
+@use './component' as *;

package/lib/style/themes/_dark.scss

@@ -0,0 +1,380 @@
+// Dark theme token values
+$dark-theme: (
+  // ---- Background ----
+  color-bg: #141414,
+  color-bg-elevated: #1f1f1f,
+  color-bg-container: #1f1f1f,
+  color-bg-spotlight: #2a2a2a,
+  color-bg-disabled: #2a2a2a,
+  color-bg-layout: #141414,
+
+  // ---- Text ----
+  color-text: rgba(255, 255, 255, 0.85),
+  color-text-secondary: rgba(255, 255, 255, 0.65),
+  color-text-tertiary: rgba(255, 255, 255, 0.45),
+  color-text-quaternary: rgba(255, 255, 255, 0.25),
+  color-text-heading: rgba(255, 255, 255, 0.85),
+  color-text-label: rgba(255, 255, 255, 0.85),
+  color-text-placeholder: #5c5c5c,
+
+  // ---- Primary ----
+  color-primary: #9065d0,
+  color-primary-hover: #a882dc,
+  color-primary-active: #7a50bf,
+  color-primary-bg: #1a1325,
+  color-primary-border: #5b3d8f,
+  color-primary-bg-hover: #231a33,
+  color-primary-text-hover: #a882dc,
+
+  // ---- Border ----
+  color-border: #424242,
+  color-border-secondary: #363636,
+  color-border-light: #303030,
+  color-border-btn-default: #424242,
+
+  // ---- Fill ----
+  color-fill: #262626,
+  color-fill-secondary: #2a2a2a,
+  color-fill-tertiary: #303030,
+
+  // ---- Success ----
+  color-success: #49aa19,
+  color-success-bg: #162312,
+  color-success-border: #274916,
+  color-success-text: #6abe39,
+
+  // ---- Warning ----
+  color-warning: #d89614,
+  color-warning-bg: #2b2111,
+  color-warning-border: #594214,
+  color-warning-text: #e8b339,
+
+  // ---- Danger / Error ----
+  color-danger: #d32029,
+  color-danger-bg: #2a1215,
+  color-danger-border: #58181c,
+  color-danger-text: #e84749,
+  color-danger-hover: #e84749,
+
+  // ---- Info ----
+  color-info: #177ddc,
+  color-info-bg: #111d2c,
+  color-info-border: #15395b,
+  color-info-text: #3c9ae8,
+
+  // ---- Shadows ----
+  shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3),
+  shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4),
+  shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5),
+  shadow-popup: 0 3px 6px -4px rgba(0, 0, 0, 0.48) #{','} 0 6px 16px 0 rgba(0, 0, 0, 0.32) #{','} 0 9px 28px 8px rgba(0, 0, 0, 0.2),
+  shadow-card: 0 1px 6px rgba(0, 0, 0, 0.35),
+  shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.45),
+  shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.05) #{','} 0 1px 1px rgba(0, 0, 0, 0.2),
+
+  // ---- Overlay ----
+  color-overlay-bg: rgba(0, 0, 0, 0.65),
+  color-overlay-inverted: rgba(50, 50, 50, 0.75),
+
+  // ---- Component-specific: Button ----
+  btn-default-color: rgba(255, 255, 255, 0.85),
+  btn-default-bg: #1f1f1f,
+  btn-default-border: #424242,
+  btn-default-hover-bg: #1f1f1f,
+  btn-default-hover-border: #9065d0,
+  btn-default-hover-color: #9065d0,
+  btn-default-active-bg: #2a2a2a,
+  btn-default-active-border: #9065d0,
+  btn-default-active-color: #9065d0,
+  btn-disabled-color: rgba(255, 255, 255, 0.25),
+  btn-disabled-bg: #2a2a2a,
+  btn-disabled-border: #424242,
+  btn-loading-bg: #1f1f1f,
+  btn-ghost-hover-bg: #1a1325,
+  btn-ghost-active-bg: #231a33,
+  btn-outline-hover-bg: #1a1325,
+  btn-outline-active-bg: #231a33,
+  btn-link-disabled-color: rgba(255, 255, 255, 0.25),
+
+  // ---- Component-specific: Input ----
+  input-bg: #1f1f1f,
+  input-border: #424242,
+  input-disabled-bg: #2a2a2a,
+  input-disabled-color: rgba(255, 255, 255, 0.25),
+  input-addon-bg: #262626,
+  input-focus-shadow: 0 0 0 2px rgba(144, 101, 208, 0.2),
+  input-focus-border: rgba(144, 101, 208, 0.8),
+
+  // ---- Component-specific: Select ----
+  select-dropdown-bg: #1f1f1f,
+  select-option-active-bg: #2a2a2a,
+  select-option-selected-bg: #1a1325,
+  select-option-disabled-bg: #1f1f1f,
+
+  // ---- Component-specific: Card ----
+  card-bg: #1f1f1f,
+  card-border: #363636,
+  card-header-color: rgba(255, 255, 255, 0.85),
+  card-shadow-border: rgba(0, 0, 0, 0.2),
+
+  // ---- Component-specific: Modal ----
+  modal-bg: #1f1f1f,
+  modal-header-bg: #1f1f1f,
+  modal-header-border: #363636,
+  modal-footer-border: #363636,
+
+  // ---- Component-specific: Drawer ----
+  drawer-bg: #1f1f1f,
+  drawer-border: #363636,
+
+  // ---- Component-specific: Menu ----
+  menu-light-bg: #1f1f1f,
+  menu-light-color: rgba(255, 255, 255, 0.85),
+  menu-light-border: #303030,
+  menu-dark-bg: #001529,
+  menu-dark-color: rgba(255, 255, 255, 0.65),
+  menu-dark-border: #001529,
+  menu-divider-color: rgba(255, 255, 255, 0.1),
+  menu-group-title-color: rgba(255, 255, 255, 0.45),
+
+  // ---- Component-specific: Notification / Message ----
+  notification-bg: #1f1f1f,
+  notification-close-color: rgba(255, 255, 255, 0.2),
+  notification-close-hover: rgba(255, 255, 255, 0.7),
+  message-bg: #1f1f1f,
+
+  // ---- Component-specific: Badge ----
+  badge-shadow: 0 0 0 1.5px #1f1f1f,
+
+  // ---- Component-specific: Tag ----
+  tag-bg: #262626,
+  tag-border: #424242,
+  tag-checkable-bg: #1f1f1f,
+  tag-magenta-color: #e0529c,
+  tag-magenta-bg: #291321,
+  tag-magenta-border: #55162b,
+  tag-red-color: #e84749,
+  tag-red-bg: #2a1215,
+  tag-red-border: #58181c,
+  tag-volcano-color: #e87040,
+  tag-volcano-bg: #2b1611,
+  tag-volcano-border: #592716,
+  tag-orange-color: #e89a3c,
+  tag-orange-bg: #2b1d11,
+  tag-orange-border: #593815,
+  tag-gold-color: #e8b339,
+  tag-gold-bg: #2b2111,
+  tag-gold-border: #594214,
+  tag-lime-color: #8bbb11,
+  tag-lime-bg: #1a2611,
+  tag-lime-border: #3e4f13,
+  tag-green-color: #6abe39,
+  tag-green-bg: #162312,
+  tag-green-border: #274916,
+  tag-cyan-color: #33bcb7,
+  tag-cyan-bg: #112123,
+  tag-cyan-border: #144848,
+  tag-blue-color: #3c9ae8,
+  tag-blue-bg: #111d2c,
+  tag-blue-border: #15395b,
+  tag-geekblue-color: #5273e0,
+  tag-geekblue-bg: #131a2e,
+  tag-geekblue-border: #1c2d57,
+  tag-purple-color: #854eca,
+  tag-purple-bg: #1a1325,
+  tag-purple-border: #301c4d,
+
+  // ---- Component-specific: Tabs ----
+  tabs-border: #303030,
+  tabs-card-bg: #262626,
+  tabs-card-active-bg: #1f1f1f,
+
+  // ---- Component-specific: Collapse ----
+  collapse-bg: #262626,
+  collapse-border: #424242,
+  collapse-content-bg: #1f1f1f,
+  collapse-header-hover-bg: #303030,
+  collapse-borderless-bg: #1f1f1f,
+
+  // ---- Component-specific: Descriptions ----
+  descriptions-label-bg: #262626,
+  descriptions-border: #363636,
+
+  // ---- Component-specific: Steps ----
+  steps-tail-color: #424242,
+  steps-icon-bg: #1f1f1f,
+
+  // ---- Component-specific: Timeline ----
+  timeline-line-color: #363636,
+  timeline-dot-bg: #1f1f1f,
+  timeline-head-bg: #1f1f1f,
+
+  // ---- Component-specific: Slider ----
+  slider-rail-bg: #363636,
+  slider-thumb-bg: #1f1f1f,
+  slider-thumb-border: #9065d0,
+  slider-dot-bg: #1f1f1f,
+  slider-dot-border: #424242,
+  slider-dot-active-border: #9065d0,
+  slider-mark-color: rgba(255, 255, 255, 0.4),
+  slider-mark-active-color: rgba(255, 255, 255, 0.7),
+
+  // ---- Component-specific: Progress ----
+  progress-trail-bg: #363636,
+  progress-text-color: rgba(255, 255, 255, 0.65),
+  progress-circle-trail: #363636,
+
+  // ---- Component-specific: Skeleton ----
+  skeleton-bg: #303030,
+  skeleton-shimmer: linear-gradient(to right, #303030 25%, #3a3a3a 37%, #303030 63%),
+
+  // ---- Component-specific: Keyboard ----
+  kbd-bg: #2a2a2a,
+  kbd-border: #424242,
+  kbd-border-bottom: #363636,
+  kbd-color: rgba(255, 255, 255, 0.85),
+  kbd-shadow: inset 0 -1px 0 #363636,
+
+  // ---- Component-specific: Transfer ----
+  transfer-border: #424242,
+  transfer-header-bg: #1f1f1f,
+  transfer-item-hover-bg: #2a2a2a,
+  transfer-footer-bg: #1f1f1f,
+  transfer-footer-border: #303030,
+
+  // ---- Component-specific: Upload ----
+  upload-dragger-bg: #262626,
+  upload-dragger-border: #424242,
+  upload-dragger-hover-bg: #303030,
+  upload-item-hover-bg: #2a2a2a,
+
+  // ---- Component-specific: Date/Time picker ----
+  picker-input-bg: #1f1f1f,
+  picker-dropdown-bg: #1f1f1f,
+  picker-cell-hover-bg: #2a2a2a,
+  picker-cell-selected-hover-bg: #7a50bf,
+  picker-cell-disabled-bg: #2a2a2a,
+  picker-clear-bg: #1f1f1f,
+
+  // ---- Component-specific: Split ----
+  split-bar-bg: #262626,
+  split-bar-border: #424242,
+  split-bar-line: #525252,
+
+  // ---- Component-specific: Popup ----
+  popup-light-bg: #1f1f1f,
+  popup-dark-bg: #363636,
+  popup-arrow-shadow: rgba(0, 0, 0, 0.2),
+
+  // ---- Component-specific: Layout ----
+  layout-sidebar-bg: #12131a,
+  layout-sidebar-trigger-bg: rgb(0, 33, 64),
+  layout-sidebar-light-bg: #1f1f1f,
+  layout-sidebar-light-color: rgba(255, 255, 255, 0.85),
+  layout-sidebar-light-trigger-bg: #2a2a2a,
+  layout-sidebar-light-trigger-icon: #666,
+
+  // ---- Component-specific: Anchor ----
+  anchor-bg: #1f1f1f,
+  anchor-ink-bg: #303030,
+  anchor-ball-bg: #1f1f1f,
+
+  // ---- Component-specific: Form ----
+  form-notice-bg: #2b2111,
+  form-notice-color: rgba(255, 255, 255, 0.65),
+  form-error-color: #e84749,
+  form-error-hover: #d32029,
+
+  // ---- Component-specific: Checkbox / Radio ----
+  checkbox-bg: #1f1f1f,
+  checkbox-border: #424242,
+  checkbox-disabled-bg: #2a2a2a,
+  checkbox-check-color: #fff,
+  radio-bg: #1f1f1f,
+  radio-disabled-border: #424242,
+  radio-disabled-dot: rgba(255, 255, 255, 0.2),
+
+  // ---- Component-specific: Switch ----
+  switch-bg: rgba(255, 255, 255, 0.25),
+  switch-thumb-bg: #e8e8e8,
+  switch-thumb-border: rgba(255, 255, 255, 0.25),
+  switch-thumb-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4),
+
+  // ---- Component-specific: Divider ----
+  divider-color: #363636,
+  divider-text-color: rgba(255, 255, 255, 0.85),
+
+  // ---- Component-specific: Popover ----
+  popover-dark-border: #525252,
+
+  // ---- Component-specific: Native select ----
+  native-select-bg: #1f1f1f,
+  native-select-disabled-bg: #2a2a2a,
+  native-select-disabled-color: rgba(255, 255, 255, 0.25),
+
+  // ---- Component-specific: Pagination ----
+  pagination-bg: #1f1f1f,
+  pagination-disabled-bg: #2a2a2a,
+  pagination-disabled-active-bg: #424242,
+  pagination-disabled-color: #525252,
+
+  // ---- Component-specific: Typography ----
+  typography-heading-color: rgba(255, 255, 255, 0.85),
+  typography-body-color: rgba(255, 255, 255, 0.65),
+  typography-code-bg: rgba(255, 255, 255, 0.06),
+  typography-code-border: rgba(255, 255, 255, 0.06),
+  typography-mark-bg: #594214,
+
+  // ---- Component-specific: Result ----
+  result-content-bg: #262626,
+
+  // ---- Component-specific: Empty ----
+  empty-desc-color: rgba(255, 255, 255, 0.35),
+
+  // ---- Component-specific: Carousel ----
+  carousel-arrow-bg: rgba(255, 255, 255, 0.15),
+  carousel-arrow-hover-bg: rgba(255, 255, 255, 0.25),
+  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: #1f1f1f,
+  avatar-presence-shadow: 0 0 0 0.1rem #1f1f1f,
+
+  // ---- Component-specific: BackTop ----
+  back-top-bg: rgba(255, 255, 255, 0.2),
+
+  // ---- Component-specific: Input Number ----
+  input-number-control-border: #424242,
+  input-number-control-active-bg: #2a2a2a,
+  input-number-icon-color: #666,
+
+  // ---- Component-specific: Tree ----
+  tree-arrow-color: #666,
+  tree-hover-bg: #2a2a2a,
+
+  // ---- Component-specific: Textarea ----
+  textarea-counter-color: rgba(255, 255, 255, 0.45),
+
+  // ---- Component-specific: Table ----
+  table-header-bg: #262626,
+  table-border: #363636,
+  table-hover: #2a2a2a,
+  table-selected-bg: rgba(144, 101, 208, 0.1),
+
+  // ---- Component-specific: Segmented ----
+  segmented-bg: #2a2a2a,
+  segmented-active-bg: #1f1f1f,
+
+  // ---- Component-specific: Cascader ----
+  cascader-bg: #1f1f1f,
+  cascader-border: #424242,
+  cascader-dropdown-bg: #1f1f1f,
+  cascader-hover: #2a2a2a,
+  cascader-selected-bg: rgba(144, 101, 208, 0.1),
+
+  // ---- Component-specific: Calendar ----
+  calendar-bg: #1f1f1f,
+  calendar-border: #363636,
+  calendar-hover: #2a2a2a,
+);