@askrjs/themes 0.0.1

package/templates/theme/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/templates/theme/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/templates/theme/styles/display/coverage.css

@@ -0,0 +1,146 @@
+/* Coverage selectors for askr-ui public slots/states that are intentionally minimal. */
+[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="inline"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-md);
+}
+
+[data-slot="center"] {
+  display: grid;
+  place-items: center;
+}
+
+[data-slot="spacer"] {
+  flex: 1 1 auto;
+}
+
+[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;
+}

package/templates/theme/styles/display/progress-circle.css

@@ -0,0 +1,18 @@
+[data-slot="progress-circle"] {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  border-radius: 999px;
+  background: conic-gradient(
+    var(--ak-color-primary) var(--ak-progress-percentage),
+    var(--ak-color-surface-muted) 0
+  );
+}
+
+[data-slot="progress-circle-indicator"] {
+  inline-size: 1.9rem;
+  block-size: 1.9rem;
+  border-radius: 999px;
+  background: var(--ak-color-bg);
+}

package/templates/theme/styles/display/progress.css

@@ -0,0 +1,18 @@
+[data-slot="progress"] {
+  inline-size: 100%;
+  block-size: 0.625rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--ak-color-surface-muted);
+}
+
+[data-slot="progress-indicator"] {
+  block-size: 100%;
+  inline-size: var(--ak-progress-percentage);
+  border-radius: inherit;
+  background: var(--ak-color-primary);
+}
+
+[data-slot="progress-indicator"][data-state="indeterminate"] {
+  inline-size: 35%;
+}

package/templates/theme/styles/display/scroll-area.css

@@ -0,0 +1,34 @@
+:where([data-slot="scroll-area-viewport"]) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+:where([data-slot="scroll-area-viewport"]::-webkit-scrollbar) {
+  display: none;
+}
+
+:where([data-slot="scroll-area-scrollbar"]) {
+  display: flex;
+  flex: 0 0 auto;
+  padding: 0.125rem;
+  border-radius: var(--ak-radius-round);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 72%, transparent);
+}
+
+:where([data-slot="scroll-area-scrollbar"][data-orientation="vertical"]) {
+  width: 0.625rem;
+}
+
+:where([data-slot="scroll-area-scrollbar"][data-orientation="horizontal"]) {
+  height: 0.625rem;
+  flex-direction: column;
+}
+
+:where([data-slot="scroll-area-thumb"]) {
+  border-radius: var(--ak-radius-round);
+  background: var(--ak-color-border-strong);
+}
+
+:where([data-slot="scroll-area-corner"]) {
+  background: var(--ak-color-surface-muted);
+}

package/templates/theme/styles/display/separator.css

@@ -0,0 +1,15 @@
+[data-slot="separator"] {
+  display: block;
+  flex: none;
+  background: var(--ak-color-border);
+}
+
+[data-slot="separator"][data-orientation="horizontal"] {
+  inline-size: 100%;
+  block-size: 1px;
+}
+
+[data-slot="separator"][data-orientation="vertical"] {
+  inline-size: 1px;
+  block-size: 100%;
+}

package/templates/theme/styles/display/skeleton.css

@@ -0,0 +1,6 @@
+[data-slot="skeleton"] {
+  display: block;
+  min-height: 1rem;
+  border-radius: var(--ak-radius-sm);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 62%, var(--ak-color-surface));
+}

package/templates/theme/styles/display/spinner.css

@@ -0,0 +1,9 @@
+/*
+  Spinner composes ProgressCircle in askr-themes.
+  Styling is intentionally shared through progress-circle slots.
+*/
+
+[data-slot="progress-circle"][data-state="indeterminate"] {
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+}

package/templates/theme/styles/display/table.css

@@ -0,0 +1,63 @@
+:where([data-slot="table"]) {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  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-raised);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where([data-slot="table-caption"]) {
+  padding: 0 0 var(--ak-space-sm);
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  text-align: start;
+  caption-side: top;
+}
+
+:where([data-slot="table-head"]) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="table-body"]) {
+  background: var(--ak-color-surface-raised);
+}
+
+:where([data-slot="table-foot"]) {
+  background: var(--ak-color-surface-muted);
+}
+
+:where([data-slot="table-row"]) {
+  background: inherit;
+  transition: background var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where([data-slot="table-row"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-hover) 70%, transparent);
+}
+
+:where([data-slot="table-header-cell"]),
+:where([data-slot="table-cell"]) {
+  padding: 0.8rem var(--ak-space-md);
+  border-block-end: 1px solid var(--ak-color-border-subtle);
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  text-align: start;
+  vertical-align: top;
+}
+
+:where([data-slot="table-header-cell"]) {
+  color: var(--ak-color-text-muted);
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+:where([data-slot="table-cell"]) {
+  font-weight: var(--ak-font-weight-regular);
+}

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

@@ -0,0 +1,64 @@
+:where([data-slot="checkbox"]) {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin: 0;
+  border: 1px solid var(--ak-color-border-strong);
+  border-radius: calc(var(--ak-radius-sm) - 2px);
+  background: var(--ak-color-surface);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0.85rem 0.85rem;
+  box-shadow: var(--ak-shadow-sm);
+  cursor: pointer;
+  transition:
+    transform var(--ak-duration-fast) var(--ak-ease-standard),
+    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="checkbox"]:hover) {
+  border-color: var(--ak-color-primary);
+  box-shadow:
+    var(--ak-shadow-sm),
+    0 0 0 4px color-mix(in srgb, var(--ak-color-primary-soft) 54%, transparent);
+}
+
+:where([data-slot="checkbox"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 4px var(--ak-color-focus-ring),
+    var(--ak-shadow-sm);
+}
+
+:where([data-slot="checkbox"][data-state="checked"]),
+:where([data-slot="checkbox"][aria-checked="true"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  background-color: var(--ak-color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25' d='M3.5 8.25 6.5 11.25 12.5 4.75'/%3E%3C/svg%3E");
+  box-shadow:
+    var(--ak-shadow-sm),
+    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+}
+
+:where([data-slot="checkbox"][data-state="indeterminate"]),
+:where([data-slot="checkbox"][aria-checked="mixed"]) {
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 60%, var(--ak-color-primary));
+  background-color: var(--ak-color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-width='2.25' d='M4 8h8'/%3E%3C/svg%3E");
+  box-shadow:
+    var(--ak-shadow-sm),
+    0 0 0 1px color-mix(in srgb, var(--ak-color-primary) 22%, transparent);
+}
+
+:where([data-slot="checkbox"][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;
+}

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

@@ -0,0 +1,5 @@
+:where([data-slot="form"]) {
+  display: grid;
+  gap: var(--ak-space-4);
+  min-inline-size: 0;
+}

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

@@ -0,0 +1,49 @@
+:where(.input, [data-slot="input"]) {
+  appearance: none;
+  box-sizing: border-box;
+  min-height: var(--ak-density-control-height-md);
+  width: 100%;
+  padding: 0 var(--ak-density-control-padding-x-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);
+  line-height: var(--ak-line-height-normal);
+  box-shadow: var(--ak-shadow-sm);
+  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(.input, [data-slot="input"])::placeholder {
+  color: var(--ak-color-text-subtle);
+}
+
+:where(.input:hover, [data-slot="input"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.input:focus-visible, [data-slot="input"]:focus-visible) {
+  outline: none;
+  border-color: var(--ak-color-primary);
+  box-shadow: 0 0 0 4px var(--ak-color-focus-ring);
+}
+
+:where(.input[aria-invalid="true"], [data-slot="input"][aria-invalid="true"]) {
+  border-color: var(--ak-color-danger);
+  background: color-mix(in srgb, var(--ak-color-danger-soft) 12%, var(--ak-color-surface));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
+}
+
+:where(.input[data-disabled], .input:disabled, [data-slot="input"][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;
+}

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

@@ -0,0 +1,6 @@
+:where(.label, [data-slot="label"]) {
+  display: inline-block;
+  color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+}

package/templates/theme/styles/forms/radio-group.css

@@ -0,0 +1,53 @@
+[data-slot="radio-group"] {
+  display: grid;
+  gap: var(--ak-space-sm);
+}
+
+[data-slot="radio-group"][data-orientation="horizontal"] {
+  grid-auto-flow: column;
+  justify-content: flex-start;
+}
+
+[data-slot="radio-group-item"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ak-space-sm);
+  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="radio-group-item"][data-state="checked"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="radio-group-item"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="radio-group-item"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="radio-group-item"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="radio-group-item"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}