@askrjs/themes 0.0.8 → 0.0.10

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

@@ -1,255 +0,0 @@
-@keyframes ak-menu-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes ak-menu-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-}
-
-:where([data-slot="menubar"]) {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-:where([data-slot="menubar-trigger"]) {
-  --_trigger-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-sm);
-  border: 1px solid var(--_trigger-border);
-  border-radius: var(--ak-radius-sm);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
-  line-height: 1;
-  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);
-}
-
-:where([data-slot="menubar-trigger"][data-state="open"]) {
-  border-color: var(--ak-color-primary);
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 18%, var(--ak-color-surface));
-  color: var(--ak-color-primary-ink);
-}
-
-:where([data-slot="menubar-trigger"]:hover) {
-  background: var(--ak-color-hover);
-  border-color: var(--ak-color-border-strong);
-}
-
-:where([data-slot="menubar-trigger"]:focus-visible) {
-  outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
-}
-
-:where([data-slot="menubar-content"]) {
-  --_menubar-surface: var(--ak-color-surface-overlay);
-  --_menubar-border: color-mix(
-    in srgb,
-    var(--ak-color-border-subtle) 88%,
-    var(--_menubar-surface) 12%
-  );
-
-  display: grid;
-  gap: 0.25rem;
-  box-sizing: border-box;
-  min-inline-size: min(12rem, 100%);
-  max-inline-size: min(100%, calc(100vw - 1rem));
-  max-block-size: min(20rem, calc(100vh - 4rem));
-  overflow-y: auto;
-  padding: var(--ak-space-sm);
-  border: 1px solid var(--_menubar-border);
-  border-radius: var(--ak-radius-lg);
-  background: var(--_menubar-surface);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-md);
-  z-index: var(--ak-z-dropdown);
-  transform-origin: top center;
-  animation: ak-menu-in var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where([data-slot="menubar-content"][data-state="closed"]) {
-  animation: ak-menu-out var(--ak-duration-fast) var(--ak-ease-standard);
-  pointer-events: none;
-}
-
-:where([data-slot="menubar-item"]),
-:where([data-slot="menubar-sub-trigger"]) {
-  display: flex;
-  align-items: center;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border: 0;
-  border-radius: var(--ak-radius-md);
-  background: transparent;
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
-  overflow-wrap: anywhere;
-  cursor: pointer;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where([data-slot="menubar-item"]:hover),
-:where([data-slot="menubar-sub-trigger"]:hover) {
-  background: var(--ak-color-surface-muted);
-}
-
-:where([data-slot="menubar-item"]:focus-visible),
-:where([data-slot="menubar-sub-trigger"]:focus-visible) {
-  outline: none;
-  background: var(--ak-color-surface-muted);
-  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
-}
-
-:where([data-slot="menubar-item"][data-disabled]),
-:where([data-slot="menubar-sub-trigger"][data-disabled]) {
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-:where([data-slot="menubar-content"] [data-submenu="true"]) {
-  display: grid;
-  gap: 0.25rem;
-}
-
-:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  inline-size: 100%;
-  min-inline-size: 0;
-  min-height: var(--ak-density-control-height-md);
-  padding: 0 var(--ak-density-control-padding-x-md);
-  border-radius: var(--ak-radius-md);
-  background: transparent;
-  color: var(--ak-color-text);
-  font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-medium);
-  overflow-wrap: anywhere;
-  cursor: pointer;
-  list-style: none;
-  transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
-    color var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where(
-  [data-slot="menubar-content"]
-    [data-submenu="true"]
-    > [data-submenu-trigger="true"]::-webkit-details-marker
-) {
-  display: none;
-}
-
-:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]:hover) {
-  background: var(--ak-color-surface-muted);
-}
-
-:where(
-  [data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]:focus-visible
-) {
-  outline: none;
-  background: var(--ak-color-surface-muted);
-  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
-}
-
-:where([data-slot="menubar-content"] [data-submenu="true"][open] > [data-submenu-trigger="true"]) {
-  background: color-mix(in srgb, var(--ak-color-primary-soft) 18%, var(--ak-color-surface));
-  color: var(--ak-color-primary-ink);
-}
-
-:where([data-slot="menubar-content"] [data-submenu="true"] > [data-submenu-trigger="true"]::after) {
-  content: "";
-  flex: none;
-  inline-size: 0.45rem;
-  block-size: 0.45rem;
-  margin-inline-start: var(--ak-space-xs);
-  border-inline-end: 1.5px solid currentColor;
-  border-block-end: 1.5px solid currentColor;
-  transform: rotate(45deg);
-  transition: transform var(--ak-duration-fast) var(--ak-ease-standard);
-}
-
-:where(
-  [data-slot="menubar-content"] [data-submenu="true"][open] > [data-submenu-trigger="true"]::after
-) {
-  transform: rotate(-135deg);
-}
-
-:where([data-slot="menubar-content"] [data-submenu-content="true"]) {
-  display: grid;
-  gap: 0.25rem;
-  min-inline-size: 0;
-  margin: 0;
-  padding: var(--ak-space-2xs, 0.125rem) 0 0 var(--ak-space-sm);
-}
-
-@media (min-width: 48rem) {
-  :where([data-slot="menubar-content"] [data-submenu-content="true"]) {
-    padding-inline-start: var(--ak-space-md);
-    border-inline-start: 1px solid var(--ak-color-border-subtle);
-  }
-}
-
-:where([data-slot="menubar-content"] [data-submenu-content="true"] > [data-submenu-item="true"]) {
-  list-style: none;
-}
-
-:where(
-  [data-slot="menubar-content"]
-    [data-submenu-content="true"]
-    > [data-submenu-item="true"]
-    > :where([data-slot="menubar-item"])
-) {
-  inline-size: 100%;
-}
-
-:where([data-slot="menubar-label"]) {
-  padding: 0 var(--ak-density-control-padding-x-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="menubar-separator"]) {
-  block-size: 1px;
-  margin: 0.25rem 0;
-  background: var(--ak-color-border);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :where([data-slot="menubar-content"]) {
-    animation: none;
-  }
-}

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

@@ -1,91 +0,0 @@
-:where(.pagination, [data-slot="pagination"]) {
-  display: flex;
-  max-inline-size: 100%;
-}
-
-:where(.pagination-list, [data-slot="pagination-list"]) {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-inline-size: 0;
-  gap: var(--ak-space-2xs, 0.125rem);
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-:where(.page-item, [data-slot="pagination-item"]) {
-  display: block;
-}
-
-:where(.page-link, [data-slot="pagination-link"]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 2.25rem;
-  min-block-size: 2.25rem;
-  padding-inline: var(--ak-space-sm);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
-  border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
-  color: var(--ak-color-text-muted);
-  box-shadow: var(--ak-shadow-sm);
-  font-size: var(--ak-font-size-sm);
-  line-height: 1;
-  overflow-wrap: anywhere;
-  text-align: center;
-  text-decoration: none;
-  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);
-}
-
-:where(.page-link:hover, [data-slot="pagination-link"]:hover) {
-  background: var(--ak-color-surface-muted);
-  border-color: var(--ak-color-border-strong);
-  color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
-}
-
-:where(.page-link:focus-visible, [data-slot="pagination-link"]:focus-visible) {
-  outline: none;
-  box-shadow:
-    0 0 0 1px var(--ak-color-surface),
-    0 0 0 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
-}
-
-:where(
-  .page-link.active,
-  .page-item.active > .page-link,
-  [data-slot="pagination-link"][data-active="true"],
-  [data-slot="pagination-item"][data-active="true"] > [data-slot="pagination-link"]
-) {
-  background: var(--ak-color-selected);
-  border-color: var(--ak-color-selected-border);
-  color: var(--ak-color-text);
-}
-
-:where(
-  .page-link.disabled,
-  .page-item.disabled > .page-link,
-  [data-slot="pagination-link"][data-disabled="true"],
-  [data-slot="pagination-item"][data-disabled="true"] > [data-slot="pagination-link"]
-) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
-  box-shadow: none;
-}
-
-:where(.pagination-ellipsis, [data-slot="pagination-ellipsis"]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: 2.25rem;
-  min-block-size: 2.25rem;
-  flex: none;
-  color: var(--ak-color-text-subtle);
-}

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

@@ -1,37 +0,0 @@
-: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-block-size: var(--ak-density-control-height-md);
-  min-inline-size: min(8rem, 100%);
-  max-inline-size: 100%;
-  padding-inline: var(--ak-density-control-padding-x-md) 2.1rem;
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 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;
-  text-overflow: ellipsis;
-  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 calc(var(--ak-focus-ring-width) + 1px) var(--ak-color-focus-ring);
-}