@bigtablet/design-system 3.2.1 → 3.3.0

package/dist/index.css

@@ -7,7 +7,7 @@
   --bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);
   --bt-color-text-heading: #121212;
   --bt-color-text-body: #666666;
-  --bt-color-text-caption: #888888;
+  --bt-color-text-caption: #6F6F6F;
   --bt-color-text-brand: #121212;
   --bt-color-text-inverse: #FFFFFF;
   --bt-color-text-disabled: rgba(26, 26, 26, 0.38);
@@ -72,7 +72,7 @@
   -moz-osx-font-smoothing: grayscale;
   --bt-color-text-heading: rgba(255, 255, 255, 0.95);
   --bt-color-text-body: #B3B3B3;
-  --bt-color-text-caption: #777777;
+  --bt-color-text-caption: #808080;
   --bt-color-text-inverse: #121212;
   --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
   --bt-color-bg-solid: #0A0A0A;
@@ -130,7 +130,7 @@
     -moz-osx-font-smoothing: grayscale;
     --bt-color-text-heading: rgba(255, 255, 255, 0.95);
     --bt-color-text-body: #B3B3B3;
-    --bt-color-text-caption: #777777;
+    --bt-color-text-caption: #808080;
     --bt-color-text-inverse: #121212;
     --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
     --bt-color-bg-solid: #0A0A0A;
@@ -830,6 +830,11 @@
   cursor: not-allowed;
   opacity: 0.38;
 }
+@media (prefers-reduced-motion: reduce) {
+  .menu_item {
+    transition: none;
+  }
+}
 
 /* src/ui/navigation/nav-bar/style.scss */
 @keyframes skeleton_loading {
@@ -1095,6 +1100,14 @@
 .nav_bar_variant_transparent .nav_bar_indicator {
   background: var(--bt-color-brand-on-primary);
 }
+@media (prefers-reduced-motion: reduce) {
+  .nav_bar_indicator_animated {
+    transition: none;
+  }
+  .nav_bar_locale_chevron {
+    transition: none;
+  }
+}
 
 /* src/ui/navigation/sidebar/style.scss */
 @keyframes skeleton_loading {
@@ -1392,6 +1405,19 @@
     clip: auto;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .sidebar_header,
+  .sidebar_header_layer,
+  .sidebar_item,
+  .sidebar_item_label,
+  .sidebar_collapse_btn {
+    transition: none;
+  }
+  .sidebar_collapse_btn:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/navigation/tabs/style.scss */
 @keyframes skeleton_loading {
@@ -1512,6 +1538,12 @@
   box-shadow: var(--bt-focus-ring);
   border-radius: 6px;
 }
+@media (prefers-reduced-motion: reduce) {
+  .tabs_indicator_animated,
+  .tabs_tab {
+    transition: none;
+  }
+}
 
 /* src/ui/overlay/popover/style.scss */
 @keyframes skeleton_loading {
@@ -1878,6 +1910,15 @@
 .button_danger.button_variant_text:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bt-color-status-error) 8%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  .button,
+  .button::before {
+    transition: none;
+  }
+  .button:active {
+    transform: none;
+  }
+}
 
 /* src/ui/feedback/alert/style.scss */
 @keyframes skeleton_loading {
@@ -2252,6 +2293,11 @@
     transform: translate(-50%, -50%) scaleX(1);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .checkbox_icon::after {
+    animation: none;
+  }
+}
 
 /* src/ui/display/chip/style.scss */
 @keyframes skeleton_loading {
@@ -2424,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;
@@ -2753,6 +2799,11 @@
   border: none;
   margin: 0;
 }
+@media (prefers-reduced-motion: reduce) {
+  .dropdown_icon {
+    transition: none;
+  }
+}
 
 /* src/ui/forms/date-picker/style.scss */
 @keyframes skeleton_loading {
@@ -2993,6 +3044,14 @@
 .file_input_variant_preview .file_input_helper {
   display: block;
 }
+@media (prefers-reduced-motion: reduce) {
+  .file_input_preview_remove {
+    transition: none;
+  }
+  .file_input_preview_remove:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/display/hero/style.scss */
 @keyframes skeleton_loading {
@@ -3653,6 +3712,14 @@
 .media_card_image_overlay .media_card_meta {
   color: rgba(255, 255, 255, 0.6);
 }
+@media (prefers-reduced-motion: reduce) {
+  .media_card {
+    transition: none;
+  }
+  .media_card_clickable:hover {
+    transform: none;
+  }
+}
 
 /* src/ui/overlay/modal/style.scss */
 @keyframes skeleton_loading {
@@ -4090,6 +4157,11 @@
     transform: translate(-50%, -50%) scale(1);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .radio_dot::after {
+    animation: none;
+  }
+}
 
 /* src/ui/feedback/skeleton/style.scss */
 @keyframes skeleton_loading {
@@ -4150,6 +4222,11 @@
     background-position: 0 0;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
 
 /* src/ui/feedback/spinner/style.scss */
 @keyframes skeleton_loading {
@@ -4952,6 +5029,12 @@
 .toggle_disabled .toggle_thumb {
   background: var(--bt-color-brand-on-primary);
 }
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle_thumb {
+    transition: none;
+  }
+}
 
 /* src/ui/feedback/top-loading/style.scss */
 @keyframes skeleton_loading {
@@ -4988,6 +5071,14 @@
     transform: translateX(400%);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .top_loading_bar {
+    transition: none;
+  }
+  .top_loading_indeterminate {
+    animation: none;
+  }
+}
 
 /* src/ui/layout/container/style.scss */
 @keyframes skeleton_loading {