@askrjs/themes 0.0.1

package/templates/theme/styles/forms/select.css

@@ -0,0 +1,143 @@
+:where([data-slot="select-trigger"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ak-space-sm);
+  min-height: 2.875rem;
+  min-width: 12rem;
+  width: 100%;
+  padding: 0 calc(var(--ak-space-lg) + 0.125rem);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 82%, white);
+  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="select-trigger"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+}
+
+:where([data-slot="select-trigger"]:focus-visible) {
+  outline: none;
+  border-color: var(--ak-color-primary);
+  box-shadow:
+    0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+}
+
+:where([data-slot="select-trigger"][data-state="open"]) {
+  border-color: var(--ak-color-primary);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
+  box-shadow:
+    0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+}
+
+:where([data-slot="select-trigger"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="select-value"][data-placeholder]) {
+  color: var(--ak-color-text-subtle);
+}
+
+@keyframes ak-select-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ak-select-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+:where([data-slot="select-content"]) {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 12rem;
+  max-block-size: min(20rem, calc(100vh - 4rem));
+  overflow-y: auto;
+  padding: calc(var(--ak-space-sm) + 0.125rem);
+  border: 1px solid var(--ak-color-border-subtle);
+  border-radius: var(--ak-radius-lg);
+  background: var(--ak-color-surface-raised);
+  box-shadow: var(--ak-shadow-md);
+  animation: ak-select-in var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="select-content"][data-state="closed"]) {
+  animation: ak-select-out var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="select-item"]) {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  padding: 0 calc(var(--ak-space-md) + 0.125rem);
+  border-radius: var(--ak-radius-md);
+  color: var(--ak-color-text);
+  cursor: pointer;
+  font-weight: var(--ak-font-weight-medium);
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="select-item"][data-state="checked"]) {
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+:where([data-slot="select-item"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 68%, var(--ak-color-surface));
+}
+
+:where([data-slot="select-item"]:focus-visible) {
+  outline: none;
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 32%, var(--ak-color-surface));
+}
+
+:where([data-slot="select-item"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="select-label"]) {
+  padding: 0 var(--ak-space-md);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+:where([data-slot="select-separator"]) {
+  block-size: 1px;
+  background: var(--ak-color-border);
+  margin: 0.25rem 0;
+}

package/templates/theme/styles/forms/slider.css

@@ -0,0 +1,75 @@
+[data-slot="slider"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 1.5rem;
+}
+
+[data-slot="slider"][data-orientation="vertical"] {
+  min-height: 10rem;
+  min-width: 1.5rem;
+}
+
+[data-slot="slider-track"] {
+  position: relative;
+  flex: 1;
+  block-size: 0.375rem;
+  border-radius: 999px;
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="slider-track"][data-orientation="vertical"] {
+  inline-size: 0.375rem;
+  block-size: 100%;
+}
+
+[data-slot="slider-range"] {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: var(--ak-slider-percentage);
+  border-radius: 999px;
+  background: var(--ak-color-primary);
+  opacity: 0.85;
+}
+
+[data-slot="slider-range"][data-orientation="vertical"] {
+  inset-block-end: 0;
+  inset-block-start: auto;
+  inline-size: 100%;
+  block-size: var(--ak-slider-percentage);
+}
+
+[data-slot="slider-thumb"] {
+  position: absolute;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border: 2px solid var(--ak-color-primary);
+  border-radius: 999px;
+  background: var(--ak-color-surface);
+  box-shadow: var(--ak-shadow-sm);
+  transition: box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="slider-thumb"][data-orientation="horizontal"] {
+  inset-inline-start: calc(var(--ak-slider-percentage) - 0.5rem);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+[data-slot="slider-thumb"][data-orientation="vertical"] {
+  inset-inline-start: 50%;
+  inset-block-end: calc(var(--ak-slider-percentage) - 0.5rem);
+  transform: translateX(-50%);
+}
+
+[data-slot="slider-thumb"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="slider"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/templates/theme/styles/forms/switch.css

@@ -0,0 +1,70 @@
+:where([data-slot="switch"]) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  inline-size: 3.3rem;
+  block-size: 2rem;
+  padding: 0.2rem;
+  border: 1px solid var(--ak-color-border-strong);
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-surface-muted);
+  box-shadow: var(--ak-shadow-sm);
+  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),
+    transform var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="switch"])::after {
+  content: "";
+  display: block;
+  inline-size: 1.45rem;
+  block-size: 1.45rem;
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-surface);
+  box-shadow: var(--ak-shadow-sm);
+  transition:
+    transform var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="switch"][data-state="checked"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 42%, var(--ak-color-primary));
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 42%, var(--ak-color-primary));
+}
+
+:where([data-slot="switch"][data-state="checked"])::after {
+  transform: translateX(1.275rem);
+}
+
+:where([data-slot="switch"]:hover) {
+  border-color: var(--ak-color-border-strong);
+  box-shadow:
+    var(--ak-shadow-sm),
+    0 0 0 4px color-mix(in srgb, var(--ak-color-primary-soft) 56%, transparent);
+}
+
+:where([data-slot="switch"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+}
+
+:where([data-slot="switch"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  opacity: 1;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+:where([data-slot="switch"][data-disabled])::after {
+  background: var(--ak-color-disabled-bg);
+  box-shadow: none;
+}

package/templates/theme/styles/forms/textarea.css

@@ -0,0 +1,37 @@
+:where(.textarea, [data-slot="textarea"]) {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 7rem;
+  padding: var(--ak-space-sm) var(--ak-space-md);
+  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-size: var(--ak-font-size-sm);
+  resize: vertical;
+  box-shadow: var(--ak-shadow-sm);
+  transition:
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.textarea, [data-slot="textarea"])::placeholder {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.textarea:hover, [data-slot="textarea"]:hover) {
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.textarea:focus-visible, [data-slot="textarea"]:focus-visible) {
+  outline: none;
+  border-color: var(--ak-color-primary);
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+:where(.textarea[data-disabled], .textarea:disabled, [data-slot="textarea"][data-disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/templates/theme/styles/layout/aspect-ratio.css

@@ -0,0 +1,5 @@
+:where([data-slot="aspect-ratio"]) {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}

package/templates/theme/styles/layout/dashboard-layout.css

@@ -0,0 +1,16 @@
+/* __THEME_NAME__ theme dashboard-layout styles (public data-* contract only) */
+[data-slot="container"] {
+  max-inline-size: var(--ak-layout-content-max-width);
+}
+
+[data-slot="grid"] {
+  gap: var(--ak-space-md);
+}
+
+[data-slot="grid"][data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+[data-slot="grid"][data-columns="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}

package/templates/theme/styles/layout/docs-layout.css

@@ -0,0 +1,11 @@
+/* __THEME_NAME__ theme docs-layout styles (public data-* contract only) */
+[data-slot="sidebar-layout"] > [data-slot="sidebar"] {
+  position: sticky;
+  inset-block-start: 0;
+  block-size: 100vh;
+  overflow: auto;
+}
+
+[data-slot="sidebar-layout"] > [data-slot="main"] {
+  max-inline-size: var(--ak-layout-content-max-width);
+}

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

@@ -0,0 +1 @@
+/* Layout primitive contract placeholders for generated themes. */

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

@@ -0,0 +1,43 @@
+:where(.empty-state, [data-slot="empty-state"]) {
+  display: grid;
+  place-items: center;
+  gap: var(--ak-space-3);
+  min-block-size: 18rem;
+  padding: var(--ak-space-7) 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;
+}
+
+:where(.empty-state-icon, [data-slot="empty-state-icon"]) {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+:where(.empty-state-title, [data-slot="empty-state-title"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+:where(.empty-state-description, [data-slot="empty-state-description"]) {
+  margin: 0;
+  max-inline-size: 32rem;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}
+
+:where(.empty-state-actions, [data-slot="empty-state-actions"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ak-space-2);
+  flex-wrap: wrap;
+}

package/templates/theme/styles/layout/responsive-layout.css

@@ -0,0 +1,209 @@
+:where([data-slot="topbar-layout"]),
+:where([data-slot="sidebar-layout"]) {
+  min-block-size: 100vh;
+  background: var(--ak-color-bg);
+  color: var(--ak-color-text);
+}
+
+:where([data-slot="topbar-layout"]) {
+  display: flex;
+  flex-direction: column;
+}
+
+:where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  min-block-size: var(--ak-layout-navbar-height);
+  padding: 0.875rem var(--ak-layout-page-gutter);
+  gap: var(--ak-space-sm) var(--ak-space-md);
+  border-bottom: 1px solid var(--ak-color-border);
+  background: color-mix(in srgb, var(--ak-color-surface) 98%, transparent);
+}
+
+:where([data-slot="sidebar-layout"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ak-space-lg);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
+  flex-direction: column;
+}
+
+:where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 92%, var(--ak-color-surface));
+  border-inline-end: 0;
+  border-block-end: 1px solid var(--ak-color-border);
+}
+
+:where([data-slot="topbar-layout"]) > :where([data-slot="main"]),
+:where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+  padding: var(--ak-layout-page-gutter);
+}
+
+:where([data-slot="flex"][data-collapse-below="sm"]),
+:where([data-slot="flex"][data-collapse-below="md"]),
+:where([data-slot="flex"][data-collapse-below="lg"]),
+:where([data-slot="flex"][data-collapse-below="xl"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:where([data-slot="sidebar-layout"][data-collapse-below="sm"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="md"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="lg"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+  flex-direction: column;
+}
+
+:where([data-slot="sidebar-layout"][data-collapse-below="sm"]) > :where([data-slot="sidebar"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]),
+:where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+  inline-size: 100%;
+  flex-basis: auto;
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="sm"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-sm);
+  flex-basis: var(--ak-layout-sidebar-width-sm);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="md"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-md);
+  flex-basis: var(--ak-layout-sidebar-width-md);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="lg"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-lg);
+  flex-basis: var(--ak-layout-sidebar-width-lg);
+}
+
+:where([data-slot="sidebar-layout"][data-sidebar-width="xl"]) > :where([data-slot="sidebar"]) {
+  inline-size: var(--ak-layout-sidebar-width-xl);
+  flex-basis: var(--ak-layout-sidebar-width-xl);
+}
+
+@media (min-width: 40rem) {
+  :where([data-slot="flex"][data-collapse-below="sm"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]),
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]),
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+    flex-direction: column;
+  }
+
+  :where([data-slot="sidebar-layout"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]),
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]),
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+    inline-size: 100%;
+    flex-basis: auto;
+    border-block-end: 1px solid var(--ak-color-border);
+    border-inline-end: 0;
+  }
+}
+
+@media (min-width: 48rem) {
+  :where([data-slot="topbar-layout"]) > :where([data-slot="navbar"]) {
+    padding-inline: var(--ak-layout-page-gutter);
+  }
+
+  :where([data-slot="topbar-layout"]) > :where([data-slot="main"]),
+  :where([data-slot="sidebar-layout"]) > :where([data-slot="main"]) {
+    padding: var(--ak-layout-page-gutter);
+  }
+
+  :where([data-slot="flex"][data-collapse-below="md"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="md"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="md"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}
+
+@media (min-width: 64rem) {
+  :where([data-slot="flex"][data-collapse-below="lg"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="lg"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="lg"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}
+
+@media (min-width: 80rem) {
+  :where([data-slot="flex"][data-collapse-below="xl"]) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  :where([data-slot="sidebar-layout"][data-sidebar-position="end"][data-collapse-below="xl"]) {
+    flex-direction: row-reverse;
+  }
+
+  :where([data-slot="sidebar-layout"][data-collapse-below="xl"]) > :where([data-slot="sidebar"]) {
+    inline-size: var(--ak-layout-sidebar-width);
+    flex-basis: var(--ak-layout-sidebar-width);
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--ak-color-border);
+  }
+}

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

@@ -0,0 +1,11 @@
+/* __THEME_NAME__ theme sidebar styles (public data-* contract only) */
+[data-slot="sidebar-layout"] > [data-slot="sidebar"] {
+  inline-size: var(--ak-layout-sidebar-width);
+  max-inline-size: 100%;
+  background: var(--ak-color-surface);
+  border-inline-end: 1px solid var(--ak-color-border);
+}
+
+[data-slot="sidebar-layout"] > [data-slot="main"] {
+  min-inline-size: 0;
+}

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

@@ -0,0 +1,31 @@
+[data-slot="breadcrumb"] {
+  color: var(--ak-color-text-muted);
+}
+
+[data-slot="breadcrumb-list"] {
+  display: flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+[data-slot="breadcrumb-link"] {
+  color: var(--ak-color-text-muted);
+  text-decoration: none;
+  transition: color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="breadcrumb-link"]:hover {
+  color: var(--ak-color-text);
+}
+
+[data-slot="breadcrumb-current"] {
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+[data-slot="breadcrumb-separator"] {
+  color: var(--ak-color-border);
+}