@askrjs/themes 0.0.9 → 0.0.10

package/templates/theme/styles/layout/patterns.css

@@ -1,13 +1,4 @@
 :where(.empty-state, [data-slot="empty-state"]) {
-  display: grid;
-  place-items: center;
-  gap: var(--ak-space-sm);
-  min-inline-size: 0;
-  min-block-size: min(18rem, 52dvh);
-  padding: clamp(var(--ak-space-lg), 7vw, var(--ak-space-6)) var(--ak-space-4);
-  border: 1px dashed var(--ak-color-border);
-  border-radius: var(--ak-radius-lg);
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 80%, transparent);
   text-align: center;
 }
 
@@ -47,149 +38,3 @@
   flex-wrap: wrap;
   max-inline-size: 100%;
 }
-
-:where(.section-header) {
-  display: grid;
-  max-inline-size: 54rem;
-}
-
-:where(.section-header-copy) {
-  display: grid;
-  gap: 0.7rem;
-}
-
-:where(.eyebrow) {
-  margin: 0;
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-xs);
-  font-weight: var(--ak-font-weight-bold);
-  letter-spacing: 0.09em;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-:where(.section-header) :where(h1) {
-  margin: 0;
-  color: var(--ak-color-text);
-  font-size: clamp(2.4rem, 1.55rem + 2.6vw, 4rem);
-  font-weight: var(--ak-font-weight-bold);
-  letter-spacing: -0.055em;
-  line-height: 0.98;
-  text-wrap: balance;
-}
-
-:where(.section-header) :where(h2) {
-  margin: 0;
-  color: var(--ak-color-text);
-  font-size: var(--ak-type-7-size);
-  font-weight: var(--ak-font-weight-bold);
-  letter-spacing: var(--ak-type-7-letter-spacing);
-  line-height: var(--ak-type-7-line-height);
-  text-wrap: balance;
-}
-
-:where(.section-header-description) {
-  line-height: 1.68;
-}
-
-:where(.icon-badge) {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2.65rem;
-  block-size: 2.65rem;
-  border-radius: 0.9rem;
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 70%, var(--ak-color-surface));
-  color: var(--ak-color-primary);
-}
-
-:where(.site-footer) {
-  display: grid;
-  margin-top: clamp(4rem, 3rem + 2vw, 6rem);
-  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
-  padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem);
-  border-top: 1px solid
-    color-mix(in srgb, var(--ak-color-border-subtle) 78%, var(--ak-color-surface) 22%);
-  background: color-mix(in srgb, var(--ak-color-surface) 42%, transparent);
-}
-
-:where(.site-footer) > :where([data-slot="container"]) {
-  display: grid;
-  gap: clamp(1.5rem, 1rem + 1vw, 2.25rem);
-}
-
-:where(.site-footer) :where([data-slot="block"]) {
-  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
-}
-
-:where(.site-footer) :where([data-slot="block"] > *) {
-  min-width: 0;
-}
-
-:where(.site-footer) :where([data-slot="block"] > :first-child) {
-  max-width: 34rem;
-}
-
-:where(.site-footer) :where([data-slot="block"] > :first-child > p:first-child) {
-  font-size: 0.8rem;
-  letter-spacing: 0.08em;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-:where(.site-footer) :where([data-slot="block"] > :first-child > a) {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  color: var(--ak-color-text);
-  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
-  letter-spacing: -0.04em;
-  text-decoration: none;
-}
-
-:where(.site-footer) :where([data-slot="block"] > :first-child > p:last-of-type) {
-  max-inline-size: 50ch;
-}
-
-:where(.site-footer) :where([data-slot="badge"]) {
-  color: var(--ak-color-text-muted);
-}
-
-:where(.site-footer) :where(h3) {
-  margin: 0;
-  font-size: 0.92rem;
-  letter-spacing: 0.08em;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-:where(.site-footer) :where(nav a) {
-  display: block;
-  padding: 0.35rem 0;
-  color: var(--ak-color-text-muted);
-  text-decoration: none;
-  transition:
-    color var(--ak-duration-fast) var(--ak-ease-standard),
-    text-decoration-color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where(.site-footer) :where(nav a:hover) {
-  color: var(--ak-color-text);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--ak-color-primary) 32%, transparent);
-  text-underline-offset: 0.18em;
-}
-
-:where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
-  margin-top: 0.25rem;
-  font-size: 0.92rem;
-}
-
-@media (max-width: 48rem) {
-  :where(.site-footer) :where([data-slot="block"]) {
-    grid-template-columns: 1fr;
-  }
-
-  :where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
-    justify-content: flex-start;
-  }
-}

package/templates/theme/styles/navigation/nav.css

@@ -1,24 +1,7 @@
-:where(.nav, [data-slot="nav"]) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ak-space-xs);
-}
-
-:where(.nav[data-orientation="vertical"], [data-slot="nav"][data-orientation="vertical"]) {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:where(ul.nav, ul[data-slot="nav"]) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-:where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+:where(.nav-item, .navbar-item, [data-slot="nav-item"]) {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--ak-space-sm);
   min-block-size: var(--ak-density-control-height-md);
   min-inline-size: 0;
@@ -29,6 +12,7 @@
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
   overflow-wrap: anywhere;
+  text-align: center;
   text-decoration: none;
   transition:
     color var(--ak-duration-fast) var(--ak-ease-standard),
@@ -37,195 +21,161 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where(.nav[data-orientation="vertical"], [data-slot="nav"][data-orientation="vertical"])
-  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
-  inline-size: 100%;
-  justify-content: flex-start;
-}
-
-:where(
-  .nav-item:hover,
-  .navbar-item:hover,
-  [data-slot="nav-item"]:hover,
-  [data-slot="nav-link"]:hover
-) {
+:where(.nav-item:hover, .navbar-item:hover, [data-slot="nav-item"]:hover) {
   color: var(--ak-color-text);
-  background: var(--ak-color-surface-muted);
-  border-color: color-mix(in srgb, var(--ak-color-border) 78%, var(--ak-color-surface) 22%);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-accent);
+  border-color: transparent;
+  box-shadow: none;
 }
 
-:where(
-  .nav-item-icon,
-  .navbar-item-icon,
-  [data-slot="nav-item"][data-variant="icon"],
-  [data-slot="nav-link"][data-variant="icon"]
-) {
-  justify-content: center;
-  inline-size: var(--ak-density-control-height-md);
+:where([data-slot="navbar"] [data-slot="nav-item"]) {
   min-block-size: var(--ak-density-control-height-md);
-  padding-inline: 0;
-  border: 1px solid transparent;
-  color: var(--ak-color-text);
-  line-height: 1;
-}
-
-:where(
-    .nav-item-icon,
-    .navbar-item-icon,
-    [data-slot="nav-item"][data-variant="icon"],
-    [data-slot="nav-link"][data-variant="icon"]
-  )
-  > :where([data-slot="icon"], svg) {
-  flex: none;
-  color: currentColor;
-}
-
-:where(
-  .nav-item-icon:hover,
-  .navbar-item-icon:hover,
-  [data-slot="nav-item"][data-variant="icon"]:hover,
-  [data-slot="nav-link"][data-variant="icon"]:hover
-) {
+  padding-inline: var(--ak-space-md);
   border-color: transparent;
+  border-radius: var(--ak-radius-md);
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-type-2-line-height);
+  overflow-wrap: anywhere;
 }
 
-:where(
-  .nav-item-icon:active,
-  .navbar-item-icon:active,
-  [data-slot="nav-item"][data-variant="icon"]:active,
-  [data-slot="nav-link"][data-variant="icon"]:active
-) {
-  background: var(--ak-color-active);
+:where([data-slot="navbar"] [data-slot="nav-item"]:hover) {
+  color: var(--ak-color-text);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 82%, transparent);
   border-color: transparent;
+  box-shadow: none;
 }
 
 :where(
   .nav-item[aria-current="page"],
   .navbar-item[aria-current="page"],
   [data-slot="nav-item"][aria-current="page"],
-  [data-slot="nav-link"][aria-current="page"],
   .nav-item[data-active="true"],
   .navbar-item[data-active="true"],
-  [data-slot="nav-item"][data-active="true"],
-  [data-slot="nav-link"][data-active="true"]
+  [data-slot="nav-item"][data-active="true"]
 ) {
-  color: var(--ak-color-text);
-  background: var(--ak-color-selected);
-  border-color: var(--ak-color-selected-border);
-  box-shadow: var(--ak-shadow-sm);
+  color: var(--ak-color-primary-ink);
+  background: var(--ak-color-primary-soft);
+  border-color: color-mix(in srgb, var(--ak-color-primary) 16%, var(--ak-color-border));
+  box-shadow: var(--ak-shadow-xs);
 }
 
 :where(
-  .nav-item:focus-visible,
-  .navbar-item:focus-visible,
-  [data-slot="nav-item"]:focus-visible,
-  [data-slot="nav-link"]:focus-visible
+  [data-slot="navbar"] [data-slot="nav-item"][aria-current="page"],
+  [data-slot="navbar"] [data-slot="nav-item"][data-active="true"]
 ) {
-  outline: none;
-  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+  color: var(--ak-color-text);
+  background: var(--ak-color-selected);
+  border-color: var(--ak-color-selected-border);
+  box-shadow: none;
 }
 
-:where(
-  .nav-item[data-active="true"]:hover,
-  .navbar-item[data-active="true"]:hover,
-  [data-slot="nav-item"][data-active="true"]:hover,
-  [data-slot="nav-link"][data-active="true"]:hover
-) {
-  background: color-mix(in srgb, var(--ak-color-selected) 72%, var(--ak-color-surface-muted));
-  border-color: var(--ak-color-selected-border);
+:where(.nav-item:focus-visible, .navbar-item:focus-visible, [data-slot="nav-item"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"]) {
+:where(.tabs, [data-slot="tabs"]) {
+  display: flex;
+  flex-wrap: wrap;
   align-items: flex-end;
   gap: var(--ak-space-2xs, 0.125rem);
   padding-block-end: var(--ak-space-2xs, 0.125rem);
-  box-shadow: inset 0 -1px 0 var(--ak-color-border);
+  box-shadow: none;
 }
 
-:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
-  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+:where(.tab, [data-slot="tab"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
   min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
   padding-inline: var(--ak-space-md);
-  border-radius: calc(var(--ak-radius-md) + 2px) calc(var(--ak-radius-md) + 2px) 0 0;
-  border-color: transparent;
-  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
   color: var(--ak-color-text-muted);
-  box-shadow: none;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
-  :where(
-    .nav-item:hover,
-    .navbar-item:hover,
-    [data-slot="nav-item"]:hover,
-    [data-slot="nav-link"]:hover
-  ) {
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 76%, var(--ak-color-surface));
-  border-color: transparent;
-  box-shadow: none;
+:where(.tab:hover, [data-slot="tab"]:hover) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-surface-muted);
 }
 
-:where(.nav[data-variant="tabs"], [data-slot="nav"][data-variant="tabs"])
-  :where(
-    .nav-item[aria-current="page"],
-    .navbar-item[aria-current="page"],
-    [data-slot="nav-item"][aria-current="page"],
-    [data-slot="nav-link"][aria-current="page"],
-    .nav-item[data-active="true"],
-    .navbar-item[data-active="true"],
-    [data-slot="nav-item"][data-active="true"],
-    [data-slot="nav-link"][data-active="true"]
-  ) {
+:where(
+  .tab[aria-current="page"],
+  [data-slot="tab"][aria-current="page"],
+  .tab[data-active="true"],
+  [data-slot="tab"][data-active="true"]
+) {
   color: var(--ak-color-text);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 20%, var(--ak-color-surface));
+  background: var(--ak-color-bg);
   border-color: transparent;
-  box-shadow: inset 0 -2px 0 var(--ak-color-primary);
+  box-shadow: var(--ak-shadow-xs);
 }
 
-:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"]) {
+:where(.tab:focus-visible, [data-slot="tab"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+:where(.pills, [data-slot="pills"]) {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: var(--ak-space-xs);
   padding: var(--ak-space-2xs, 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--ak-color-surface-muted) 88%, var(--ak-color-surface));
+  border: 0;
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-muted);
 }
 
-:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
-  :where(.nav-item, .navbar-item, [data-slot="nav-item"], [data-slot="nav-link"]) {
+:where(.pill, [data-slot="pill"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  padding-inline: var(--ak-density-control-padding-x-sm);
+  border: 1px solid transparent;
   border-radius: 999px;
-  border-color: transparent;
-  background: transparent;
   color: var(--ak-color-text-muted);
-  box-shadow: none;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
+  text-decoration: none;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
-  :where(
-    .nav-item:hover,
-    .navbar-item:hover,
-    [data-slot="nav-item"]:hover,
-    [data-slot="nav-link"]:hover
-  ) {
-  background: color-mix(in srgb, var(--ak-color-surface) 82%, var(--ak-color-surface-muted));
+:where(.pill:hover, [data-slot="pill"]:hover) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-accent);
   border-color: transparent;
-  box-shadow: none;
 }
 
-:where(.nav[data-variant="pills"], [data-slot="nav"][data-variant="pills"])
-  :where(
-    .nav-item[aria-current="page"],
-    .navbar-item[aria-current="page"],
-    [data-slot="nav-item"][aria-current="page"],
-    [data-slot="nav-link"][aria-current="page"],
-    .nav-item[data-active="true"],
-    .navbar-item[data-active="true"],
-    [data-slot="nav-item"][data-active="true"],
-    [data-slot="nav-link"][data-active="true"]
-  ) {
+:where(
+  .pill[aria-current="page"],
+  [data-slot="pill"][aria-current="page"],
+  .pill[data-active="true"],
+  [data-slot="pill"][data-active="true"]
+) {
   color: var(--ak-color-text);
   background: var(--ak-color-selected);
   border-color: var(--ak-color-selected-border);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
+}
+
+:where(.pill:focus-visible, [data-slot="pill"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }

package/templates/theme/styles/overlays/alert-dialog.css

@@ -4,6 +4,6 @@
 */
 
 :where([data-slot="dialog-content"]) {
-  border-color: color-mix(in srgb, var(--ak-color-danger) 26%, var(--ak-color-border-subtle));
-  border-width: 2px;
+  border-color: var(--ak-color-border);
+  border-width: 1px;
 }

package/templates/theme/styles/overlays/dialog.css

@@ -42,6 +42,7 @@
   position: fixed;
   inset: 0;
   background: var(--ak-color-backdrop);
+  backdrop-filter: blur(2px);
   z-index: var(--ak-z-modal-backdrop);
   animation: ak-fade-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
@@ -51,13 +52,9 @@
   pointer-events: none;
 }
 
-:where([data-slot="dialog-content"]) {
-  --_dialog-surface: var(--ak-color-surface-overlay);
-  --_dialog-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_dialog-surface) 12%
-  );
+:where([data-slot="dialog-content"], [data-slot="sheet-content"]) {
+  --_dialog-surface: var(--ak-color-bg);
+  --_dialog-border: var(--ak-color-border);
 
   display: grid;
   gap: var(--ak-space-md);
@@ -69,10 +66,10 @@
   overflow-y: auto;
   padding: calc(var(--ak-layout-panel-padding) + 0.25rem);
   border: 1px solid var(--_dialog-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-xl);
   background: var(--_dialog-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-md);
+  box-shadow: var(--ak-shadow-lg);
   z-index: var(--ak-z-modal);
   transform-origin: center;
   animation: ak-scale-in var(--ak-duration-normal) var(--ak-ease-standard);
@@ -83,11 +80,72 @@
   pointer-events: none;
 }
 
+:where([data-slot="sheet-content"]) {
+  position: fixed;
+  inset: auto 0 0 auto;
+  inline-size: min(24rem, 100vw);
+  block-size: 100dvh;
+  max-block-size: 100dvh;
+  border-radius: 0;
+}
+
+:where([data-slot="sheet-content"][data-side="left"]) {
+  inset: 0 auto 0 0;
+  border-inline-end: 1px solid var(--_dialog-border);
+  border-inline-start: 0;
+}
+
+:where([data-slot="sheet-content"][data-side="right"]) {
+  inset: 0 0 0 auto;
+  border-inline-start: 1px solid var(--_dialog-border);
+  border-inline-end: 0;
+}
+
+:where([data-slot="sheet-content"][data-side="top"]) {
+  inset: 0 0 auto;
+  inline-size: 100vw;
+  block-size: auto;
+  max-block-size: calc(100dvh - 1rem);
+  border-block-end: 1px solid var(--_dialog-border);
+}
+
+:where([data-slot="sheet-content"][data-side="bottom"]) {
+  inset: auto 0 0;
+  inline-size: 100vw;
+  block-size: auto;
+  max-block-size: calc(100dvh - 1rem);
+  border-block-start: 1px solid var(--_dialog-border);
+}
+
+:where([data-slot="sheet-header"], [data-slot="sheet-footer"]) {
+  display: grid;
+  gap: var(--ak-space-sm);
+}
+
+:where([data-slot="sheet-footer"]) {
+  margin-block-start: var(--ak-space-sm);
+}
+
+:where([data-slot="sheet-title"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: var(--ak-line-height-tight);
+}
+
+:where([data-slot="sheet-description"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+}
+
 :where([data-slot="dialog-title"]) {
   margin: 0;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
-  font-weight: var(--ak-font-weight-bold);
+  font-weight: var(--ak-font-weight-semibold);
   line-height: var(--ak-line-height-tight);
   overflow-wrap: anywhere;
 }
@@ -104,11 +162,11 @@
   justify-content: center;
   min-height: var(--ak-density-control-height-md);
   padding: 0 var(--ak-density-control-padding-x-md);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border: 1px solid var(--ak-color-input);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: var(--ak-shadow-xs);
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
   line-height: 1;
@@ -121,28 +179,24 @@
 }
 
 :where([data-slot="dialog-close"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-accent);
+  border-color: var(--ak-color-input);
+  box-shadow: var(--ak-shadow-xs);
 }
 
 :where([data-slot="dialog-close"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--_dialog-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="dialog-close"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  color: var(--ak-color-disabled-text);
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-slot="dialog-overlay"], [data-slot="dialog-content"]) {
+  :where([data-slot="dialog-overlay"], [data-slot="dialog-content"], [data-slot="sheet-content"]) {
     animation: none;
   }
 }