@sethmakes/css 0.1.0 → 0.1.1

package/index.css

@@ -13,8 +13,6 @@
  * tokens-only consumption stays possible.
  */
 
-/* mk.utilities is declared-but-empty: reserved so adding utilities later
-   can't reorder the cascade. */
 @layer mk.reset, mk.base, mk.components, mk.utilities;
 
 @import "./src/reset.css";
@@ -24,6 +22,7 @@
 @import "./src/badge.css";
 @import "./src/forms.css";
 @import "./src/card.css";
+@import "./src/appbar.css";
 @import "./src/table.css";
 @import "./src/divider.css";
 @import "./src/disclosure.css";
@@ -32,3 +31,4 @@
 @import "./src/progress.css";
 @import "./src/media.css";
 @import "./src/empty.css";
+@import "./src/utilities.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sethmakes/css",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Class-based styles for native HTML in the sethmakes design language.",
   "license": "MIT",
   "repository": {
@@ -18,7 +18,7 @@
     "src"
   ],
   "dependencies": {
-    "@sethmakes/tokens": "0.1.0"
+    "@sethmakes/tokens": "0.1.1"
   },
   "keywords": [
     "css",

package/src/appbar.css

@@ -0,0 +1,34 @@
+@layer mk.components {
+  /*
+   * App bar — sticky app chrome. The translucent surface + backdrop blur is
+   * the one sanctioned translucency in the language: chrome floats over
+   * scrolling content, everything else is opaque tonal. Sits on the chrome
+   * elevation layer (below overlays and toasts, by policy). Safe-area
+   * padded for notched devices.
+   */
+  .mk-appbar {
+    position: sticky;
+    top: 0;
+    z-index: var(--mk-layer-chrome);
+    display: flex;
+    align-items: center;
+    gap: var(--mk-space-4);
+    padding-block: var(--mk-space-3);
+    padding-inline: max(var(--mk-space-4), env(safe-area-inset-left))
+      max(var(--mk-space-4), env(safe-area-inset-right));
+    background: color-mix(in oklch, var(--mk-color-surface-1) 88%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  /*
+   * Bottom variant — mobile tab-bar chrome. Same surface, pinned to the
+   * bottom edge, padded past the home indicator.
+   */
+  .mk-appbar--bottom {
+    top: auto;
+    bottom: 0;
+    padding-block: var(--mk-space-2)
+      max(var(--mk-space-2), env(safe-area-inset-bottom));
+  }
+}

package/src/badge.css

@@ -32,6 +32,14 @@
     color: var(--mk-color-danger);
   }
 
+  /*
+   * sm — dense list rows. Same type size (xs is already the floor of the
+   * scale); only the padding tightens, so dense badges stay legible.
+   */
+  .mk-badge--sm {
+    padding: 0.1em 0.6em;
+  }
+
   /* Status dot — leading indicator in currentColor */
   .mk-badge--dot::before {
     content: "";

package/src/button.css

@@ -55,6 +55,20 @@
     background: color-mix(in oklch, var(--mk-color-danger), var(--mk-color-text) 12%);
   }
 
+  /*
+   * Active/selected — an honest state for nav tabs, segmented choices, and
+   * toggles, instead of faking it with tonal-vs-ghost contrast. Accent-subtle
+   * so it reads "chosen" without competing with primary actions.
+   */
+  .mk-btn--active {
+    background: var(--mk-color-accent-subtle);
+    color: var(--mk-color-on-accent-subtle);
+  }
+
+  .mk-btn--active:hover {
+    background: color-mix(in oklch, var(--mk-color-accent-subtle), var(--mk-color-on-accent-subtle) 8%);
+  }
+
   /* Sizes */
   .mk-btn--sm {
     font-size: var(--mk-text-xs);
@@ -62,6 +76,17 @@
     min-height: 36px;
   }
 
+  /*
+   * xs — pointer-dense UIs (table rows, list actions). Deliberately below
+   * the 44px touch floor: on touch-first surfaces prefer --sm, or give the
+   * row itself the tap target (as .mk-choice does).
+   */
+  .mk-btn--xs {
+    font-size: var(--mk-text-xs);
+    padding: 0.3em 0.9em;
+    min-height: 28px;
+  }
+
   .mk-btn--lg {
     font-size: var(--mk-text-md);
     padding: 0.7em 1.6em;

package/src/media.css

@@ -12,6 +12,8 @@
     overflow: hidden;
     background: var(--mk-color-surface-2);
     border-radius: var(--mk-radius-surface);
+    /* Size container so the fallback initial can scale to the box */
+    container-type: inline-size;
   }
 
   .mk-thumb--square {
@@ -42,7 +44,12 @@
     place-content: center;
     background: var(--mk-color-surface-3);
     color: var(--mk-color-text-muted);
-    font-size: var(--mk-text-3xl);
+    /*
+     * Scales with the box (the thumb is a size container): a 36px list
+     * thumb gets small type, a full poster gets display size. Clamped to
+     * the type scale at both ends.
+     */
+    font-size: clamp(var(--mk-text-sm), 40cqw, var(--mk-text-3xl));
     font-weight: var(--mk-weight-bold);
     line-height: var(--mk-leading-tight);
     text-transform: uppercase;

package/src/utilities.css

@@ -0,0 +1,15 @@
+@layer mk.utilities {
+  /*
+   * Link reset — for composite links (card-as-link, nav tabs, logos) where
+   * the global accent-and-underline treatment is wrong. Lives in the
+   * utilities layer so it beats mk.base without specificity games.
+   */
+  .mk-link-reset {
+    color: inherit;
+  }
+
+  .mk-link-reset:hover {
+    color: inherit;
+    text-decoration: none;
+  }
+}