@askrjs/themes 0.0.15 → 0.0.17

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

@@ -30,10 +30,12 @@
   --ak-flex-grow-sm: var(--ak-flex-grow-base);
   --ak-flex-grow-md: var(--ak-flex-grow-sm);
   --ak-flex-grow-lg: var(--ak-flex-grow-md);
+  --ak-flex-grow-xl: var(--ak-flex-grow-lg);
   --ak-flex-shrink-base: 1;
   --ak-flex-shrink-sm: var(--ak-flex-shrink-base);
   --ak-flex-shrink-md: var(--ak-flex-shrink-sm);
   --ak-flex-shrink-lg: var(--ak-flex-shrink-md);
+  --ak-flex-shrink-xl: var(--ak-flex-shrink-lg);
   --ak-flex-basis-base: auto;
   --ak-flex-basis-sm: var(--ak-flex-basis-base);
   --ak-flex-basis-md: var(--ak-flex-basis-sm);
@@ -42,24 +44,32 @@
   --ak-min-width-sm: var(--ak-min-width-base);
   --ak-min-width-md: var(--ak-min-width-sm);
   --ak-min-width-lg: var(--ak-min-width-md);
+  --ak-min-width-xl: var(--ak-min-width-lg);
   --ak-max-width-base: none;
   --ak-max-width-sm: var(--ak-max-width-base);
   --ak-max-width-md: var(--ak-max-width-sm);
   --ak-max-width-lg: var(--ak-max-width-md);
+  --ak-max-width-xl: var(--ak-max-width-lg);
   --ak-width-base: auto;
   --ak-width-sm: var(--ak-width-base);
   --ak-width-md: var(--ak-width-sm);
   --ak-width-lg: var(--ak-width-md);
+  --ak-width-xl: var(--ak-width-lg);
   --ak-min-height-base: auto;
   --ak-min-height-sm: var(--ak-min-height-base);
   --ak-min-height-md: var(--ak-min-height-sm);
   --ak-min-height-lg: var(--ak-min-height-md);
+  --ak-min-height-xl: var(--ak-min-height-lg);
   --ak-max-height-base: none;
   --ak-max-height-sm: var(--ak-max-height-base);
+  --ak-max-height-md: var(--ak-max-height-sm);
+  --ak-max-height-lg: var(--ak-max-height-md);
+  --ak-max-height-xl: var(--ak-max-height-lg);
   --ak-height-base: auto;
   --ak-height-sm: var(--ak-height-base);
   --ak-height-md: var(--ak-height-sm);
   --ak-height-lg: var(--ak-height-md);
+  --ak-height-xl: var(--ak-height-lg);
   --ak-m-base: 0;
   --ak-m-sm: var(--ak-m-base);
   --ak-m-md: var(--ak-m-sm);
@@ -114,6 +124,12 @@
   --ak-border-sm: var(--ak-border-base);
   --ak-border-md: var(--ak-border-sm);
   --ak-border-lg: var(--ak-border-md);
+  --ak-border-xl: var(--ak-border-lg);
+  --ak-border-top-base: var(--ak-border-base);
+  --ak-border-top-sm: var(--ak-border-top-base);
+  --ak-border-top-md: var(--ak-border-top-sm);
+  --ak-border-top-lg: var(--ak-border-top-md);
+  --ak-border-top-xl: var(--ak-border-top-lg);
   --ak-border-bottom-base: var(--ak-border-base);
   --ak-border-bottom-sm: var(--ak-border-bottom-base);
   --ak-border-bottom-md: var(--ak-border-bottom-sm);
@@ -122,6 +138,7 @@
   --ak-border-right-sm: var(--ak-border-right-base);
   --ak-border-right-md: var(--ak-border-right-sm);
   --ak-border-right-lg: var(--ak-border-right-md);
+  --ak-border-right-xl: var(--ak-border-right-lg);
   --ak-border-radius-base: 0;
   --ak-border-radius-sm: var(--ak-border-radius-base);
   --ak-border-radius-md: var(--ak-border-radius-sm);
@@ -130,10 +147,12 @@
   --ak-background-sm: var(--ak-background-base);
   --ak-background-md: var(--ak-background-sm);
   --ak-background-lg: var(--ak-background-md);
+  --ak-background-xl: var(--ak-background-lg);
   --ak-box-shadow-base: none;
   --ak-box-shadow-sm: var(--ak-box-shadow-base);
   --ak-box-shadow-md: var(--ak-box-shadow-sm);
   --ak-box-shadow-lg: var(--ak-box-shadow-md);
+  --ak-box-shadow-xl: var(--ak-box-shadow-lg);
 
   box-sizing: border-box;
   display: var(--ak-display-base, flex);
@@ -168,6 +187,7 @@
   overflow-x: var(--ak-overflow-x-base, var(--ak-overflow-base, visible));
   overflow-y: var(--ak-overflow-y-base, var(--ak-overflow-base, visible));
   border: var(--ak-border-base, 0 solid transparent);
+  border-top: var(--ak-border-top-base, var(--ak-border-base, 0 solid transparent));
   border-bottom: var(--ak-border-bottom-base, var(--ak-border-base, 0 solid transparent));
   border-right: var(--ak-border-right-base, var(--ak-border-base, 0 solid transparent));
   border-radius: var(--ak-border-radius-base, 0);
@@ -215,6 +235,10 @@
       var(--ak-overflow-y-base, var(--ak-overflow-sm, var(--ak-overflow-base, visible)))
     );
     border: var(--ak-border-sm, var(--ak-border-base, 0 solid transparent));
+    border-top: var(
+      --ak-border-top-sm,
+      var(--ak-border-top-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+    );
     border-bottom: var(
       --ak-border-bottom-sm,
       var(--ak-border-bottom-base, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
@@ -251,6 +275,7 @@
     max-width: var(--ak-max-width-md, var(--ak-max-width-sm, var(--ak-max-width-base, none)));
     width: var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto)));
     min-height: var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)));
+    max-height: var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)));
     height: var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto)));
     margin: var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)));
     margin-inline: var(
@@ -274,6 +299,16 @@
     top: var(--ak-top-md, var(--ak-top-sm, var(--ak-top-base, auto)));
     z-index: var(--ak-z-index-md, var(--ak-z-index-sm, var(--ak-z-index-base, auto)));
     border: var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)));
+    border-top: var(
+      --ak-border-top-md,
+      var(
+        --ak-border-top-sm,
+        var(
+          --ak-border-top-base,
+          var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-md,
       var(
@@ -411,6 +446,22 @@
       --ak-border-lg,
       var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
     );
+    border-top: var(
+      --ak-border-top-lg,
+      var(
+        --ak-border-top-md,
+        var(
+          --ak-border-top-sm,
+          var(
+            --ak-border-top-base,
+            var(
+              --ak-border-lg,
+              var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
+            )
+          )
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-lg,
       var(
@@ -495,6 +546,27 @@
       --ak-gap-xl,
       var(--ak-gap-lg, var(--ak-gap-md, var(--ak-gap-sm, var(--ak-gap-base, 0))))
     );
+    flex-grow: var(
+      --ak-flex-grow-xl,
+      var(
+        --ak-flex-grow-lg,
+        var(--ak-flex-grow-md, var(--ak-flex-grow-sm, var(--ak-flex-grow-base, 0)))
+      )
+    );
+    flex-shrink: var(
+      --ak-flex-shrink-xl,
+      var(
+        --ak-flex-shrink-lg,
+        var(--ak-flex-shrink-md, var(--ak-flex-shrink-sm, var(--ak-flex-shrink-base, 1)))
+      )
+    );
+    min-width: var(
+      --ak-min-width-xl,
+      var(
+        --ak-min-width-lg,
+        var(--ak-min-width-md, var(--ak-min-width-sm, var(--ak-min-width-base, 0)))
+      )
+    );
     width: var(
       --ak-width-xl,
       var(--ak-width-lg, var(--ak-width-md, var(--ak-width-sm, var(--ak-width-base, auto))))
@@ -513,6 +585,17 @@
         var(--ak-min-height-md, var(--ak-min-height-sm, var(--ak-min-height-base, auto)))
       )
     );
+    max-height: var(
+      --ak-max-height-xl,
+      var(
+        --ak-max-height-lg,
+        var(--ak-max-height-md, var(--ak-max-height-sm, var(--ak-max-height-base, none)))
+      )
+    );
+    height: var(
+      --ak-height-xl,
+      var(--ak-height-lg, var(--ak-height-md, var(--ak-height-sm, var(--ak-height-base, auto))))
+    );
     margin: var(--ak-m-xl, var(--ak-m-lg, var(--ak-m-md, var(--ak-m-sm, var(--ak-m-base, 0)))));
     margin-inline: var(
       --ak-mx-xl,
@@ -601,6 +684,31 @@
         var(--ak-border-md, var(--ak-border-sm, var(--ak-border-base, 0 solid transparent)))
       )
     );
+    border-top: var(
+      --ak-border-top-xl,
+      var(
+        --ak-border-top-lg,
+        var(
+          --ak-border-top-md,
+          var(
+            --ak-border-top-sm,
+            var(
+              --ak-border-top-base,
+              var(
+                --ak-border-xl,
+                var(
+                  --ak-border-lg,
+                  var(
+                    --ak-border-md,
+                    var(--ak-border-sm, var(--ak-border-base, 0 solid transparent))
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    );
     border-bottom: var(
       --ak-border-bottom-xl,
       var(

package/templates/theme/styles/overlays/toast.css

@@ -133,6 +133,17 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
+:where([data-slot="toast-action"]) {
+  grid-column: 1;
+  grid-row: 3;
+  justify-self: start;
+  margin-block-start: var(--ak-space-xs);
+}
+
+:where([data-slot="toast"]:has([data-slot="toast-icon"]) [data-slot="toast-action"]) {
+  grid-column: 2;
+}
+
 :where([data-slot="toast-action"]:hover),
 :where([data-slot="toast-close"]:hover) {
   background: var(--ak-color-primary-hover);

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

@@ -145,7 +145,10 @@
 }
 
 :where([data-slot="navbar"][data-collapse-at])
-  :where([data-slot="navbar-collapse"][open] [data-slot="navbar-content"]) {
+  :where(
+    [data-slot="navbar-collapse"] [data-slot="navbar-content"][data-state="open"],
+    [data-slot="navbar-collapse"][open] [data-slot="navbar-content"]
+  ) {
   display: flex;
 }
 

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

@@ -41,11 +41,26 @@
 }
 
 :where([data-slot="sidebar-header"], [data-slot="sidebar-footer"]) {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   gap: var(--ak-space-xs);
+}
+
+:where([data-slot="sidebar-header"]) {
   padding: var(--ak-space-sm);
 }
 
+:where([data-slot="sidebar-footer"] [data-slot="sidebar-menu"]),
+:where([data-slot="sidebar-footer"] [data-slot="sidebar-menu-item"]),
+:where([data-slot="sidebar-footer"] [data-slot="block"]) {
+  inline-size: 100%;
+}
+
+:where([data-slot="sidebar-footer"] [data-slot="sidebar-menu-button"]) {
+  min-inline-size: var(--ak-density-control-height-sm);
+}
+
 :where([data-slot="sidebar-content"]) {
   display: flex;
   flex: 1 1 auto;
@@ -79,6 +94,7 @@
 :where([data-slot="sidebar-menu"]) {
   display: grid;
   gap: var(--ak-space-xs);
+  inline-size: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -86,6 +102,7 @@
 
 :where([data-slot="sidebar-menu-item"]) {
   position: relative;
+  inline-size: 100%;
   min-inline-size: 0;
 }
 

package/templates/theme/tokens.css

@@ -174,7 +174,7 @@
   --ak-dark-color-primary-hover: color-mix(in oklch, var(--ak-dark-color-primary) 90%, transparent);
   --ak-dark-color-primary-active: color-mix(in oklch, var(--ak-dark-color-primary) 84%, black);
   --ak-dark-color-primary-soft: oklch(0.269 0 0);
-  --ak-dark-color-primary-ink: oklch(0.205 0 0);
+  --ak-dark-color-primary-ink: oklch(0.985 0 0);
 
   --ak-dark-color-text: oklch(0.985 0 0);
   --ak-dark-color-text-muted: oklch(0.708 0 0);