@bigtablet/design-system 3.2.2 → 3.4.0

package/README.md

@@ -174,6 +174,8 @@ pnpm build            # tsup + SCSS copy
 | | |
 |---|---|
 | 📚 [Components](./docs/COMPONENTS.md) | Props API + usage per component |
+| 🔄 [Migration](./docs/MIGRATION.md) | Deprecated prop migration guide |
+| 🎨 [Theming](./docs/THEMING.md) | Light/dark theme system guide |
 | 🏗️ [Architecture](./docs/ARCHITECTURE.md) | Project structure + design principles |
 | 🤝 [Contributing](./docs/CONTRIBUTING.md) | Dev setup + workflow |
 | 🧪 [Testing](./docs/TESTING.md) | Test patterns + a11y testing |

package/dist/index.css

@@ -2470,28 +2470,28 @@
   color: var(--bt-color-accent-default);
 }
 .chip_tone_info {
-  background: color-mix(in srgb, var(--bt-color-status-info) 12%, transparent);
+  background: var(--bt-color-status-info-container);
 }
 .chip_tone_info .chip_content {
-  color: var(--bt-color-status-info);
+  color: var(--bt-color-status-info-on-container);
 }
 .chip_tone_success {
-  background: color-mix(in srgb, var(--bt-color-status-success) 12%, transparent);
+  background: var(--bt-color-status-success-container);
 }
 .chip_tone_success .chip_content {
-  color: var(--bt-color-status-success);
+  color: var(--bt-color-status-success-on-container);
 }
 .chip_tone_warning {
-  background: color-mix(in srgb, var(--bt-color-status-warning) 14%, transparent);
+  background: var(--bt-color-status-warning-container);
 }
 .chip_tone_warning .chip_content {
-  color: var(--bt-color-status-warning);
+  color: var(--bt-color-status-warning-on-container);
 }
 .chip_tone_error {
-  background: color-mix(in srgb, var(--bt-color-status-error) 12%, transparent);
+  background: var(--bt-color-status-error-container);
 }
 .chip_tone_error .chip_content {
-  color: var(--bt-color-status-error);
+  color: var(--bt-color-status-error-on-container);
 }
 .chip_size_sm {
   height: 24px;
@@ -2695,6 +2695,7 @@
   border: 1px solid var(--bt-color-border-default);
   border-radius: 12px;
   box-shadow: var(--bt-elevation-level1);
+  overflow: hidden;
 }
 [data-theme=dark] .dropdown_list {
   background: var(--bt-color-bg-solid-dim);
@@ -2705,10 +2706,6 @@
   }
 }
 .dropdown_list {
-  max-height: 18rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 0;
   will-change: transform, opacity;
 }
 .dropdown_list_up {
@@ -2717,6 +2714,55 @@
   margin-top: 0;
   margin-bottom: 4px;
 }
+.dropdown_search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--bt-color-border-default);
+}
+.dropdown_search_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--bt-color-text-body);
+}
+.dropdown_search_input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--bt-color-text-heading);
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0px;
+  transition: box-shadow 0.1s ease-in-out;
+}
+.dropdown_search_input::placeholder {
+  color: var(--bt-color-text-body);
+}
+.dropdown_search_input:focus-visible {
+  box-shadow: var(--bt-focus-ring);
+}
+.dropdown_options {
+  max-height: 18rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+}
+.dropdown_empty {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: var(--bt-color-text-caption);
+  text-align: center;
+}
 .dropdown_option {
   width: 100%;
   box-sizing: border-box;
@@ -2751,6 +2797,14 @@
   cursor: not-allowed;
   color: var(--bt-color-text-caption);
 }
+.dropdown_option_check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  color: var(--bt-color-accent-default);
+}
 .dropdown_option_icon {
   display: inline-flex;
   align-items: center;
@@ -2803,6 +2857,9 @@
   .dropdown_icon {
     transition: none;
   }
+  .dropdown_search_input {
+    transition: none;
+  }
 }
 
 /* src/ui/forms/date-picker/style.scss */
@@ -2887,6 +2944,124 @@
   height: 2px;
 }
 
+/* src/ui/overlay/drawer/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: var(--bt-color-bg-overlay);
+  z-index: 100;
+  will-change: opacity;
+}
+.drawer_placement_left {
+  justify-content: flex-start;
+}
+.drawer_placement_right {
+  justify-content: flex-end;
+}
+.drawer_placement_bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+}
+.drawer_panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bt-color-bg-solid);
+  box-shadow: var(--bt-elevation-level3);
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  will-change: transform;
+}
+.drawer_placement_left .drawer_panel,
+.drawer_placement_right .drawer_panel {
+  height: 100%;
+}
+.drawer_placement_bottom .drawer_panel {
+  width: 100%;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.drawer_close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--bt-color-text-caption);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.drawer_close:hover {
+  background: var(--bt-color-state-hover-on-light);
+  color: var(--bt-color-text-heading);
+}
+.drawer_close:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.drawer_header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 20px 24px;
+  padding-right: 48px;
+  border-bottom: 1px solid var(--bt-color-border-subtle);
+}
+.drawer_title {
+  margin: 0;
+  color: var(--bt-color-text-heading);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.drawer_body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px;
+  color: var(--bt-color-text-body);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.drawer_footer {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid var(--bt-color-border-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+  .drawer,
+  .drawer_panel,
+  .drawer_close {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* src/ui/forms/file/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -4351,6 +4526,52 @@
   line-height: 20px;
   letter-spacing: 0px;
 }
+.table_th_checkbox,
+.table_td_checkbox {
+  box-sizing: border-box;
+  width: 48px;
+}
+.table_th_sortable {
+  padding: 0;
+}
+.table_sort_button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.1s ease-in-out;
+}
+.table_sort_button:hover:not(:disabled) {
+  background: var(--bt-color-state-hover-on-light);
+}
+.table_sort_button:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.table_sort_button:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+.table_align_center .table_sort_button {
+  justify-content: center;
+}
+.table_align_right .table_sort_button {
+  justify-content: flex-end;
+}
+.table_sort_icon {
+  flex-shrink: 0;
+  color: var(--bt-color-text-caption);
+  transition: color 0.1s ease-in-out;
+}
+.table_sort_icon_active {
+  color: var(--bt-color-text-heading);
+}
 .table_tbody .table_row {
   border-bottom: 1px solid var(--bt-color-border-default);
   transition: background-color 0.1s ease-in-out;
@@ -4374,6 +4595,12 @@
 .table_tbody .table_row_skeleton {
   pointer-events: none;
 }
+.table_tbody .table_row_selected {
+  background: var(--bt-color-accent-subtle);
+}
+.table_tbody .table_row_selected.table_row_hoverable:hover {
+  background: var(--bt-color-accent-muted);
+}
 .table_td {
   padding: 12px 16px;
   color: var(--bt-color-text-body);
@@ -4406,6 +4633,12 @@
   line-height: 18px;
   letter-spacing: 0px;
 }
+.table_size_sm .table_th_sortable {
+  padding: 0;
+}
+.table_size_sm .table_sort_button {
+  padding: 8px 12px;
+}
 .table_size_lg .table_th,
 .table_size_lg .table_td {
   padding: 16px 20px;
@@ -4422,6 +4655,12 @@
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.table_size_lg .table_th_sortable {
+  padding: 0;
+}
+.table_size_lg .table_sort_button {
+  padding: 16px 20px;
+}
 .table_sticky_header .table_thead {
   position: sticky;
   top: 0;
@@ -4436,6 +4675,13 @@
   line-height: 20px;
   letter-spacing: 0px;
 }
+@media (prefers-reduced-motion: reduce) {
+  .table_row,
+  .table_sort_button,
+  .table_sort_icon {
+    transition: none;
+  }
+}
 
 /* src/ui/forms/textfield/style.scss */
 @keyframes skeleton_loading {