@askrjs/themes 0.0.8 → 0.0.10

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

@@ -7,8 +7,8 @@
   inset-block-end: max(1rem, env(safe-area-inset-bottom));
   inset-inline-end: max(1rem, env(safe-area-inset-right));
   display: grid;
-  gap: var(--ak-space-md);
-  width: min(27rem, calc(100vw - 2rem));
+  gap: var(--ak-space-sm);
+  width: min(22.5rem, calc(100vw - 2rem));
   z-index: var(--ak-z-toast);
 }
 
@@ -35,16 +35,20 @@
 }
 
 :where([data-slot="toast"]) {
-  --_toast-surface: var(--ak-color-surface-overlay);
-  --_toast-border: color-mix(in srgb, var(--ak-color-border-subtle) 88%, var(--_toast-surface) 12%);
+  --_toast-surface: var(--ak-color-popover);
+  --_toast-border: var(--ak-color-border);
+  --_toast-accent: var(--ak-color-border-strong);
 
   display: grid;
-  gap: var(--ak-space-sm);
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.125rem 0.75rem;
+  position: relative;
   box-sizing: border-box;
   min-inline-size: 0;
-  padding: calc(var(--ak-layout-panel-padding) - 0.15rem) var(--ak-layout-panel-padding);
+  padding: 0.875rem;
   border: 1px solid var(--_toast-border);
-  border-radius: var(--ak-radius-lg);
+  border-radius: var(--ak-radius-xl);
   background: var(--_toast-surface);
   color: var(--ak-color-text);
   box-shadow: var(--ak-shadow-md);
@@ -52,30 +56,61 @@
   animation: ak-toast-in var(--ak-duration-normal) var(--ak-ease-standard);
 }
 
+:where([data-slot="toast"]:has([data-slot="toast-icon"])) {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
 :where([data-slot="toast"][data-state="closed"]) {
   animation: ak-toast-out var(--ak-duration-fast) var(--ak-ease-standard);
   pointer-events: none;
 }
 
 :where([data-slot="toast-title"]) {
-  font-weight: var(--ak-font-weight-bold);
-  line-height: var(--ak-line-height-tight);
-  letter-spacing: -0.005em;
+  grid-column: 1;
+  grid-row: 1;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1.3;
+  letter-spacing: 0;
   overflow-wrap: anywhere;
 }
 
 :where([data-slot="toast-description"]) {
+  grid-column: 1;
+  grid-row: 2;
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-sm);
-  line-height: var(--ak-line-height-normal);
+  line-height: 1.4;
   overflow-wrap: anywhere;
 }
 
+:where([data-slot="toast"]:has([data-slot="toast-icon"]) [data-slot="toast-title"]),
+:where([data-slot="toast"]:has([data-slot="toast-icon"]) [data-slot="toast-description"]) {
+  grid-column: 2;
+}
+
+:where([data-slot="toast-icon"]) {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border-radius: var(--ak-radius-round);
+  background: color-mix(in srgb, var(--_toast-accent) 12%, var(--_toast-surface));
+  color: var(--_toast-accent);
+}
+
+:where([data-slot="toast-icon"] > :where([data-slot="icon"], svg)) {
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
+}
+
 :where([data-slot="toast-action"]),
 :where([data-slot="toast-close"]) {
   --_button-height: var(--ak-density-control-height-sm);
   --_button-padding-x: var(--ak-density-control-padding-x-sm);
-  --_button-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--_toast-surface) 16%);
+  --_button-border: var(--ak-color-input);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -85,11 +120,11 @@
   padding-inline: var(--_button-padding-x);
   border: 1px solid var(--_button-border);
   border-radius: var(--ak-radius-md);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--_toast-surface));
-  color: var(--ak-color-text);
+  background: var(--ak-color-primary);
+  color: var(--ak-color-text-inverse);
   box-shadow: none;
   font-size: var(--ak-font-size-xs);
-  font-weight: var(--ak-font-weight-semibold);
+  font-weight: var(--ak-font-weight-medium);
   line-height: 1;
   cursor: pointer;
   transition:
@@ -100,62 +135,74 @@
 
 :where([data-slot="toast-action"]:hover),
 :where([data-slot="toast-close"]:hover) {
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface-muted));
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-primary-hover);
+  border-color: transparent;
+  box-shadow: none;
 }
 
 :where([data-slot="toast-action"]:focus-visible),
 :where([data-slot="toast-close"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--_toast-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="toast-close"]) {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+  margin-block-start: -0.3125rem;
+  margin-inline-end: -0.3125rem;
   gap: 0;
   inline-size: var(--_button-height);
   padding-inline: 0;
   border-color: transparent;
   border-radius: var(--ak-radius-round);
   background: transparent;
+  color: var(--ak-color-text-subtle);
+}
+
+:where([data-slot="toast"]:has([data-slot="toast-icon"]) [data-slot="toast-close"]) {
+  grid-column: 3;
+}
+
+:where([data-slot="toast-close"] > :where([data-slot="icon"], svg)) {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
 }
 
 :where([data-slot="toast-close"]:hover) {
-  background: var(--ak-color-hover);
+  background: var(--ak-color-accent);
   border-color: transparent;
   box-shadow: none;
 }
 
 :where([data-slot="toast-action"][data-disabled]),
 :where([data-slot="toast-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;
 }
 
 /* toast variants */
 :where([data-slot="toast"][data-variant="success"]) {
-  background: color-mix(in srgb, var(--ak-color-success-soft) 76%, var(--_toast-surface));
-  border-color: color-mix(in srgb, var(--ak-color-success) 62%, var(--_toast-border));
+  --_toast-accent: var(--ak-color-success);
+  border-color: color-mix(in srgb, var(--ak-color-success) 18%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="warning"]) {
-  background: color-mix(in srgb, var(--ak-color-warning-soft) 76%, var(--_toast-surface));
-  border-color: color-mix(in srgb, var(--ak-color-warning) 62%, var(--_toast-border));
+  --_toast-accent: var(--ak-color-warning);
+  border-color: color-mix(in srgb, var(--ak-color-warning) 28%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="danger"]) {
-  background: color-mix(in srgb, var(--ak-color-danger-soft) 76%, var(--_toast-surface));
-  border-color: color-mix(in srgb, var(--ak-color-danger) 62%, var(--_toast-border));
+  --_toast-accent: var(--ak-color-danger);
+  border-color: color-mix(in srgb, var(--ak-color-danger) 28%, var(--_toast-border));
 }
 
 :where([data-slot="toast"][data-variant="info"]) {
-  background: color-mix(in srgb, var(--ak-color-info-soft) 76%, var(--_toast-surface));
-  border-color: color-mix(in srgb, var(--ak-color-info) 62%, var(--_toast-border));
+  --_toast-accent: var(--ak-color-info);
+  border-color: color-mix(in srgb, var(--ak-color-info) 28%, var(--_toast-border));
 }
 
 @media (max-width: 40rem) {

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

@@ -21,12 +21,8 @@
 }
 
 :where([data-slot="tooltip-content"]) {
-  --_tooltip-surface: var(--ak-color-surface-overlay);
-  --_tooltip-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_tooltip-surface) 12%
-  );
+  --_tooltip-surface: var(--ak-color-primary);
+  --_tooltip-border: var(--ak-color-primary);
 
   position: relative;
   box-sizing: border-box;
@@ -36,11 +32,11 @@
   border: 1px solid var(--_tooltip-border);
   border-radius: var(--ak-radius-md);
   background: var(--_tooltip-surface);
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  line-height: var(--ak-line-height-normal);
+  color: var(--ak-color-text-inverse);
+  font-size: var(--ak-font-size-xs);
+  line-height: 1.25;
   overflow-wrap: anywhere;
-  box-shadow: var(--ak-shadow-md);
+  box-shadow: none;
   z-index: var(--ak-z-tooltip);
   transform-origin: bottom center;
   animation: ak-tooltip-in var(--ak-duration-fast) var(--ak-ease-standard);
@@ -86,11 +82,87 @@
   pointer-events: none;
 }
 
+:where([data-tooltip]:not([data-tooltip=""])) {
+  position: relative;
+}
+
+:where([data-tooltip]:not([data-tooltip=""]))::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  display: none;
+  inset-inline-start: 50%;
+  inset-block-end: calc(100% + var(--ak-space-xs));
+  z-index: var(--ak-z-tooltip);
+  box-sizing: border-box;
+  max-inline-size: min(18rem, calc(100vw - 1rem));
+  inline-size: max-content;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--ak-color-primary);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-primary);
+  color: var(--ak-color-text-inverse);
+  box-shadow: none;
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transform: translate(-50%, 0.125rem);
+  transition:
+    opacity var(--ak-duration-fast) var(--ak-ease-standard),
+    transform var(--ak-duration-fast) var(--ak-ease-standard),
+    visibility var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-tooltip][data-tooltip-side="right"]:not([data-tooltip=""]))::after {
+  inset-block-start: 50%;
+  inset-block-end: auto;
+  inset-inline-start: calc(100% + var(--ak-space-xs));
+  transform: translate(-0.125rem, -50%);
+}
+
+:where([data-tooltip][data-tooltip-side="bottom"]:not([data-tooltip=""]))::after {
+  inset-block-start: calc(100% + var(--ak-space-xs));
+  inset-block-end: auto;
+  transform: translate(-50%, -0.125rem);
+}
+
+:where([data-tooltip][data-tooltip-side="left"]:not([data-tooltip=""]))::after {
+  inset-block-start: 50%;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: calc(100% + var(--ak-space-xs));
+  transform: translate(0.125rem, -50%);
+}
+
+:where([data-tooltip]:not([data-tooltip=""]):hover)::after,
+:where([data-tooltip]:not([data-tooltip=""]):focus-visible)::after {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+:where([data-tooltip][data-tooltip-side="bottom"]:not([data-tooltip=""]):hover)::after,
+:where([data-tooltip][data-tooltip-side="bottom"]:not([data-tooltip=""]):focus-visible)::after {
+  transform: translate(-50%, 0);
+}
+
+:where([data-tooltip][data-tooltip-side="right"]:not([data-tooltip=""]):hover)::after,
+:where([data-tooltip][data-tooltip-side="right"]:not([data-tooltip=""]):focus-visible)::after {
+  transform: translate(0, -50%);
+}
+
+:where([data-tooltip][data-tooltip-side="left"]:not([data-tooltip=""]):hover)::after,
+:where([data-tooltip][data-tooltip-side="left"]:not([data-tooltip=""]):focus-visible)::after {
+  transform: translate(0, -50%);
+}
+
 :where([data-slot="tooltip-trigger"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-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="tooltip-trigger"][data-state="open"]) {
@@ -104,7 +176,9 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-slot="tooltip-content"]) {
+  :where([data-slot="tooltip-content"]),
+  :where([data-tooltip]:not([data-tooltip=""]))::after {
     animation: none;
+    transition: none;
   }
 }

package/templates/theme/styles/shell/brand.css

@@ -0,0 +1,48 @@
+:where([data-slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  min-block-size: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  color: inherit;
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: var(--ak-line-height-tight);
+  text-decoration: none;
+}
+
+:where([data-slot="brand"]:hover) {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where([data-slot="brand-mark"]) {
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-primary);
+  color: var(--ak-color-text-inverse);
+  box-shadow: var(--ak-shadow-xs);
+}
+
+:where([data-slot="brand-label"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 40rem) {
+  :where(
+    [data-slot="nav-brand"]
+      [data-slot="brand"]:has(> [data-slot="brand-mark"])
+      > [data-slot="brand-label"]
+  ) {
+    display: none;
+  }
+}

package/templates/theme/styles/shell/footer.css

@@ -0,0 +1,72 @@
+:where([data-slot="footer"]) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="footer-content"]) {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(10rem, 0.8fr));
+  gap: var(--ak-space-2xl);
+  align-items: start;
+}
+
+:where([data-slot="footer-section"]) {
+  display: grid;
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+}
+
+:where([data-slot="footer"] [data-slot="brand"]) {
+  min-block-size: auto;
+  align-items: flex-start;
+}
+
+:where([data-slot="footer-title"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: var(--ak-type-2-line-height);
+}
+
+:where([data-slot="footer-description"]) {
+  max-inline-size: 34rem;
+  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="footer-links"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  align-content: start;
+}
+
+:where([data-slot="footer-link"]) {
+  inline-size: fit-content;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-type-2-line-height);
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+  transition: color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="footer-link"]:hover) {
+  color: var(--ak-color-text);
+  text-decoration: underline;
+}
+
+:where([data-slot="footer-link"]:focus-visible) {
+  outline: none;
+  border-radius: var(--ak-radius-sm);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+@media (max-width: 48rem) {
+  :where([data-slot="footer-content"]) {
+    grid-template-columns: 1fr;
+    gap: var(--ak-space-xl);
+  }
+}

package/templates/theme/styles/shell/header.css

@@ -1,51 +1,8 @@
-@layer components {
-  :where(.header, [data-slot="header"]) {
-    position: relative;
-    z-index: var(--ak-z-sticky);
-    display: flex;
-    align-items: center;
-    min-inline-size: 0;
-    padding-block: var(--ak-space-xs);
-    border-block-end: 1px solid
-      color-mix(in srgb, var(--ak-color-border) 88%, var(--ak-color-surface) 12%);
-    background: color-mix(in srgb, var(--ak-color-surface) 90%, transparent);
-    backdrop-filter: saturate(180%) blur(14px);
-    box-shadow: none;
-  }
-
-  :where(.header, [data-slot="header"]) > :where([data-slot="container"]) {
-    inline-size: 100%;
-    min-inline-size: 0;
-  }
-
-  :where(.header, [data-slot="header"]) :where(.navbar-brand, [data-slot="navbar-brand"]) {
-    min-block-size: var(--ak-density-control-height-md);
-  }
-
-  :where(.header, [data-slot="header"])[data-position="static"] {
-    position: static;
-  }
-
-  :where(.header, [data-slot="header"])[data-position="relative"] {
-    position: relative;
-  }
-
-  :where(.header, [data-slot="header"])[data-position="sticky"] {
-    position: sticky;
-    inset-block-start: 0;
-  }
-
-  :where(.header, [data-slot="header"])[data-position="absolute"],
-  :where(.header, [data-slot="header"])[data-position="fixed"] {
-    inset-block-start: 0;
-    inset-inline: 0;
-  }
-
-  :where(.header, [data-slot="header"])[data-position="absolute"] {
-    position: absolute;
-  }
-
-  :where(.header, [data-slot="header"])[data-position="fixed"] {
-    position: fixed;
-  }
+:where([data-slot="header"]) {
+  border-block-end: 1px solid var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-bg) 92%, transparent);
+  color: var(--ak-color-text);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--ak-color-border) 72%, transparent);
 }