@askrjs/themes 0.0.3 → 0.0.6

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

@@ -1,17 +1,24 @@
-:where([data-slot="select-trigger"]) {
+:where(.select-trigger, [data-slot="select-trigger"]) {
+  --_select-height: var(--ak-density-control-height-md);
+  --_select-padding-x: var(--ak-density-control-padding-x-md);
+  --_select-border: color-mix(in srgb, var(--ak-color-border) 84%, var(--ak-color-surface) 16%);
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--ak-space-sm);
-  min-height: 2.875rem;
-  min-width: 12rem;
+  min-height: var(--_select-height);
+  min-width: min(12rem, 100%);
   width: 100%;
-  padding: 0 calc(var(--ak-space-lg) + 0.125rem);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 82%, white);
+  padding-block: 0;
+  padding-inline: var(--_select-padding-x);
+  border: 1px solid var(--_select-border);
   border-radius: var(--ak-radius-md);
   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-medium);
+  line-height: 1;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -19,28 +26,28 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-trigger"]:hover) {
+:where(.select-trigger:hover, [data-slot="select-trigger"]:hover) {
   background: var(--ak-color-surface-muted);
   border-color: var(--ak-color-border-strong);
 }
 
-:where([data-slot="select-trigger"]:focus-visible) {
+:where(.select-trigger:focus-visible, [data-slot="select-trigger"]:focus-visible) {
   outline: none;
   border-color: var(--ak-color-primary);
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 
-:where([data-slot="select-trigger"][data-state="open"]) {
+:where(.select-trigger[data-state="open"], [data-slot="select-trigger"][data-state="open"]) {
   border-color: var(--ak-color-primary);
   background: color-mix(in srgb, var(--ak-color-primary-soft) 12%, var(--ak-color-surface));
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 
-:where([data-slot="select-trigger"][data-disabled]) {
+:where(.select-trigger[data-disabled], [data-slot="select-trigger"][data-disabled]) {
   background: var(--ak-color-disabled-surface);
   border-color: var(--ak-color-disabled-border);
   box-shadow: none;
@@ -49,7 +56,19 @@
   cursor: not-allowed;
 }
 
-:where([data-slot="select-value"][data-placeholder]) {
+:where(.select-trigger-sm, [data-slot="select-trigger"][data-size="sm"]) {
+  --_select-height: var(--ak-density-control-height-sm);
+  --_select-padding-x: var(--ak-density-control-padding-x-sm);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where(.select-trigger-lg, [data-slot="select-trigger"][data-size="lg"]) {
+  --_select-height: var(--ak-density-control-height-lg);
+  --_select-padding-x: var(--ak-density-control-padding-x-lg);
+  font-size: var(--ak-font-size-sm);
+}
+
+:where(.select-value[data-placeholder], [data-slot="select-value"][data-placeholder]) {
   color: var(--ak-color-text-subtle);
 }
 
@@ -75,59 +94,79 @@
   }
 }
 
-:where([data-slot="select-content"]) {
+:where(.select-content, [data-slot="select-content"]) {
+  --_select-surface: var(--ak-color-surface-overlay);
+  --_select-border: color-mix(
+    in srgb,
+    var(--ak-color-border-subtle) 88%,
+    var(--_select-surface) 12%
+  );
+
   display: grid;
   gap: 0.25rem;
-  min-width: 12rem;
+  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: calc(var(--ak-space-sm) + 0.125rem);
-  border: 1px solid var(--ak-color-border-subtle);
+  border: 1px solid var(--_select-border);
   border-radius: var(--ak-radius-lg);
-  background: var(--ak-color-surface-raised);
+  background: var(--_select-surface);
   box-shadow: var(--ak-shadow-md);
+  z-index: var(--ak-z-dropdown);
+  transform-origin: top center;
   animation: ak-select-in var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-content"][data-state="closed"]) {
+:where(.select-content[data-state="closed"], [data-slot="select-content"][data-state="closed"]) {
   animation: ak-select-out var(--ak-duration-fast) var(--ak-ease-standard);
+  pointer-events: none;
 }
 
-:where([data-slot="select-item"]) {
+:where(.select-item, [data-slot="select-item"]) {
   display: flex;
   align-items: center;
-  min-height: 2.5rem;
-  padding: 0 calc(var(--ak-space-md) + 0.125rem);
+  min-height: var(--ak-density-control-height-md);
+  padding: 0 var(--ak-density-control-padding-x-md);
   border-radius: var(--ak-radius-md);
   color: var(--ak-color-text);
   cursor: pointer;
+  font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-medium);
+  overflow-wrap: anywhere;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="select-item"][data-state="checked"]) {
+:where(.select-item[data-state="checked"], [data-slot="select-item"][data-state="checked"]) {
   background: var(--ak-color-primary-soft);
   color: var(--ak-color-primary-ink);
 }
 
-:where([data-slot="select-item"]:hover) {
+:where(.select-item:hover, [data-slot="select-item"]:hover) {
   background: color-mix(in srgb, var(--ak-color-hover) 68%, var(--ak-color-surface));
 }
 
-:where([data-slot="select-item"]:focus-visible) {
+:where(.select-item:focus-visible, [data-slot="select-item"]:focus-visible) {
   outline: none;
   background: color-mix(in srgb, var(--ak-color-primary-soft) 32%, var(--ak-color-surface));
+  box-shadow: inset 0 0 0 1px var(--ak-color-focus-ring);
 }
 
-:where([data-slot="select-item"][data-disabled]) {
+:where(.select-item[data-disabled], [data-slot="select-item"][data-disabled]) {
   color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-:where([data-slot="select-label"]) {
+:where(.select-group, [data-slot="select-group"]) {
+  display: grid;
+  gap: 0.25rem;
+}
+
+:where(.select-label, [data-slot="select-label"]) {
   padding: 0 var(--ak-space-md);
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-xs);
@@ -136,8 +175,14 @@
   text-transform: uppercase;
 }
 
-:where([data-slot="select-separator"]) {
+:where(.select-separator, [data-slot="select-separator"]) {
   block-size: 1px;
   background: var(--ak-color-border);
   margin: 0.25rem 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.select-content, [data-slot="select-content"]) {
+    animation: none;
+  }
+}

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

@@ -1,16 +1,18 @@
-[data-slot="slider"] {
+:where([data-slot="slider"]) {
   position: relative;
   display: flex;
   align-items: center;
-  min-height: 1.5rem;
+  min-block-size: 1.75rem;
+  min-inline-size: 0;
+  touch-action: none;
 }
 
-[data-slot="slider"][data-orientation="vertical"] {
-  min-height: 10rem;
-  min-width: 1.5rem;
+:where([data-slot="slider"][data-orientation="vertical"]) {
+  min-block-size: 10rem;
+  min-inline-size: 1.75rem;
 }
 
-[data-slot="slider-track"] {
+:where([data-slot="slider-track"]) {
   position: relative;
   flex: 1;
   block-size: 0.375rem;
@@ -18,12 +20,12 @@
   background: var(--ak-color-surface-muted);
 }
 
-[data-slot="slider-track"][data-orientation="vertical"] {
+:where([data-slot="slider-track"][data-orientation="vertical"]) {
   inline-size: 0.375rem;
   block-size: 100%;
 }
 
-[data-slot="slider-range"] {
+:where([data-slot="slider-range"]) {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
@@ -33,14 +35,14 @@
   opacity: 0.85;
 }
 
-[data-slot="slider-range"][data-orientation="vertical"] {
+:where([data-slot="slider-range"][data-orientation="vertical"]) {
   inset-block-end: 0;
   inset-block-start: auto;
   inline-size: 100%;
   block-size: var(--ak-slider-percentage);
 }
 
-[data-slot="slider-thumb"] {
+:where([data-slot="slider-thumb"]) {
   position: absolute;
   inline-size: 1rem;
   block-size: 1rem;
@@ -51,25 +53,39 @@
   transition: box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="slider-thumb"][data-orientation="horizontal"] {
+:where([data-slot="slider-thumb"][data-orientation="horizontal"]) {
   inset-inline-start: calc(var(--ak-slider-percentage) - 0.5rem);
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
-[data-slot="slider-thumb"][data-orientation="vertical"] {
+:where([data-slot="slider-thumb"][data-orientation="vertical"]) {
   inset-inline-start: 50%;
   inset-block-end: calc(var(--ak-slider-percentage) - 0.5rem);
   transform: translateX(-50%);
 }
 
-[data-slot="slider-thumb"]:focus-visible {
+:where([data-slot="slider-thumb"]:focus-visible) {
   outline: none;
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="slider"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="slider"][data-disabled]) {
   cursor: not-allowed;
   pointer-events: none;
 }
+
+:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-track"]) {
+  background: var(--ak-color-disabled-surface);
+}
+
+:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-range"]) {
+  background: var(--ak-color-disabled-border);
+  opacity: 1;
+}
+
+:where([data-slot="slider"][data-disabled]) :where([data-slot="slider-thumb"]) {
+  border-color: var(--ak-color-disabled-border);
+  background: var(--ak-color-disabled-bg);
+  box-shadow: none;
+}

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

@@ -5,6 +5,7 @@
   justify-content: flex-start;
   inline-size: 3.3rem;
   block-size: 2rem;
+  flex: none;
   padding: 0.2rem;
   border: 1px solid var(--ak-color-border-strong);
   border-radius: var(--ak-radius-round);
@@ -51,7 +52,7 @@
 :where([data-slot="switch"]:focus-visible) {
   outline: none;
   box-shadow:
-    0 0 0 4px var(--ak-color-focus-ring),
+    0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring),
     var(--ak-shadow-sm);
 }
 

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

@@ -1,13 +1,18 @@
 :where(.textarea, [data-slot="textarea"]) {
+  --_textarea-min-height: 7rem;
+  --_textarea-padding-block: var(--ak-space-sm);
+  --_textarea-padding-inline: var(--ak-space-md);
   box-sizing: border-box;
   width: 100%;
-  min-height: 7rem;
-  padding: var(--ak-space-sm) var(--ak-space-md);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border) 84%, white 16%);
+  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-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);
   resize: vertical;
   box-shadow: var(--ak-shadow-sm);
   transition:
@@ -16,7 +21,7 @@
 }
 
 :where(.textarea, [data-slot="textarea"])::placeholder {
-  color: var(--ak-color-text-muted);
+  color: var(--ak-color-text-subtle);
 }
 
 :where(.textarea:hover, [data-slot="textarea"]:hover) {
@@ -27,11 +32,35 @@
 :where(.textarea:focus-visible, [data-slot="textarea"]:focus-visible) {
   outline: none;
   border-color: var(--ak-color-primary);
-  box-shadow: 0 0 0 3px var(--ak-color-focus-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));
+  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]) {
-  opacity: 0.5;
+  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;
 }
+
+:where(.textarea-sm, [data-slot="textarea"][data-size="sm"]) {
+  --_textarea-min-height: 5.75rem;
+  --_textarea-padding-block: var(--ak-space-xs);
+  --_textarea-padding-inline: var(--ak-space-sm);
+  font-size: var(--ak-font-size-xs);
+}
+
+:where(.textarea-lg, [data-slot="textarea"][data-size="lg"]) {
+  --_textarea-min-height: 8.75rem;
+  --_textarea-padding-block: var(--ak-space-md);
+  --_textarea-padding-inline: var(--ak-space-lg);
+  font-size: var(--ak-font-size-sm);
+}

package/templates/theme/styles/layout/aspect-ratio.css

@@ -1,5 +1,7 @@
 :where([data-slot="aspect-ratio"]) {
   display: block;
-  width: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
   overflow: hidden;
 }

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

@@ -0,0 +1,23 @@
+:where([data-slot="block"]) {
+  display: grid;
+}
+
+:where([data-slot="block"][data-size="initial:xs"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:sm"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:md"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:lg"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+}
+
+:where([data-slot="block"][data-size="initial:xl"]) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
+}

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

@@ -1,9 +1,10 @@
 :where(.empty-state, [data-slot="empty-state"]) {
   display: grid;
   place-items: center;
-  gap: var(--ak-space-3);
-  min-block-size: 18rem;
-  padding: var(--ak-space-7) var(--ak-space-4);
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  min-block-size: min(18rem, 52dvh);
+  padding: clamp(var(--ak-space-lg), 7vw, var(--ak-space-6)) var(--ak-space-4);
   border: 1px dashed var(--ak-color-border);
   border-radius: var(--ak-radius-lg);
   background: color-mix(in srgb, var(--ak-color-surface-muted) 80%, transparent);
@@ -25,6 +26,9 @@
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
   font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: 0;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
 }
 
 :where(.empty-state-description, [data-slot="empty-state-description"]) {
@@ -32,6 +36,7 @@
   max-inline-size: 32rem;
   color: var(--ak-color-text-muted);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }
 
 :where(.empty-state-actions, [data-slot="empty-state-actions"]) {
@@ -40,4 +45,151 @@
   justify-content: center;
   gap: var(--ak-space-2);
   flex-wrap: wrap;
+  max-inline-size: 100%;
+}
+
+:where(.section-header) {
+  display: grid;
+  max-inline-size: 54rem;
+}
+
+:where(.section-header-copy) {
+  display: grid;
+  gap: 0.7rem;
+}
+
+:where(.eyebrow) {
+  margin: 0;
+  color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-xs);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: 0.09em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.section-header) :where(h1) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: clamp(2.4rem, 1.55rem + 2.6vw, 4rem);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: -0.055em;
+  line-height: 0.98;
+  text-wrap: balance;
+}
+
+:where(.section-header) :where(h2) {
+  margin: 0;
+  color: var(--ak-color-text);
+  font-size: var(--ak-type-7-size);
+  font-weight: var(--ak-font-weight-bold);
+  letter-spacing: var(--ak-type-7-letter-spacing);
+  line-height: var(--ak-type-7-line-height);
+  text-wrap: balance;
+}
+
+:where(.section-header-description) {
+  line-height: 1.68;
+}
+
+:where(.icon-badge) {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.65rem;
+  block-size: 2.65rem;
+  border-radius: 0.9rem;
+  background: color-mix(in srgb, var(--ak-color-primary-soft) 70%, var(--ak-color-surface));
+  color: var(--ak-color-primary);
+}
+
+:where(.site-footer) {
+  display: grid;
+  margin-top: clamp(4rem, 3rem + 2vw, 6rem);
+  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
+  padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem);
+  border-top: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 78%, var(--ak-color-surface) 22%);
+  background: color-mix(in srgb, var(--ak-color-surface) 42%, transparent);
+}
+
+:where(.site-footer) > :where([data-slot="container"]) {
+  display: grid;
+  gap: clamp(1.5rem, 1rem + 1vw, 2.25rem);
+}
+
+:where(.site-footer) :where([data-slot="block"]) {
+  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
+}
+
+:where(.site-footer) :where([data-slot="block"] > *) {
+  min-width: 0;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child) {
+  max-width: 34rem;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > p:first-child) {
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > a) {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  color: var(--ak-color-text);
+  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
+  letter-spacing: -0.04em;
+  text-decoration: none;
+}
+
+:where(.site-footer) :where([data-slot="block"] > :first-child > p:last-of-type) {
+  max-inline-size: 50ch;
+}
+
+:where(.site-footer) :where([data-slot="badge"]) {
+  color: var(--ak-color-text-muted);
+}
+
+:where(.site-footer) :where(h3) {
+  margin: 0;
+  font-size: 0.92rem;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+:where(.site-footer) :where(nav a) {
+  display: block;
+  padding: 0.35rem 0;
+  color: var(--ak-color-text-muted);
+  text-decoration: none;
+  transition:
+    color var(--ak-duration-fast) var(--ak-ease-standard),
+    text-decoration-color var(--ak-duration-fast) var(--ak-ease-standard);
+}
+
+:where(.site-footer) :where(nav a:hover) {
+  color: var(--ak-color-text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--ak-color-primary) 32%, transparent);
+  text-underline-offset: 0.18em;
+}
+
+:where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
+  margin-top: 0.25rem;
+  font-size: 0.92rem;
+}
+
+@media (max-width: 48rem) {
+  :where(.site-footer) :where([data-slot="block"]) {
+    grid-template-columns: 1fr;
+  }
+
+  :where(.site-footer) > :where([data-slot="container"]) > :where([data-slot="flex"]:last-child) {
+    justify-content: flex-start;
+  }
 }