@askrjs/themes 0.0.1

package/templates/theme/styles/actions/button.css

@@ -0,0 +1,196 @@
+:where(.btn, [data-slot="button"]) {
+  --_button-height: var(--ak-density-control-height-md);
+  --_button-padding-x: var(--ak-density-control-padding-x-md);
+  --_button-radius: var(--ak-radius-md);
+  --_button-border: var(--ak-color-border);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: var(--_button-height);
+  padding-inline: var(--_button-padding-x);
+  border: 1px solid var(--_button-border);
+  border-radius: var(--_button-radius);
+  background: var(--ak-color-surface);
+  color: var(--ak-color-text);
+  box-shadow: var(--ak-shadow-sm);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
+  letter-spacing: -0.015em;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color 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),
+    opacity var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.btn) > :where([data-slot="icon"], svg),
+:where([data-slot="button"]) > :where([data-slot="icon"], svg) {
+  flex: none;
+  color: currentColor;
+}
+
+:where(.btn:hover, [data-slot="button"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn:active, [data-slot="button"]:active) {
+  background: color-mix(in srgb, var(--ak-color-active) 100%, var(--ak-color-surface));
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn:focus-visible, [data-slot="button"]:focus-visible) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px var(--ak-color-surface),
+    0 0 0 4px var(--ak-color-focus-ring);
+}
+
+:where(.btn[data-disabled], .btn:disabled, [data-slot="button"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 1;
+}
+
+:where(.btn-primary, [data-slot="button"][data-variant="primary"]) {
+  background: var(--ak-color-primary);
+  border-color: color-mix(in srgb, var(--ak-color-primary-active) 64%, var(--ak-color-primary));
+  color: var(--ak-color-text-inverse);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-primary:hover, [data-slot="button"][data-variant="primary"]:hover) {
+  background: var(--ak-color-primary-hover);
+  border-color: var(--ak-color-primary-hover);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-primary:active, [data-slot="button"][data-variant="primary"]:active) {
+  background: var(--ak-color-primary-active);
+  border-color: var(--ak-color-primary-active);
+}
+
+:where(.btn-secondary, [data-slot="button"][data-variant="secondary"]) {
+  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) 18%, var(--ak-color-border));
+  color: var(--ak-color-primary-ink);
+}
+
+:where(.btn-secondary:hover, [data-slot="button"][data-variant="secondary"]:hover) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 30%, var(--ak-color-surface));
+  border-color: color-mix(in srgb, var(--ak-color-primary) 26%, var(--ak-color-border-strong));
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-secondary:active, [data-slot="button"][data-variant="secondary"]:active) {
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-active));
+  border-color: color-mix(in srgb, var(--ak-color-primary) 22%, var(--ak-color-border));
+}
+
+:where(.btn-outline, [data-slot="button"][data-variant="outline"]) {
+  background: var(--ak-color-surface);
+  border-color: var(--ak-color-border);
+  color: var(--ak-color-text);
+}
+
+:where(.btn-outline:hover, [data-slot="button"][data-variant="outline"]:hover) {
+  background: var(--ak-color-surface-muted);
+  border-color: var(--ak-color-border-strong);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.btn-outline:active, [data-slot="button"][data-variant="outline"]:active) {
+  background: color-mix(in srgb, var(--ak-color-active) 72%, var(--ak-color-surface-muted));
+  border-color: var(--ak-color-border-strong);
+}
+
+:where(.btn-ghost, [data-slot="button"][data-variant="ghost"]) {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ak-color-text);
+}
+
+:where(.btn-ghost:hover, [data-slot="button"][data-variant="ghost"]:hover) {
+  background: var(--ak-color-hover);
+  border-color: transparent;
+}
+
+:where(.btn-ghost:active, [data-slot="button"][data-variant="ghost"]:active) {
+  background: var(--ak-color-active);
+  border-color: transparent;
+}
+
+:where(.btn-destructive, [data-slot="button"][data-variant="destructive"]) {
+  background: var(--ak-color-danger);
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 40%, var(--ak-color-danger));
+  color: var(--ak-color-text-inverse);
+}
+
+:where(.btn-destructive:hover, [data-slot="button"][data-variant="destructive"]:hover) {
+  background: color-mix(in srgb, black 4%, var(--ak-color-danger));
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 48%, var(--ak-color-danger));
+}
+
+:where(.btn-destructive:active, [data-slot="button"][data-variant="destructive"]:active) {
+  background: color-mix(in srgb, black 9%, var(--ak-color-danger));
+  border-color: color-mix(in srgb, var(--ak-color-danger-ink) 56%, var(--ak-color-danger));
+}
+
+:where(.btn-link, [data-slot="button"][data-variant="link"]) {
+  min-height: auto;
+  padding-inline: 0;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ak-color-link);
+}
+
+:where(.btn-link:hover, [data-slot="button"][data-variant="link"]:hover) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ak-color-link-hover);
+  text-decoration: underline;
+  text-underline-offset: 0.14em;
+}
+
+:where(.btn-link:active, [data-slot="button"][data-variant="link"]:active) {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ak-color-link-hover);
+}
+
+:where(.btn-sm, [data-slot="button"][data-size="sm"]) {
+  --_button-height: var(--ak-density-control-height-sm);
+  --_button-padding-x: var(--ak-density-control-padding-x-sm);
+  font-size: 0.8125rem;
+}
+
+:where(.btn-lg, [data-slot="button"][data-size="lg"]) {
+  --_button-height: var(--ak-density-control-height-lg);
+  --_button-padding-x: var(--ak-density-control-padding-x-lg);
+  font-size: 0.9375rem;
+}
+
+:where(.btn-icon, [data-slot="button"][data-size="icon"]) {
+  width: var(--_button-height);
+  padding-inline: 0;
+}

package/templates/theme/styles/actions/toggle-group.css

@@ -0,0 +1,52 @@
+[data-slot="toggle-group"] {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+[data-slot="toggle-group"][data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+[data-slot="toggle-group-item"] {
+  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:
+    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="toggle-group-item"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="toggle-group-item"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="toggle-group-item"][data-state="on"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="toggle-group-item"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="toggle-group-item"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/templates/theme/styles/actions/toggle.css

@@ -0,0 +1,44 @@
+[data-slot="toggle"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: 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="toggle"]:hover {
+  background: var(--ak-color-hover);
+  border-color: var(--ak-color-border-strong);
+}
+
+[data-slot="toggle"]:active {
+  background: var(--ak-color-active);
+}
+
+[data-slot="toggle"][data-state="on"] {
+  border-color: var(--ak-color-primary);
+  background: var(--ak-color-primary-soft);
+  color: var(--ak-color-primary-ink);
+}
+
+[data-slot="toggle"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+}
+
+[data-slot="toggle"][data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/templates/theme/styles/base/icon.css

@@ -0,0 +1,10 @@
+:where([data-slot="icon"]) {
+  display: inline-block;
+  flex: 0 0 auto;
+  vertical-align: -0.125em;
+  color: inherit;
+}
+
+:where([data-slot="icon"][data-decorative="true"]) {
+  speak: none;
+}

package/templates/theme/styles/base/typography.css

@@ -0,0 +1,208 @@
+:where(html) {
+  font-family: var(--ak-font-family-body);
+}
+
+:where(body) {
+  margin: 0;
+  font-family: var(--ak-font-family-body);
+  font-size: var(--ak-type-3-size);
+  line-height: 1.58;
+  letter-spacing: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  color: var(--ak-color-text);
+  font-family: var(--ak-font-family-body);
+  font-weight: 650;
+  text-wrap: balance;
+  margin: 0;
+}
+
+:where(h1) {
+  font-size: clamp(3rem, 6vw, var(--ak-type-9-size));
+  line-height: 0.93;
+  letter-spacing: -0.04em;
+  font-family: var(--ak-font-family-body);
+  font-weight: 700;
+}
+
+:where(h2) {
+  font-size: clamp(2.25rem, 4vw, var(--ak-type-8-size));
+  line-height: 0.98;
+  letter-spacing: -0.03em;
+  font-family: var(--ak-font-family-body);
+  font-weight: 700;
+}
+
+:where(h3) {
+  font-size: var(--ak-type-7-size);
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+}
+
+:where(h4) {
+  font-size: var(--ak-type-6-size);
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+:where(h5) {
+  font-size: var(--ak-type-5-size);
+  line-height: var(--ak-type-5-line-height);
+  letter-spacing: var(--ak-type-5-letter-spacing);
+}
+
+:where(h6) {
+  font-size: var(--ak-type-4-size);
+  line-height: var(--ak-type-4-line-height);
+  letter-spacing: var(--ak-type-4-letter-spacing);
+}
+
+:where(p, li, dd, dt) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(p, li) {
+  font-size: var(--ak-type-3-size);
+  line-height: 1.64;
+  letter-spacing: -0.01em;
+}
+
+:where(small) {
+  font-size: var(--ak-type-1-size);
+  line-height: var(--ak-type-1-line-height);
+  letter-spacing: var(--ak-type-1-letter-spacing);
+}
+
+:where(strong) {
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where(em) {
+  font-family: var(--ak-font-family-emphasis);
+  font-style: italic;
+}
+
+:where(blockquote) {
+  margin: 0;
+  padding-inline-start: 1rem;
+  border-inline-start: 1px solid var(--ak-color-border);
+  color: var(--ak-color-text-muted);
+  font-family: var(--ak-font-family-quote);
+  font-size: var(--ak-type-5-size);
+  line-height: var(--ak-type-5-line-height);
+  letter-spacing: var(--ak-type-5-letter-spacing);
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: var(--ak-font-family-mono);
+}
+
+:where(code, kbd) {
+  font-size: 0.9em;
+}
+
+:where(pre) {
+  margin: 0;
+  overflow: auto;
+  font-size: var(--ak-type-2-size);
+  line-height: var(--ak-type-2-line-height);
+}
+
+.ak-prose {
+  display: grid;
+  gap: 1rem;
+  max-inline-size: 44rem;
+}
+
+.ak-prose > * {
+  margin: 0;
+}
+
+.ak-prose > h1,
+.ak-prose > h2,
+.ak-prose > h3,
+.ak-prose > h4,
+.ak-prose > h5,
+.ak-prose > h6 {
+  max-inline-size: 22ch;
+}
+
+.ak-prose > p,
+.ak-prose > ul,
+.ak-prose > ol,
+.ak-prose > blockquote {
+  max-inline-size: 66ch;
+}
+
+.ak-prose > ul,
+.ak-prose > ol {
+  margin: 0;
+  padding-inline-start: 1.25rem;
+}
+
+.ak-type-scale {
+  display: grid;
+  gap: 0.75rem;
+  inline-size: 100%;
+}
+
+.ak-type-scale__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 1rem;
+  align-items: baseline;
+  padding-block: 0.625rem;
+  border-bottom: 1px solid var(--ak-color-border-subtle);
+}
+
+.ak-type-scale__row:last-child {
+  border-bottom: none;
+}
+
+.ak-type-scale__sample {
+  color: var(--ak-color-text);
+  font-weight: var(--ak-font-weight-medium);
+}
+
+.ak-type-scale__meta {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-type-2-size);
+  line-height: var(--ak-type-2-line-height);
+  white-space: nowrap;
+}
+
+.ak-type-grid {
+  display: grid;
+  gap: 0.875rem;
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+}
+
+.ak-type-card {
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.875rem;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 86%, white 14%);
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-surface);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+.ak-type-card > p {
+  color: var(--ak-color-text-muted);
+}
+
+.ak-type-card__eyebrow {
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-type-1-size);
+  line-height: var(--ak-type-1-line-height);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 720px) {
+  .ak-type-scale__row {
+    grid-template-columns: 1fr;
+    gap: 0.35rem;
+  }
+}

package/templates/theme/styles/base/utilities.css

@@ -0,0 +1,19 @@
+: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;
+}

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