@askrjs/themes 0.0.1

package/src/themes/default/styles/overlays/dialog.css

@@ -0,0 +1,116 @@
+@keyframes ak-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ak-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ak-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ak-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+:where([data-slot="dialog-overlay"]) {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--ak-color-backdrop) 96%, black 4%);
+  animation: ak-fade-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="dialog-overlay"][data-state="closed"]) {
+  animation: ak-fade-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="dialog-content"]) {
+  display: grid;
+  gap: var(--ak-space-sm);
+  min-width: min(34rem, calc(100vw - 1.5rem));
+  max-width: 40rem;
+  max-block-size: calc(100dvh - 4rem);
+  overflow-y: auto;
+  padding: calc(var(--ak-layout-panel-padding) + 0.25rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 88%, white 12%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-scale-in var(--ak-duration-normal) var(--ak-ease-standard);
+}
+
+:where([data-slot="dialog-content"][data-state="closed"]) {
+  animation: ak-scale-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+: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);
+  line-height: var(--ak-line-height-tight);
+}
+
+:where([data-slot="dialog-description"]) {
+  margin: var(--ak-space-sm) 0 0;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="dialog-close"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition:
+    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([data-slot="dialog-close"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+: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);
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/src/themes/default/styles/overlays/dropdown-menu.css

@@ -0,0 +1,109 @@
+[data-slot="dropdown-menu-trigger"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition:
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="dropdown-menu-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="dropdown-menu-trigger"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+@keyframes ak-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-menu-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+[data-slot="dropdown-menu-content"] {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 12rem;
+  max-block-size: min(20rem, calc(100vh - 4rem));
+  overflow-y: auto;
+  padding: var(--ak-space-sm);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="dropdown-menu-content"][data-state="closed"] {
+  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="dropdown-menu-item"] {
+  display: flex;
+  align-items: center;
+  min-height: 2.25rem;
+  padding: 0 var(--ak-space-sm);
+  border: 0;
+  border-radius: var(--ak-radius-sm);
+  background: transparent;
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="dropdown-menu-item"]:hover {
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="dropdown-menu-item"]:focus-visible {
+  outline: none;
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="dropdown-menu-item"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="dropdown-menu-label"] {
+  padding: 0 var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+[data-slot="dropdown-menu-separator"] {
+  block-size: 1px;
+  margin: 0.25rem 0;
+  background: var(--ak-color-border);
+}

package/src/themes/default/styles/overlays/hover-card.css

@@ -0,0 +1,46 @@
+@keyframes ak-hover-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ak-hover-card-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+}
+
+:where([data-slot="hover-card-trigger"]) {
+  cursor: pointer;
+}
+
+:where([data-slot="hover-card-trigger"][data-disabled]) {
+  cursor: not-allowed;
+}
+
+:where([data-slot="hover-card-content"]) {
+  min-width: 14rem;
+  padding: calc(var(--ak-space-md) + 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-hover-card-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="hover-card-content"][data-state="closed"]) {
+  animation: ak-hover-card-out var(--ak-duration-fast) var(--ak-ease-standard);
+}

package/src/themes/default/styles/overlays/popover.css

@@ -0,0 +1,72 @@
+@keyframes ak-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="popover-content"]) {
+  min-width: 14rem;
+  padding: calc(var(--ak-space-md) + 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 84%, white 16%);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-slide-up var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="popover-content"][data-state="closed"]) {
+  animation: ak-slide-up-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="popover-trigger"][data-state="open"]) {
+  border-color: var(--ak-color-primary);
+}
+
+:where([data-slot="popover-close"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition:
+    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([data-slot="popover-close"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="popover-close"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/src/themes/default/styles/overlays/toast.css

@@ -0,0 +1,123 @@
+:where([data-slot="toast-provider"]) {
+  display: contents;
+}
+
+:where([data-slot="toast-viewport"]) {
+  position: fixed;
+  inset-block-end: 1rem;
+  inset-inline-end: 1rem;
+  display: grid;
+  gap: var(--ak-space-md);
+  width: min(27rem, calc(100vw - 2rem));
+  z-index: var(--ak-z-toast);
+}
+
+@keyframes ak-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ak-toast-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+:where([data-slot="toast"]) {
+  display: grid;
+  gap: var(--ak-space-sm);
+  padding: calc(var(--ak-layout-panel-padding) - 0.15rem) var(--ak-layout-panel-padding);
+  border: 1px solid var(--ak-color-border-subtle);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-toast-in var(--ak-duration-normal) var(--ak-ease-standard);
+}
+
+:where([data-slot="toast"][data-state="closed"]) {
+  animation: ak-toast-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="toast-title"]) {
+  font-weight: var(--ak-font-weight-bold);
+  line-height: var(--ak-line-height-tight);
+}
+
+:where([data-slot="toast-description"]) {
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where([data-slot="toast-action"]),
+:where([data-slot="toast-close"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  padding: 0 var(--ak-space-md);
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  color: var(--ak-color-text);
+  cursor: pointer;
+  transition:
+    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([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);
+}
+
+: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);
+  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) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-success);
+}
+
+:where([data-slot="toast"][data-variant="warning"]) {
+  background: color-mix(in srgb, var(--ak-color-warning-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-warning);
+}
+
+:where([data-slot="toast"][data-variant="danger"]) {
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-danger);
+}
+
+:where([data-slot="toast"][data-variant="info"]) {
+  background: color-mix(in srgb, var(--ak-color-info-soft) 78%, var(--ak-color-surface-raised));
+  border-color: var(--ak-color-info);
+}
+
+@media (max-width: 40rem) {
+  :where([data-slot="toast-viewport"]) {
+    inset-inline: 1rem;
+    width: auto;
+  }
+}

package/src/themes/default/styles/overlays/tooltip.css

@@ -0,0 +1,83 @@
+@keyframes ak-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-tooltip-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+
+[data-slot="tooltip-content"] {
+  position: relative;
+  max-width: 18rem;
+  padding: 0.45rem 0.65rem;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 48%, transparent);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-text);
+  color: var(--ak-color-text-inverse);
+  font-size: var(--ak-font-size-sm);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-tooltip-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="tooltip-content"]::before {
+  content: "";
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  border-inline-start: 0.38rem solid transparent;
+  border-inline-end: 0.38rem solid transparent;
+  border-block-start: 0.38rem solid var(--ak-color-text);
+}
+
+[data-slot="tooltip-content"]:not([data-side])::before,
+[data-slot="tooltip-content"][data-side="top"]::before {
+  inset-block-end: -0.3rem;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+[data-slot="tooltip-content"][data-side="bottom"]::before {
+  inset-block-start: -0.3rem;
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(180deg);
+}
+
+[data-slot="tooltip-content"][data-side="left"]::before {
+  inset-inline-end: -0.3rem;
+  inset-block-start: 50%;
+  transform: translateY(-50%) rotate(90deg);
+}
+
+[data-slot="tooltip-content"][data-side="right"]::before {
+  inset-inline-start: -0.3rem;
+  inset-block-start: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+}
+
+[data-slot="tooltip-content"][data-state="closed"] {
+  animation: ak-tooltip-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="tooltip-trigger"][data-state="open"] {
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="tooltip-trigger"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/themes/default/styles/shell/header.css

@@ -0,0 +1,36 @@
+@layer components {
+  :where(.header, [data-slot="header"]) {
+    position: relative;
+    z-index: var(--ak-z-sticky);
+    border-block-end: 1px solid color-mix(in srgb, var(--ak-color-border) 88%, white 12%);
+    background: color-mix(in srgb, var(--ak-color-surface) 96%, transparent);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.34) inset;
+  }
+
+  :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;
+  }
+}