@askrjs/themes 0.0.9 → 0.0.11

package/templates/theme/styles/disclosure/accordion.css

@@ -1,18 +1,12 @@
 :where([data-slot="accordion"]) {
   display: grid;
-  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  border-block-start: 1px solid var(--ak-color-border-subtle);
 }
 
 :where([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);
-}
-
-:where([data-slot="accordion-item"][data-state="open"]) {
-  border-color: var(--ak-color-primary);
+  min-inline-size: 0;
+  border-block-end: 1px solid var(--ak-color-border-subtle);
 }
 
 :where([data-slot="accordion-header"]) {
@@ -21,50 +15,63 @@
 
 :where([data-slot="accordion-trigger"]) {
   display: flex;
+  inline-size: 100%;
+  min-block-size: var(--ak-density-control-height-lg);
   align-items: center;
   justify-content: space-between;
-  inline-size: 100%;
-  min-height: var(--ak-density-control-height-lg);
-  min-inline-size: 0;
-  padding: 0 var(--ak-density-control-padding-x-md);
+  gap: var(--ak-space-md);
+  padding: var(--ak-space-sm) 0;
   border: 0;
+  border-radius: var(--ak-radius-md);
   background: transparent;
   color: var(--ak-color-text);
+  font: inherit;
   font-size: var(--ak-font-size-sm);
-  font-weight: var(--ak-font-weight-semibold);
-  line-height: 1.2;
-  overflow-wrap: anywhere;
+  font-weight: var(--ak-font-weight-medium);
+  line-height: var(--ak-line-height-normal);
   text-align: start;
   cursor: pointer;
   transition:
-    background var(--ak-duration-fast) var(--ak-ease-standard),
     color var(--ak-duration-fast) var(--ak-ease-standard),
+    background var(--ak-duration-fast) var(--ak-ease-standard),
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="accordion-trigger"]:hover) {
-  background: var(--ak-color-hover);
+:where([data-slot="accordion-trigger"]::after) {
+  content: "";
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  flex: 0 0 auto;
+  border-inline-end: 1.5px solid currentColor;
+  border-block-end: 1.5px solid currentColor;
+  opacity: 0.72;
+  transform: rotate(45deg);
+  transition: transform var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-:where([data-slot="accordion-trigger"]:active) {
-  background: var(--ak-color-active);
+:where([data-slot="accordion-trigger"]:hover) {
+  color: var(--ak-color-text);
+  background: var(--ak-color-hover);
 }
 
 :where([data-slot="accordion-trigger"]:focus-visible) {
   outline: none;
-  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-:where([data-slot="accordion-trigger"][data-disabled]) {
-  color: var(--ak-color-disabled-text);
-  pointer-events: none;
+:where([data-slot="accordion-trigger"][data-state="open"]::after) {
+  transform: rotate(225deg);
+}
+
+:where([data-slot="accordion-trigger"][data-disabled="true"]) {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 :where([data-slot="accordion-content"]) {
-  padding: 0 var(--ak-space-md) var(--ak-space-md);
+  min-inline-size: 0;
+  padding-block: 0 var(--ak-space-md);
   color: var(--ak-color-text-muted);
   font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
-  overflow-wrap: anywhere;
 }

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

@@ -1,6 +1,6 @@
 :where(.alert, [data-slot="alert"]) {
-  --_alert-bg: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface));
-  --_alert-border: color-mix(in srgb, var(--ak-color-border) 82%, var(--ak-color-surface));
+  --_alert-bg: transparent;
+  --_alert-border: var(--ak-color-border);
   --_alert-ink: var(--ak-color-text);
   --_alert-icon-bg: var(--ak-color-surface);
   --_alert-icon-ink: var(--ak-color-text-muted);
@@ -14,11 +14,11 @@
   border-radius: var(--ak-radius-lg);
   background: var(--_alert-bg);
   color: var(--_alert-ink);
-  box-shadow: var(--ak-shadow-sm);
+  box-shadow: none;
 }
 
 :where(.alert.alert-info, [data-slot="alert"][data-variant="info"]) {
-  --_alert-bg: color-mix(in srgb, var(--ak-color-info-soft) 52%, var(--ak-color-surface));
+  --_alert-bg: transparent;
   --_alert-border: color-mix(in srgb, var(--ak-color-info) 16%, var(--ak-color-border));
   --_alert-ink: var(--ak-color-info-ink);
   --_alert-icon-bg: color-mix(in srgb, var(--ak-color-info-soft) 60%, var(--ak-color-surface));
@@ -26,7 +26,7 @@
 }
 
 :where(.alert.alert-success, [data-slot="alert"][data-variant="success"]) {
-  --_alert-bg: color-mix(in srgb, var(--ak-color-success-soft) 52%, var(--ak-color-surface));
+  --_alert-bg: transparent;
   --_alert-border: color-mix(in srgb, var(--ak-color-success) 16%, var(--ak-color-border));
   --_alert-ink: var(--ak-color-success-ink);
   --_alert-icon-bg: color-mix(in srgb, var(--ak-color-success-soft) 60%, var(--ak-color-surface));
@@ -34,7 +34,7 @@
 }
 
 :where(.alert.alert-warning, [data-slot="alert"][data-variant="warning"]) {
-  --_alert-bg: color-mix(in srgb, var(--ak-color-warning-soft) 52%, var(--ak-color-surface));
+  --_alert-bg: transparent;
   --_alert-border: color-mix(in srgb, var(--ak-color-warning) 16%, var(--ak-color-border));
   --_alert-ink: var(--ak-color-warning-ink);
   --_alert-icon-bg: color-mix(in srgb, var(--ak-color-warning-soft) 60%, var(--ak-color-surface));
@@ -42,7 +42,7 @@
 }
 
 :where(.alert.alert-danger, [data-slot="alert"][data-variant="danger"]) {
-  --_alert-bg: color-mix(in srgb, var(--ak-color-danger-soft) 52%, var(--ak-color-surface));
+  --_alert-bg: transparent;
   --_alert-border: color-mix(in srgb, var(--ak-color-danger) 16%, var(--ak-color-border));
   --_alert-ink: var(--ak-color-danger-ink);
   --_alert-icon-bg: color-mix(in srgb, var(--ak-color-danger-soft) 60%, var(--ak-color-surface));

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

@@ -2,17 +2,17 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  min-height: 1.5rem;
+  min-height: 1.25rem;
   min-inline-size: 0;
   max-inline-size: 100%;
-  padding: 0 0.55rem;
-  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);
+  padding: 0.125rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--ak-radius-md);
+  background: var(--ak-color-primary);
+  color: var(--ak-color-text-inverse);
   box-shadow: none;
   font-size: var(--ak-font-size-xs);
-  font-weight: var(--ak-font-weight-semibold);
+  font-weight: var(--ak-font-weight-medium);
   line-height: 1;
   letter-spacing: 0;
   overflow-wrap: normal;
@@ -26,12 +26,11 @@
 
 :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);
+  background: transparent;
   border-color: var(--ak-color-border);
   color: var(--ak-color-text);
 }

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

@@ -1,13 +1,13 @@
 :where(.card, [data-slot="card"]) {
   display: grid;
-  gap: var(--ak-space-md);
-  padding: var(--ak-layout-panel-padding);
-  border: 1px solid
-    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface) 14%);
-  border-radius: var(--ak-radius-md);
+  gap: var(--ak-space-6);
+  padding: var(--ak-space-6) 0;
+  border: 1px solid var(--ak-color-border);
+  border-radius: var(--ak-radius-xl);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
-  box-shadow: var(--ak-shadow-sm);
+  overflow: hidden;
+  box-shadow: none;
 }
 
 :where(.card-raised, [data-slot="card"][data-variant="raised"]) {
@@ -16,50 +16,13 @@
   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"]) {
+:where(.card, [data-slot="card"]) :where(h2, h3, h4, h5, h6) {
   margin: 0;
-  color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
-  font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: -0.01em;
-  line-height: 1.2;
+  line-height: var(--ak-line-height-tight);
+  letter-spacing: 0;
 }
 
-:where(.card-description, [data-slot="card-description"]) {
+:where(.card, [data-slot="card"]) :where(p) {
   margin: 0;
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-sm);
-  line-height: var(--ak-line-height-normal);
-}
-
-: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;
-}
-
-:where(.card-actions, [data-slot="card-actions"]) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-space-sm);
-  align-items: center;
-  justify-content: flex-end;
 }