@askrjs/themes 0.0.8 → 0.0.10

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

@@ -3,14 +3,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
-  inline-size: 3.3rem;
-  block-size: 2rem;
+  inline-size: 2rem;
+  block-size: 1rem;
   flex: none;
-  padding: 0.2rem;
-  border: 1px solid var(--ak-color-border-strong);
+  padding: 0.125rem;
+  border: 1px solid transparent;
   border-radius: var(--ak-radius-round);
-  background: var(--ak-color-surface-muted);
-  box-shadow: var(--ak-shadow-sm);
+  background: var(--ak-color-input);
+  box-shadow: none;
   color: var(--ak-color-text);
   cursor: pointer;
   transition:
@@ -23,49 +23,44 @@
 :where([data-slot="switch"])::after {
   content: "";
   display: block;
-  inline-size: 1.45rem;
-  block-size: 1.45rem;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
   border-radius: var(--ak-radius-round);
   background: var(--ak-color-surface);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: var(--ak-shadow-xs);
   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));
+  border-color: transparent;
+  background: var(--ak-color-primary);
 }
 
 :where([data-slot="switch"][data-state="checked"])::after {
-  transform: translateX(1.275rem);
+  transform: translateX(1rem);
 }
 
 :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);
+  background: color-mix(in oklch, var(--ak-color-input) 85%, black);
 }
 
 :where([data-slot="switch"]:focus-visible) {
   outline: none;
-  box-shadow:
-    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
-    var(--ak-shadow-sm);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where([data-slot="switch"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-input);
+  border-color: transparent;
   box-shadow: none;
-  opacity: 1;
+  opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
 }
 
 :where([data-slot="switch"][data-disabled])::after {
-  background: var(--ak-color-disabled-bg);
+  background: var(--ak-color-surface);
   box-shadow: none;
 }

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

@@ -1,20 +1,20 @@
 :where(.textarea, [data-slot="textarea"]) {
-  --_textarea-min-height: 7rem;
+  --_textarea-min-height: 5rem;
   --_textarea-padding-block: var(--ak-space-sm);
-  --_textarea-padding-inline: var(--ak-space-md);
+  --_textarea-padding-inline: var(--ak-space-3);
   box-sizing: border-box;
   width: 100%;
   min-height: var(--_textarea-min-height);
   padding-block: var(--_textarea-padding-block);
   padding-inline: var(--_textarea-padding-inline);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
+  border: 1px solid var(--ak-color-input);
   border-radius: var(--ak-radius-md);
-  background: var(--ak-color-surface);
+  background: transparent;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
   resize: vertical;
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
   transition:
     border-color var(--ak-duration-fast) var(--ak-ease-standard),
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
@@ -25,30 +25,30 @@
 }
 
 :where(.textarea:hover, [data-slot="textarea"]:hover) {
-  border-color: var(--ak-color-border-strong);
-  box-shadow: var(--ak-shadow-sm);
+  border-color: var(--ak-color-input);
+  box-shadow: none;
 }
 
 :where(.textarea:focus-visible, [data-slot="textarea"]:focus-visible) {
   outline: none;
-  border-color: var(--ak-color-primary);
+  border-color: var(--ak-color-ring);
   box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
 :where(.textarea[aria-invalid="true"], [data-slot="textarea"][aria-invalid="true"]) {
   border-color: var(--ak-color-danger);
-  background: color-mix(in srgb, var(--ak-color-danger-soft) 12%, var(--ak-color-surface));
+  background: transparent;
   box-shadow: 0 0 0 var(--ak-focus-ring-width)
     color-mix(in srgb, var(--ak-color-danger-soft) 82%, transparent);
 }
 
 :where(.textarea[data-disabled], .textarea:disabled, [data-slot="textarea"][data-disabled]) {
-  background: var(--ak-color-disabled-surface);
-  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-input);
   box-shadow: none;
-  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
+  opacity: 0.5;
 }
 
 :where(.textarea-sm, [data-slot="textarea"][data-size="sm"]) {

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

@@ -1,23 +1,107 @@
-:where([data-slot="block"]) {
-  display: grid;
+:where(
+  [data-slot="block"],
+  [data-slot="container"],
+  [data-slot="header"],
+  [data-slot="main"],
+  [data-slot="section"],
+  [data-slot="aside"],
+  [data-slot="sidebar"],
+  [data-slot="navbar"],
+  [data-slot="navbar-collapse"],
+  [data-slot="navbar-content"],
+  [data-slot="nav-brand"],
+  [data-slot="nav-dropdown"],
+  [data-slot="nav-group"],
+  [data-slot="nav-group-body"],
+  [data-slot="brand"],
+  [data-slot="grid"],
+  [data-slot="page"],
+  [data-slot="page-header"],
+  [data-slot="toolbar"],
+  [data-slot="empty-state"]
+) {
+  min-inline-size: 0;
 }
 
-:where([data-slot="block"][data-size="initial:xs"]) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+:where([data-slot="nav-group-label"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-medium);
+  line-height: var(--ak-line-height-tight);
 }
 
-:where([data-slot="block"][data-size="initial:sm"]) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+:where([data-slot="nav-item"]) {
+  min-block-size: 2rem;
+  color: var(--ak-color-text-muted);
+  text-decoration: none;
+  transition:
+    background var(--ak-duration-fast) var(--ak-ease-standard),
+    color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="block"][data-size="initial:md"]) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+:where([data-slot="nav-item"]:hover) {
+  background: var(--ak-color-hover);
+  color: var(--ak-color-text);
 }
 
-:where([data-slot="block"][data-size="initial:lg"]) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+:where([data-slot="nav-item"][data-active="true"], [data-slot="nav-item"][aria-current="page"]) {
+  background: var(--ak-color-selected);
+  color: var(--ak-color-text);
 }
 
-:where([data-slot="block"][data-size="initial:xl"]) {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
+:where([data-slot="nav-item"]:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}
+
+:where([data-slot="page-header-actions"], [data-slot="toolbar-actions"]) {
+  flex-wrap: wrap;
+}
+
+:where([data-slot="page-header"]) {
+  padding-block-end: var(--ak-space-sm);
+}
+
+:where([data-slot="page-header-copy"]) {
+  max-inline-size: 48rem;
+}
+
+:where([data-slot="page-header-title"], [data-slot="toolbar-title"]) {
+  margin: 0;
+  color: var(--ak-color-text);
+  line-height: var(--ak-line-height-tight);
+  text-wrap: balance;
+}
+
+:where([data-slot="page-header-title"]) {
+  font-size: var(--ak-font-size-heading);
+  font-weight: var(--ak-font-weight-bold);
+}
+
+:where([data-slot="toolbar-title"]) {
+  font-size: var(--ak-font-size-xl);
+  font-weight: var(--ak-font-weight-semibold);
+}
+
+:where([data-slot="page-header-description"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  max-inline-size: 42rem;
+  font-size: var(--ak-font-size-md);
+  line-height: var(--ak-line-height-normal);
+  text-wrap: pretty;
+}
+
+:where([data-slot="empty-state"]) {
+  text-align: center;
+}
+
+:where([data-slot="empty-state-title"]) {
+  margin: 0;
+}
+
+:where([data-slot="empty-state-description"]) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
 }

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

@@ -0,0 +1,78 @@
+:where([data-slot="grid"]) {
+  display: grid;
+  grid-template-columns: var(--ak-grid-columns-base, minmax(0, 1fr));
+  align-items: var(--ak-grid-align-base, stretch);
+  gap: var(--ak-grid-gap-base, var(--ak-space-lg));
+  min-inline-size: 0;
+}
+
+@media (min-width: 40rem) {
+  :where([data-slot="grid"]) {
+    grid-template-columns: var(--ak-grid-columns-sm, var(--ak-grid-columns-base, minmax(0, 1fr)));
+    align-items: var(--ak-grid-align-sm, var(--ak-grid-align-base, stretch));
+    gap: var(--ak-grid-gap-sm, var(--ak-grid-gap-base, var(--ak-space-lg)));
+  }
+}
+
+@media (min-width: 48rem) {
+  :where([data-slot="grid"]) {
+    grid-template-columns: var(
+      --ak-grid-columns-md,
+      var(--ak-grid-columns-sm, var(--ak-grid-columns-base, minmax(0, 1fr)))
+    );
+    align-items: var(
+      --ak-grid-align-md,
+      var(--ak-grid-align-sm, var(--ak-grid-align-base, stretch))
+    );
+    gap: var(--ak-grid-gap-md, var(--ak-grid-gap-sm, var(--ak-grid-gap-base, var(--ak-space-lg))));
+  }
+}
+
+@media (min-width: 64rem) {
+  :where([data-slot="grid"]) {
+    grid-template-columns: var(
+      --ak-grid-columns-lg,
+      var(
+        --ak-grid-columns-md,
+        var(--ak-grid-columns-sm, var(--ak-grid-columns-base, minmax(0, 1fr)))
+      )
+    );
+    align-items: var(
+      --ak-grid-align-lg,
+      var(--ak-grid-align-md, var(--ak-grid-align-sm, var(--ak-grid-align-base, stretch)))
+    );
+    gap: var(
+      --ak-grid-gap-lg,
+      var(--ak-grid-gap-md, var(--ak-grid-gap-sm, var(--ak-grid-gap-base, var(--ak-space-lg))))
+    );
+  }
+}
+
+@media (min-width: 80rem) {
+  :where([data-slot="grid"]) {
+    grid-template-columns: var(
+      --ak-grid-columns-xl,
+      var(
+        --ak-grid-columns-lg,
+        var(
+          --ak-grid-columns-md,
+          var(--ak-grid-columns-sm, var(--ak-grid-columns-base, minmax(0, 1fr)))
+        )
+      )
+    );
+    align-items: var(
+      --ak-grid-align-xl,
+      var(
+        --ak-grid-align-lg,
+        var(--ak-grid-align-md, var(--ak-grid-align-sm, var(--ak-grid-align-base, stretch)))
+      )
+    );
+    gap: var(
+      --ak-grid-gap-xl,
+      var(
+        --ak-grid-gap-lg,
+        var(--ak-grid-gap-md, var(--ak-grid-gap-sm, var(--ak-grid-gap-base, var(--ak-space-lg))))
+      )
+    );
+  }
+}