@askrjs/themes 0.0.1

package/templates/theme/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/templates/theme/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/templates/theme/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;
+  }
+}

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

@@ -0,0 +1,158 @@
+@layer components {
+  :where(.navbar, [data-slot="navbar"]) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ak-space-md);
+    padding-block: var(--ak-space-xs);
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-sm);
+    min-inline-size: 0;
+  }
+
+  :where(.navbar-brand, [data-slot="navbar-brand"]) :where(a) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(.navbar-group, [data-slot="navbar-group"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ak-space-md);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+
+  :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    justify-content: center;
+    margin-inline: auto;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-brand, [data-slot="navbar-brand"]) {
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+    grid-column: 2;
+    justify-self: center;
+    margin-inline: 0;
+  }
+
+  :where(.navbar, [data-slot="navbar"]):has(> [data-slot="navbar-group"][data-align="center"])
+    > :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    grid-column: 3;
+    justify-self: end;
+    margin-inline-start: 0;
+  }
+
+  :where(.navbar-item, [data-slot="nav-item"]) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 2.25rem;
+    padding-inline: var(--ak-space-sm);
+    border: 1px solid transparent;
+    border-radius: var(--ak-radius-md);
+    color: var(--ak-color-text-muted);
+    font-size: var(--ak-font-size-sm);
+    font-weight: var(--ak-font-weight-medium);
+    text-decoration: none;
+    transition:
+      color var(--ak-duration-fast) var(--ak-ease-standard),
+      background var(--ak-duration-fast) var(--ak-ease-standard);
+  }
+
+  :where(.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%, white 22%);
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"]) {
+    justify-content: center;
+    inline-size: var(--ak-density-control-height-md);
+    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(.navbar-item-icon, [data-slot="nav-item"][data-variant="icon"])
+    > :where([data-slot="icon"], svg) {
+    flex: none;
+    color: currentColor;
+  }
+
+  :where(.navbar-item-icon:hover, [data-slot="nav-item"][data-variant="icon"]:hover) {
+    border-color: transparent;
+  }
+
+  :where(.navbar-item-icon:active, [data-slot="nav-item"][data-variant="icon"]:active) {
+    background: var(--ak-color-active);
+    border-color: transparent;
+  }
+
+  :where(
+    .navbar-item[aria-current="page"],
+    [data-slot="nav-item"][aria-current="page"],
+    .navbar-item[data-active="true"],
+    [data-slot="nav-item"][data-active="true"]
+  ) {
+    color: var(--ak-color-text);
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 22%, var(--ak-color-surface));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 16%, var(--ak-color-border));
+    box-shadow: var(--ak-shadow-sm);
+  }
+
+  :where(.navbar-item:focus-visible, [data-slot="nav-item"]:focus-visible) {
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--ak-color-surface),
+      0 0 0 4px var(--ak-color-focus-ring);
+  }
+
+  :where(.navbar-item[data-active="true"]:hover, [data-slot="nav-item"][data-active="true"]:hover) {
+    background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface-muted));
+    border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border-strong));
+  }
+
+  :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+    margin-inline-start: auto;
+    justify-content: flex-end;
+  }
+  @media (max-width: 48rem) {
+    :where(.navbar, [data-slot="navbar"]) {
+      display: flex;
+      align-items: stretch;
+      flex-wrap: wrap;
+    }
+
+    :where(.navbar-group, [data-slot="navbar-group"]) {
+      inline-size: 100%;
+    }
+
+    :where(.navbar-group[data-align="center"], [data-slot="navbar-group"][data-align="center"]) {
+      justify-content: flex-start;
+      margin-inline: 0;
+    }
+
+    :where(.navbar-group[data-align="end"], [data-slot="navbar-group"][data-align="end"]) {
+      justify-content: flex-start;
+      margin-inline-start: 0;
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+:where([data-slot="theme-provider"]) {
+  min-block-size: 100vh;
+  color: var(--ak-color-text);
+  background: var(--ak-color-bg);
+}
+
+:where(html) {
+  background: var(--ak-color-bg);
+}
+
+:where(body) {
+  background: transparent;
+}
+
+:where([data-slot="theme-picker"]) {
+  display: inline-flex;
+  min-height: 2.5rem;
+  min-width: 8rem;
+  padding-inline: 0.85rem 2.1rem;
+  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);
+  font: inherit;
+  font-size: var(--ak-font-size-sm);
+  line-height: 1;
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="theme-picker"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--ak-color-surface),
+    0 0 0 4px var(--ak-color-focus-ring);
+}