@carbon/styles 1.77.1 → 1.77.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.77.1",
+  "version": "1.77.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,12 +41,12 @@
   },
   "dependencies": {
     "@carbon/colors": "^11.30.0",
-    "@carbon/feature-flags": "^0.24.1",
-    "@carbon/grid": "^11.32.1",
-    "@carbon/layout": "^11.30.1",
+    "@carbon/feature-flags": "^0.24.0",
+    "@carbon/grid": "^11.32.2",
+    "@carbon/layout": "^11.30.2",
     "@carbon/motion": "^11.25.0",
-    "@carbon/themes": "^11.48.1",
-    "@carbon/type": "^11.36.1",
+    "@carbon/themes": "^11.48.2",
+    "@carbon/type": "^11.36.2",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
     "@ibm/plex-sans": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "538413f7766dea6ef4bc4eb5e752b0119779f10a"
+  "gitHead": "5c8f7e2a47c2bfb2865f1f2f4efe55b26f45ad5c"
 }

package/scss/_feature-flags.scss

@@ -13,7 +13,6 @@
     'enable-experimental-tile-contrast': false,
     'enable-v12-tile-radio-icons': false,
     'enable-v12-structured-list-visible-icons': false,
-    'enable-dialog-element': false,
   )
   !default
 );

package/scss/components/_index.scss

@@ -25,7 +25,6 @@
 @use 'data-table/skeleton';
 @use 'data-table/sort';
 @use 'date-picker';
-@use 'dialog';
 @use 'dropdown';
 @use 'file-uploader';
 @use 'fluid-combo-box';

package/scss/components/dialog/_dialog.scss

@@ -18,14 +18,16 @@
 @use '../../utilities/component-reset';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/z-index' as *;
 
 /// Dialog styles
 /// @access public
 /// @group dialog
 @mixin dialog {
   .#{$prefix}--dialog {
+    /* size */
     padding: 0;
-    border: none;
+    border: 1px solid $border-subtle-01;
     background-color: $layer;
     color: $text-primary;
     inline-size: 48rem;
@@ -99,6 +101,15 @@
     min-block-size: $spacing-09;
   }
 
+  .#{$prefix}--dialog__content {
+    padding: $spacing-05;
+    block-size: 100%;
+  }
+
+  .#{$prefix}--dialog--modal {
+    border: 1px solid transparent;
+  }
+
   /* Transition the :backdrop when the dialog modal is promoted to the top layer */
   .#{$prefix}--dialog::backdrop {
     background-color: $overlay;

package/scss/components/modal/_modal.scss

@@ -7,7 +7,6 @@
 
 @use '../button';
 @use '../../config' as *;
-@use '../../feature-flags' as *;
 @use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -24,57 +23,34 @@
 /// Modal styles
 /// @access public
 /// @group modal
-@mixin modal(
-  $enable-experimental-focus-wrap-without-sentinels: false,
-  $enable-dialog-element: false
-) {
+@mixin modal {
   .#{$prefix}--modal {
-    // For modals using the native dialog element, the modal visibility is handled
-    // by the Dialog styles.
-    @if not(
-      enabled('enable-experimental-focus-wrap-without-sentinels') or
-        $enable-experimental-focus-wrap-without-sentinels or
-        enabled('enable-dialog-element') or
-        $enable-dialog-element
-    )
-    {
-      position: fixed;
-      z-index: z('modal');
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: $overlay;
-      block-size: 100vh;
-      content: '';
-      inline-size: 100vw;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      opacity: 0;
+    position: fixed;
+    z-index: z('modal');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $overlay;
+    block-size: 100vh;
+    content: '';
+    inline-size: 100vw;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
+      visibility 0ms linear $duration-moderate-02;
+    visibility: hidden;
+
+    &.is-visible {
+      opacity: 1;
       transition:
-        opacity $duration-moderate-02 motion(exit, expressive),
-        visibility 0ms linear $duration-moderate-02;
-      visibility: hidden;
-    }
+        opacity $duration-moderate-02 motion(entrance, expressive),
+        visibility 0ms linear;
+      visibility: inherit;
 
-    // For modals using the native dialog element, the modal visibility is handled
-    // by the Dialog styles.
-    @if not(
-      enabled('enable-experimental-focus-wrap-without-sentinels') or
-        $enable-experimental-focus-wrap-without-sentinels or
-        enabled('enable-dialog-element') or
-        $enable-dialog-element
-    )
-    {
-      &.is-visible {
-        opacity: 1;
-        transition:
-          opacity $duration-moderate-02 motion(entrance, expressive),
-          visibility 0ms linear;
-        visibility: inherit;
-
-        @media screen and (prefers-reduced-motion: reduce) {
-          transition: none;
-        }
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
       }
     }