@carbon/styles 1.90.0 → 1.91.0-rc.0

package/css/styles.css

@@ -5211,6 +5211,13 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-inline-end: 0.5rem;
 }
 
+:host([slot=label-text]) .cds--toggletip-label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+}
+
 .cds--toggletip-button {
   box-sizing: border-box;
   padding: 0;
@@ -15629,11 +15636,6 @@ th .cds--table-sort__flex {
   /* Needs to be after the previous dialog[open] rule to take effect,
   as the specificity is the same */
 }
-@media (prefers-reduced-motion) {
-  .cds--dialog {
-    transition: none;
-  }
-}
 @media (min-width: 42rem) {
   .cds--dialog {
     max-inline-size: 84%;
@@ -15649,6 +15651,11 @@ th .cds--table-sort__flex {
     max-inline-size: 48%;
   }
 }
+@media (prefers-reduced-motion) {
+  .cds--dialog {
+    transition: none;
+  }
+}
 .cds--dialog[open] {
   opacity: 1;
   transform: translateY(0);
@@ -15676,10 +15683,13 @@ th .cds--table-sort__flex {
   padding-inline: 1rem 3rem;
 }
 
-/* Transition the :backdrop when the dialog modal is promoted to the top layer */
 .cds--dialog::backdrop {
   background-color: var(--cds-overlay, rgba(22, 22, 22, 0.5));
   opacity: 0;
+}
+
+/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+.cds--dialog::backdrop {
   /* opening and closing is used in as allow-discrete is not currently supported wide enough
    * https://caniuse.com/mdn-css_properties_display_is_transitionable
    */
@@ -20442,17 +20452,51 @@ optgroup.cds--select-optgroup:disabled,
   inline-size: 100vw;
   inset-block-start: 0;
   inset-inline-start: 0;
+}
+.cds--modal.cds--modal--enable-presence {
+  animation: cds--presence-modal__enter 240ms cubic-bezier(0, 0, 0.3, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal.cds--modal--enable-presence {
+    animation: none;
+  }
+}
+.cds--modal.cds--modal--enable-presence[data-exiting] {
+  animation: cds--presence-modal__exit 240ms cubic-bezier(0.4, 0.14, 1, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal.cds--modal--enable-presence[data-exiting] {
+    animation: none;
+  }
+}
+@keyframes cds--presence-modal__enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes cds--presence-modal__exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.cds--modal:not(.cds--modal--enable-presence) {
   opacity: 0;
   transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
   visibility: hidden;
 }
-.cds--modal.is-visible {
+.cds--modal:not(.cds--modal--enable-presence).is-visible {
   opacity: 1;
   transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
   visibility: inherit;
 }
 @media screen and (prefers-reduced-motion: reduce) {
-  .cds--modal.is-visible {
+  .cds--modal:not(.cds--modal--enable-presence).is-visible {
     transition: none;
   }
 }
@@ -20492,10 +20536,47 @@ optgroup.cds--select-optgroup:disabled,
   border-inline-start: 2px solid var(--cds-focus, #0f62fe);
 }
 
-.cds--modal.is-visible .cds--modal-container {
+.cds--modal--enable-presence[data-exiting] .cds--modal-container {
+  animation: cds--presence-modal-container__exit 240ms cubic-bezier(0.4, 0.14, 1, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal--enable-presence[data-exiting] .cds--modal-container {
+    animation: none;
+  }
+}
+.cds--modal--enable-presence .cds--modal-container {
+  animation: cds--presence-modal-container__enter 240ms cubic-bezier(0, 0, 0.3, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal--enable-presence .cds--modal-container {
+    animation: none;
+  }
+}
+@keyframes cds--presence-modal-container__enter {
+  from {
+    transform: translate3d(0, -24px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes cds--presence-modal-container__exit {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, -24px, 0);
+  }
+}
+
+:not(.cds--modal--enable-presence).is-visible .cds--modal-container {
   transform: translate3d(0, 0, 0);
   transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
 }
+:not(.cds--modal--enable-presence) .cds--modal-container {
+  transform: translate3d(0, -24px, 0);
+  transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
 
 .cds--modal-container {
   position: fixed;
@@ -20509,13 +20590,11 @@ optgroup.cds--select-optgroup:disabled,
   max-block-size: 100%;
   outline: 3px solid transparent;
   outline-offset: -3px;
-  transform: translate3d(0, -24px, 0);
   transform-origin: top center;
-  transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 @media (min-width: 42rem) {
   .cds--modal-container {
-    position: static;
+    position: relative;
     block-size: auto;
     inline-size: 84%;
     max-block-size: 90%;
@@ -25866,7 +25945,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   background-color: transparent;
 }
 .cds--toggle--readonly .cds--toggle__switch::before {
-  background-color: var(--cds-text-primary, #161616);
+  background-color: var(--cds-icon-primary, #161616);
   inset-block-start: 0.125rem;
   inset-inline-start: 0.125rem;
 }