@askrjs/themes 0.0.1

package/src/themes/default/styles/base/utilities.css

@@ -0,0 +1,223 @@
+:where(.text-muted) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.text-bold) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(.sr-only) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:where(.gap-1, [data-slot="grid"][data-gap="initial:1"], [data-slot="flex"][data-gap="initial:1"]) {
+  gap: var(--ak-space-1);
+}
+
+:where(.gap-2, [data-slot="grid"][data-gap="initial:2"], [data-slot="flex"][data-gap="initial:2"]) {
+  gap: var(--ak-space-2);
+}
+
+:where(.gap-3, [data-slot="grid"][data-gap="initial:3"], [data-slot="flex"][data-gap="initial:3"]) {
+  gap: var(--ak-space-3);
+}
+
+:where(.gap-4, [data-slot="grid"][data-gap="initial:4"], [data-slot="flex"][data-gap="initial:4"]) {
+  gap: var(--ak-space-4);
+}
+
+:where(
+  .gap-xs,
+  [data-slot="grid"][data-gap="initial:xs"],
+  [data-slot="flex"][data-gap="initial:xs"]
+) {
+  gap: var(--ak-space-xs);
+}
+
+:where(
+  .gap-sm,
+  [data-slot="grid"][data-gap="initial:sm"],
+  [data-slot="flex"][data-gap="initial:sm"],
+  [data-slot="sidebar-layout"][data-gap="sm"],
+  [data-slot="topbar-layout"][data-gap="sm"]
+) {
+  gap: var(--ak-space-sm);
+}
+
+:where(
+  .gap-md,
+  [data-slot="grid"][data-gap="initial:md"],
+  [data-slot="flex"][data-gap="initial:md"],
+  [data-slot="sidebar-layout"][data-gap="md"],
+  [data-slot="topbar-layout"][data-gap="md"]
+) {
+  gap: var(--ak-space-md);
+}
+
+:where(
+  .gap-lg,
+  [data-slot="grid"][data-gap="initial:lg"],
+  [data-slot="flex"][data-gap="initial:lg"],
+  [data-slot="sidebar-layout"][data-gap="lg"],
+  [data-slot="topbar-layout"][data-gap="lg"]
+) {
+  gap: var(--ak-space-lg);
+}
+
+:where(
+  .gap-xl,
+  [data-slot="grid"][data-gap="initial:xl"],
+  [data-slot="flex"][data-gap="initial:xl"],
+  [data-slot="sidebar-layout"][data-gap="xl"],
+  [data-slot="topbar-layout"][data-gap="xl"]
+) {
+  gap: var(--ak-space-xl);
+}
+
+:where(
+  .gap-x-sm,
+  [data-slot="grid"][data-gap-x="initial:sm"],
+  [data-slot="flex"][data-gap-x="initial:sm"]
+) {
+  column-gap: var(--ak-space-sm);
+}
+
+:where(
+  .gap-x-md,
+  [data-slot="grid"][data-gap-x="initial:md"],
+  [data-slot="flex"][data-gap-x="initial:md"]
+) {
+  column-gap: var(--ak-space-md);
+}
+
+:where(
+  .gap-x-lg,
+  [data-slot="grid"][data-gap-x="initial:lg"],
+  [data-slot="flex"][data-gap-x="initial:lg"]
+) {
+  column-gap: var(--ak-space-lg);
+}
+
+:where(
+  .gap-y-sm,
+  [data-slot="grid"][data-gap-y="initial:sm"],
+  [data-slot="flex"][data-gap-y="initial:sm"]
+) {
+  row-gap: var(--ak-space-sm);
+}
+
+:where(
+  .gap-y-md,
+  [data-slot="grid"][data-gap-y="initial:md"],
+  [data-slot="flex"][data-gap-y="initial:md"]
+) {
+  row-gap: var(--ak-space-md);
+}
+
+:where(
+  .gap-y-lg,
+  [data-slot="grid"][data-gap-y="initial:lg"],
+  [data-slot="flex"][data-gap-y="initial:lg"]
+) {
+  row-gap: var(--ak-space-lg);
+}
+
+:where(.flex-col, [data-slot="flex"][data-direction="initial:column"]) {
+  flex-direction: column;
+}
+
+:where(.flex-row-reverse, [data-slot="flex"][data-direction="initial:row-reverse"]) {
+  flex-direction: row-reverse;
+}
+
+:where(.flex-col-reverse, [data-slot="flex"][data-direction="initial:column-reverse"]) {
+  flex-direction: column-reverse;
+}
+
+:where(
+  .items-start,
+  [data-slot="flex"][data-align="initial:start"],
+  [data-slot="grid"][data-align="initial:start"]
+) {
+  align-items: flex-start;
+}
+
+:where(
+  .items-end,
+  [data-slot="flex"][data-align="initial:end"],
+  [data-slot="grid"][data-align="initial:end"]
+) {
+  align-items: flex-end;
+}
+
+:where(
+  .items-center,
+  [data-slot="flex"][data-align="initial:center"],
+  [data-slot="grid"][data-align="initial:center"]
+) {
+  align-items: center;
+}
+
+:where(
+  .items-stretch,
+  [data-slot="flex"][data-align="initial:stretch"],
+  [data-slot="grid"][data-align="initial:stretch"]
+) {
+  align-items: stretch;
+}
+
+:where(
+  .items-baseline,
+  [data-slot="flex"][data-align="initial:baseline"],
+  [data-slot="grid"][data-align="initial:baseline"]
+) {
+  align-items: baseline;
+}
+
+:where(
+  .justify-start,
+  [data-slot="flex"][data-justify="initial:start"],
+  [data-slot="grid"][data-justify="initial:start"]
+) {
+  justify-content: flex-start;
+}
+
+:where(
+  .justify-end,
+  [data-slot="flex"][data-justify="initial:end"],
+  [data-slot="grid"][data-justify="initial:end"]
+) {
+  justify-content: flex-end;
+}
+
+:where(
+  .justify-center,
+  [data-slot="flex"][data-justify="initial:center"],
+  [data-slot="grid"][data-justify="initial:center"]
+) {
+  justify-content: center;
+}
+
+:where(
+  .justify-between,
+  [data-slot="flex"][data-justify="initial:between"],
+  [data-slot="grid"][data-justify="initial:between"]
+) {
+  justify-content: space-between;
+}
+
+:where(.flex-nowrap, [data-slot="flex"][data-wrap="initial:nowrap"]) {
+  flex-wrap: nowrap;
+}
+
+:where(.flex-wrap-reverse, [data-slot="flex"][data-wrap="initial:wrap-reverse"]) {
+  flex-wrap: wrap-reverse;
+}

package/src/themes/default/styles/disclosure/accordion.css

@@ -0,0 +1,62 @@
+[data-slot="accordion"] {
+  display: grid;
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="accordion-item"] {
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  overflow: hidden;
+  transition: border-color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="accordion-item"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="accordion-header"] {
+  margin: 0;
+}
+
+[data-slot="accordion-trigger"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  inline-size: 100%;
+  min-height: 2.75rem;
+  padding: 0 var(--ak-space-md);
+  border: 0;
+  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),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="accordion-trigger"]:hover {
+  background: var(--ak-color-hover);
+}
+
+[data-slot="accordion-trigger"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="accordion-trigger"]:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="accordion-trigger"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="accordion-content"] {
+  padding: 0 var(--ak-space-md) var(--ak-space-md);
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}

package/src/themes/default/styles/disclosure/collapsible.css

@@ -0,0 +1,47 @@
+[data-slot="collapsible-trigger"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  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:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    border-color var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+[data-slot="collapsible-trigger"][data-state="open"] {
+  border-color: var(--ak-color-primary);
+}
+
+[data-slot="collapsible-trigger"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="collapsible-trigger"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="collapsible-trigger"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="collapsible-trigger"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot="collapsible-content"] {
+  padding: var(--ak-space-md) 0 0;
+  color: var(--ak-color-text-muted);
+  line-height: var(--ak-line-height-normal);
+}

package/src/themes/default/styles/display/avatar.css

@@ -0,0 +1,25 @@
+[data-slot="avatar"] {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--ak-color-surface-muted);
+  color: var(--ak-color-text);
+}
+
+[data-slot="avatar-image"] {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+[data-slot="avatar-fallback"] {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+}

package/src/themes/default/styles/display/badge.css

@@ -0,0 +1,51 @@
+:where(.badge, [data-slot="badge"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 1.625rem;
+  padding: 0 0.625rem;
+  border: 1px solid color-mix(in srgb, var(--ak-color-primary) 10%, var(--ak-color-border-subtle));
+  border-radius: var(--ak-radius-sm);
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface));
+  color: var(--ak-color-primary-ink);
+  box-shadow: none;
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.015em;
+}
+
+:where(.badge-secondary, [data-slot="badge"][data-variant="secondary"]) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-subtle);
+  color: var(--ak-color-text);
+}
+
+:where(.badge-outline, [data-slot="badge"][data-variant="outline"]) {
+  background: var(--ak-color-surface);
+  border-color: var(--ak-color-border);
+  color: var(--ak-color-text);
+}
+
+:where(.badge-success, [data-slot="badge"][data-variant="success"]) {
+  background: color-mix(in srgb, var(--ak-color-success-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-success) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-success-ink);
+}
+
+:where(.badge-warning, [data-slot="badge"][data-variant="warning"]) {
+  background: color-mix(in srgb, var(--ak-color-warning-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-warning) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-warning-ink);
+}
+
+:where(.badge-danger, [data-slot="badge"][data-variant="danger"]) {
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-danger) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-danger-ink);
+}
+
+:where(.badge-info, [data-slot="badge"][data-variant="info"]) {
+  background: color-mix(in srgb, var(--ak-color-info-soft) 58%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-info) 12%, var(--ak-color-border-subtle));
+  color: var(--ak-color-info-ink);
+}

package/src/themes/default/styles/display/card.css

@@ -0,0 +1,53 @@
+:where(.card, [data-slot="card"]) {
+  display: grid;
+  gap: var(--ak-space-xs);
+  padding: var(--ak-layout-panel-padding);
+  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 86%, white 14%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.card-raised, [data-slot="card"][data-variant="raised"]) {
+  background: var(--ak-color-surface-raised);
+  border-color: var(--ak-color-border);
+  box-shadow: var(--ak-shadow-md);
+}
+
+:where(.card-sm, [data-slot="card"][data-padding="sm"]) {
+  padding: var(--ak-space-md);
+}
+
+:where(.card-lg, [data-slot="card"][data-padding="lg"]) {
+  padding: var(--ak-space-xl);
+}
+
+:where(.card-header, [data-slot="card-header"]) {
+  display: grid;
+  gap: 0.375rem;
+}
+
+:where(.card-title, [data-slot="card-title"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-lg);
+  font-weight: 650;
+  line-height: 1.15;
+}
+
+:where(.card-description, [data-slot="card-description"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+}
+
+:where(.card-content, [data-slot="card-content"]) {
+  min-inline-size: 0;
+}
+
+:where(.card-footer, [data-slot="card-footer"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-sm);
+  align-items: center;
+}

package/src/themes/default/styles/display/coverage.css

@@ -0,0 +1,248 @@
+/* Coverage selectors for askr-ui public slots/states that are intentionally minimal. */
+[data-slot="box"] {
+  display: block;
+}
+
+[data-slot="container"] {
+  box-sizing: border-box;
+}
+
+[data-slot="grid"] {
+  display: grid;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="stack"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="flex"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="section"] {
+  display: block;
+}
+
+[data-slot="section"][data-size="initial:1"] {
+  padding-block: var(--ak-section-1);
+}
+
+[data-slot="section"][data-size="initial:2"] {
+  padding-block: var(--ak-section-2);
+}
+
+[data-slot="section"][data-size="initial:3"] {
+  padding-block: var(--ak-section-3);
+}
+
+[data-slot="section"][data-size="initial:4"] {
+  padding-block: var(--ak-section-4);
+}
+
+[data-slot="center"] {
+  display: grid;
+  place-items: center;
+}
+
+[data-slot="spacer"] {
+  flex: 1 1 auto;
+}
+
+[data-slot="spacer"][data-axis="inline"],
+[data-slot="spacer"][data-axis="block"] {
+  display: block;
+  flex-shrink: 0;
+}
+
+@media (min-width: 40rem) {
+  [data-slot="section"][data-size="sm:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="sm:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="sm:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="sm:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (min-width: 48rem) {
+  [data-slot="section"][data-size="md:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="md:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="md:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="md:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (min-width: 64rem) {
+  [data-slot="section"][data-size="lg:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="lg:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="lg:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="lg:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+@media (min-width: 80rem) {
+  [data-slot="section"][data-size="xl:1"] {
+    padding-block: var(--ak-section-1);
+  }
+
+  [data-slot="section"][data-size="xl:2"] {
+    padding-block: var(--ak-section-2);
+  }
+
+  [data-slot="section"][data-size="xl:3"] {
+    padding-block: var(--ak-section-3);
+  }
+
+  [data-slot="section"][data-size="xl:4"] {
+    padding-block: var(--ak-section-4);
+  }
+}
+
+[data-slot="breadcrumb-item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="dialog-trigger"] {
+  cursor: pointer;
+}
+
+[data-slot="dropdown-menu-group"],
+[data-slot="menu-group"],
+[data-slot="menubar-group"],
+[data-slot="select-group"] {
+  display: block;
+}
+
+[data-slot="select-item-text"] {
+  display: inline;
+}
+
+[data-state="closed"] {
+  --ak-state-closed: 1;
+}
+
+[data-state="determinate"] {
+  --ak-state-determinate: 1;
+}
+
+[data-state="inactive"] {
+  --ak-state-inactive: 1;
+}
+
+[data-state="off"] {
+  --ak-state-off: 1;
+}
+
+[data-state="unchecked"] {
+  --ak-state-unchecked: 1;
+}
+
+[data-accordion],
+[data-accordion-header],
+[data-active-item],
+[data-align],
+[data-askr-visually-hidden],
+[data-auto-fit],
+[data-avatar],
+[data-avatar-fallback],
+[data-avatar-image],
+[data-axis],
+[data-badge],
+[data-basis],
+[data-breadcrumb],
+[data-breadcrumb-current],
+[data-breadcrumb-item],
+[data-breadcrumb-link],
+[data-breadcrumb-list],
+[data-breadcrumb-separator],
+[data-centered],
+[data-collapse-below],
+[data-columns],
+[data-dialog-overlay],
+[data-dismissable-layer],
+[data-dropdown-menu-label],
+[data-fluid],
+[data-focus-ring],
+[data-focus-scope],
+[data-gap],
+[data-grow],
+[data-inline],
+[data-justify],
+[data-max],
+[data-max-width],
+[data-menubar],
+[data-menubar-label],
+[data-min-height],
+[data-min-item-width],
+[data-navigation-menu],
+[data-navigation-menu-indicator],
+[data-navigation-menu-link],
+[data-navigation-menu-list],
+[data-navigation-menu-viewport],
+[data-padding],
+[data-percentage],
+[data-progress],
+[data-progress-circle],
+[data-progress-circle-indicator],
+[data-progress-indicator],
+[data-required],
+[data-select-item-text],
+[data-select-label],
+[data-shrink],
+[data-side],
+[data-side-offset],
+[data-size],
+[data-skeleton],
+[data-slider],
+[data-slider-range],
+[data-slider-thumb],
+[data-slider-track],
+[data-tabs],
+[data-tabs-list],
+[data-toast],
+[data-toast-action],
+[data-toast-close],
+[data-toast-description],
+[data-toast-provider],
+[data-toast-title],
+[data-toast-viewport],
+[data-toggle-group],
+[data-value],
+[data-wrap] {
+  --ak-contract-covered: 1;
+}