@echodial/deck 0.1.0

package/src/08-mobile.css

@@ -0,0 +1,245 @@
+/* ==========================================================================
+   Deck — 08 Mobile
+   The parts Tailwind makes you build yourself every time.
+   ========================================================================== */
+
+@layer deck.mobile {
+
+  /* --- Bottom sheet -------------------------------------------------------
+     <dialog class="sheet"> on a phone, a centred modal from 40rem up.
+     ---------------------------------------------------------------------- */
+  .sheet {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 88dvh;
+    margin: 0;
+    margin-block-start: auto;
+    padding: 0;
+    border: 0;
+    border-start-start-radius: var(--r-lg);
+    border-start-end-radius: var(--r-lg);
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: var(--shadow-4);
+    overflow: clip;
+    translate: 0 100%;
+    transition: translate var(--dur-3) var(--ease-out),
+                display var(--dur-3) allow-discrete,
+                overlay var(--dur-3) allow-discrete;
+  }
+  .sheet[open] { translate: 0; }
+  @starting-style { .sheet[open] { translate: 0 100%; } }
+
+  .sheet::backdrop {
+    background: oklch(18% .02 var(--hue-neutral) / .5);
+    opacity: 0;
+    transition: opacity var(--dur-3) var(--ease-out),
+                display var(--dur-3) allow-discrete,
+                overlay var(--dur-3) allow-discrete;
+  }
+  .sheet[open]::backdrop { opacity: 1; }
+  @starting-style { .sheet[open]::backdrop { opacity: 0; } }
+
+  /* The drag handle at the top of a bottom sheet. Deck draws it and does not
+     implement the drag — swiping down does nothing — so always ship a real
+     close button as well. */
+  .sheet-grip {
+    inline-size: 38px;
+    block-size: 4px;
+    border-radius: var(--r-full);
+    background: var(--ink-300);
+    margin: var(--space-3) auto var(--space-1);
+  }
+  /* The title row of a sheet. */
+  .sheet-header { padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
+  /* The sheet's heading. Point aria-labelledby at it. */
+  .sheet-title { font-size: var(--text-md); font-weight: 640; }
+  /* The scrolling region. Pads for the home indicator, and contains its
+     overscroll so reaching the end does not scroll the page behind. */
+  .sheet-body {
+    padding: var(--space-2) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  @media (min-width: 40rem) {
+    .sheet {
+      inline-size: min(30rem, calc(100vw - var(--space-8)));
+      margin: auto;
+      border-radius: var(--r-lg);
+      translate: 0;
+      opacity: 0;
+      scale: .97;
+      transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-spring),
+                  display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
+    }
+    .sheet[open] { opacity: 1; scale: 1; }
+    @starting-style { .sheet[open] { opacity: 0; scale: .97; } }
+  }
+
+  /* --- Bottom tab bar ----------------------------------------------------- */
+  .tabbar {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: var(--z-nav);
+    display: flex;
+    background: color-mix(in oklab, var(--surface) 88%, transparent);
+    backdrop-filter: saturate(1.8) blur(16px);
+    -webkit-backdrop-filter: saturate(1.8) blur(16px);
+    border-block-start: 1px solid var(--line);
+    padding-block-end: env(safe-area-inset-bottom);
+  }
+  @media (min-width: 48rem) { .tabbar { display: none; } }
+
+  .tabbar-item {
+    flex: 1 1 0;
+    min-block-size: var(--tap);
+    padding-block: var(--space-2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    color: var(--text-faint);
+    font-size: var(--text-2xs);
+    font-weight: 560;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: color var(--dur-1) var(--ease-out);
+  }
+  .tabbar-item[aria-current] { color: var(--brand); }
+  .tabbar-item[aria-current] .icon { scale: 1.06; }
+  .tabbar-item .icon { transition: scale var(--dur-2) var(--ease-spring); }
+
+  /* Give the page room so the tab bar never covers the last row */
+  body:has(.tabbar) { padding-block-end: calc(var(--tap) + var(--space-4) + env(safe-area-inset-bottom)); }
+  @media (min-width: 48rem) { body:has(.tabbar) { padding-block-end: 0; } }
+
+  /* --- Safe area helpers --------------------------------------------------- */
+  .safe-top { padding-block-start: env(safe-area-inset-top); }
+  .safe-bottom { padding-block-end: env(safe-area-inset-bottom); }
+  .safe-x { padding-inline: max(var(--space-gutter), env(safe-area-inset-left)) max(var(--space-gutter), env(safe-area-inset-right)); }
+
+  /* --- Icons --------------------------------------------------------------
+     <svg class="icon"><use href="deck-icons.svg#check"></use></svg>
+     Icons inherit color and font-size, so they line up with text by default.
+     ---------------------------------------------------------------------- */
+  /* An SVG icon sized in em, so it scales with the text it sits beside and
+     lands on the baseline. Icons are filled with currentColor and inherit
+     the surrounding colour. */
+  .icon {
+    inline-size: 1.25em;
+    block-size: 1.25em;
+    flex: 0 0 auto;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    vertical-align: -.22em;
+  }
+  /* Small icons reference the heavier cut of the sprite, not a thicker stroke:
+     the symbols are filled outlines, so stroke-width does nothing to them.
+     Every icon ships twice, #name at wght 400 and #name-sm at wght 500, and
+     .icon-sm goes with the -sm symbol. CSS cannot rewrite a <use href>, so the
+     pairing lives in the markup:
+       <svg class="icon icon-sm"><use href="deck-icons.svg#check-sm"></use></svg> */
+  .icon-sm { inline-size: 1em; block-size: 1em; }
+  /* A 1.6em icon, for icon tiles and empty states where the default would
+     look undersized. */
+  .icon-lg { inline-size: 1.6em; block-size: 1.6em; stroke-width: 1.6; }
+  .icon-xl { inline-size: 2.25em; block-size: 2.25em; stroke-width: 1.4; }
+  .icon-fill { fill: currentColor; stroke: none; }
+  .icon-muted { color: var(--text-faint); }
+  .icon-spin { animation: dk-spin 1.1s linear infinite; }
+
+  /* Icon in a tinted tile — for feature rows and empty states */
+  .icon-tile {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: var(--r-sm);
+    display: grid;
+    place-items: center;
+    background: var(--brand-soft);
+    color: var(--brand);
+    flex: 0 0 auto;
+  }
+  .icon-tile-good { background: var(--good-100); color: var(--good-700); }
+  .icon-tile-warn { background: var(--warn-100); color: var(--warn-700); }
+  .icon-tile-bad  { background: var(--bad-100);  color: var(--bad-700); }
+  .icon-tile-lg { inline-size: 52px; block-size: 52px; border-radius: var(--r-md); }
+
+  /* --- Emoji --------------------------------------------------------------
+     Emoji render at wildly different sizes and baselines across platforms.
+     .emoji pins the font stack and the metrics so they sit on the line.
+     ---------------------------------------------------------------------- */
+  /* Pins the emoji font stack and metrics so an emoji renders at the same
+     size and baseline on Windows, iOS and Android instead of jumping
+     between them. */
+  .emoji {
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
+                 "Twemoji Mozilla", "Android Emoji", sans-serif;
+    font-size: 1.05em;
+    line-height: 1;
+    font-style: normal;
+    font-weight: 400;
+    vertical-align: -.12em;
+    display: inline-block;
+    text-rendering: auto;
+    -webkit-font-smoothing: auto;
+  }
+  .emoji-lg { font-size: 1.6em; vertical-align: -.2em; }
+  .emoji-xl { font-size: 2.5em; vertical-align: -.24em; }
+  .emoji-hero { font-size: 3.5rem; line-height: 1; }
+
+  /* Emoji as an avatar or a status marker */
+  .emoji-tile {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: var(--r-sm);
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    flex: 0 0 auto;
+  }
+  .emoji-tile-round { border-radius: var(--r-full); }
+
+  /* Emoji picker grid — drop your own set in */
+  .emoji-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    gap: 2px;
+  }
+  .emoji-grid > button {
+    aspect-ratio: 1;
+    border-radius: var(--r-xs);
+    font-size: 21px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-spring);
+  }
+  .emoji-grid > button:hover { background: var(--surface-hover); scale: 1.16; }
+
+  /* Reaction pill, like a Slack or Teams reaction */
+  .reaction {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: 28px;
+    padding-inline: var(--space-2);
+    border-radius: var(--r-full);
+    border: 1px solid var(--line);
+    background: var(--surface);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+  .reaction[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-300); color: var(--brand-soft-text); }
+}

package/src/09-utilities.css

@@ -0,0 +1,241 @@
+/* ==========================================================================
+   Deck — 09 Utilities
+   A short list on purpose. Utilities are for the last 10 percent of a layout,
+   not for rebuilding a button out of fourteen class names.
+   ========================================================================== */
+
+@layer deck.utilities {
+
+  /* --- Display ------------------------------------------------------------ */
+  .hidden { display: none; }
+  .block { display: block; }
+  .inline-block { display: inline-block; }
+  .flex { display: flex; }
+  .inline-flex { display: inline-flex; }
+  .contents { display: contents; }
+
+  /* --- Flex and grid ------------------------------------------------------ */
+  .flex-row { flex-direction: row; }
+  .flex-col { flex-direction: column; }
+  .wrap { flex-wrap: wrap; }
+  .nowrap { flex-wrap: nowrap; white-space: nowrap; }
+  .items-start { align-items: flex-start; }
+  .items-center { align-items: center; }
+  .items-end { align-items: flex-end; }
+  .items-stretch { align-items: stretch; }
+  .items-baseline { align-items: baseline; }
+  .justify-start { justify-content: flex-start; }
+  .justify-center { justify-content: center; }
+  .justify-end { justify-content: flex-end; }
+  .justify-between { justify-content: space-between; }
+  .place-center { place-items: center; }
+  .grow { flex: 1 1 auto; min-inline-size: 0; }
+  .shrink-0 { flex: 0 0 auto; }
+  /* Pushes this element and everything after it to the far end of a flex
+     row. The one-class replacement for a spacer div. */
+  .push { margin-inline-start: auto; }
+
+  .gap-0 { gap: 0; }
+  .gap-1 { gap: var(--space-1); }
+  .gap-2 { gap: var(--space-2); }
+  .gap-3 { gap: var(--space-3); }
+  .gap-4 { gap: var(--space-4); }
+  .gap-6 { gap: var(--space-6); }
+  .gap-8 { gap: var(--space-8); }
+
+  /* --- Spacing ------------------------------------------------------------ */
+  /* The scale is 0 1 2 3 4 6 8, declared in 04-layout.css. Every family below
+     implements all seven, so a step that exists anywhere exists everywhere. */
+  .p-0 { padding: 0; }                       .p-1 { padding: var(--space-1); }
+  .p-2 { padding: var(--space-2); }          .p-3 { padding: var(--space-3); }
+  .p-4 { padding: var(--space-4); }          .p-6 { padding: var(--space-6); }
+  .p-8 { padding: var(--space-8); }
+
+  .px-0 { padding-inline: 0; }               .px-1 { padding-inline: var(--space-1); }
+  .px-2 { padding-inline: var(--space-2); }  .px-3 { padding-inline: var(--space-3); }
+  .px-4 { padding-inline: var(--space-4); }  .px-6 { padding-inline: var(--space-6); }
+  .px-8 { padding-inline: var(--space-8); }
+
+  .py-0 { padding-block: 0; }                .py-1 { padding-block: var(--space-1); }
+  .py-2 { padding-block: var(--space-2); }   .py-3 { padding-block: var(--space-3); }
+  .py-4 { padding-block: var(--space-4); }   .py-6 { padding-block: var(--space-6); }
+  .py-8 { padding-block: var(--space-8); }
+
+  .m-0 { margin: 0; }
+  .mt-0 { margin-block-start: 0; }              .mt-1 { margin-block-start: var(--space-1); }
+  .mt-2 { margin-block-start: var(--space-2); } .mt-3 { margin-block-start: var(--space-3); }
+  .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); }
+  .mt-8 { margin-block-start: var(--space-8); }
+  .mb-0 { margin-block-end: 0; }                .mb-1 { margin-block-end: var(--space-1); }
+  .mb-2 { margin-block-end: var(--space-2); }   .mb-3 { margin-block-end: var(--space-3); }
+  .mb-4 { margin-block-end: var(--space-4); }   .mb-6 { margin-block-end: var(--space-6); }
+  .mb-8 { margin-block-end: var(--space-8); }
+  .mx-auto { margin-inline: auto; }
+
+  /* --- Sizing ------------------------------------------------------------- */
+  .w-full { inline-size: 100%; }
+  .w-auto { inline-size: auto; }
+  .h-full { block-size: 100%; }
+  .min-h-screen { min-block-size: 100dvh; }
+  .max-w-prose { max-inline-size: var(--measure); }
+  .max-w-sm { max-inline-size: 24rem; }
+  .max-w-md { max-inline-size: 34rem; }
+  .max-w-lg { max-inline-size: 48rem; }
+  .square { aspect-ratio: 1; }
+
+  /* --- Type --------------------------------------------------------------- */
+  .text-2xs { font-size: var(--text-2xs); }
+  .text-xs { font-size: var(--text-xs); }
+  /* One step down the type scale, for secondary text and dense rows. */
+  .text-sm { font-size: var(--text-sm); }
+  .text-base { font-size: var(--text-base); }
+  .text-md { font-size: var(--text-md); }
+  .text-lg { font-size: var(--text-lg); }
+  .text-xl { font-size: var(--text-xl); }
+  .text-2xl { font-size: var(--text-2xl); }
+
+  .fw-normal { font-weight: 400; }
+  .fw-medium { font-weight: 540; }
+  /* Semibold. The weight for a label or a name that needs to lead without
+     becoming a heading. */
+  .fw-semi { font-weight: 620; }
+  .fw-bold { font-weight: 700; }
+
+  .text-start { text-align: start; }
+  .text-center { text-align: center; }
+  .text-end { text-align: end; }
+
+  /* Secondary text colour. Still meets contrast against every surface Deck
+     defines, so it is safe for body copy rather than decoration only. */
+  .text-muted { color: var(--text-muted); }
+  .text-faint { color: var(--text-faint); }
+  .text-brand { color: var(--brand); }
+  .text-good { color: var(--good-700); }
+  .text-warn { color: var(--warn-700); }
+  .text-bad { color: var(--bad-700); }
+  .text-inherit { color: inherit; }
+
+  /* Tabular figures, so numbers line up in a column and do not jitter when
+     they change. */
+  .nums { font-variant-numeric: tabular-nums; }
+  .mono { font-family: var(--font-mono); }
+  .uppercase { text-transform: uppercase; letter-spacing: .04em; }
+  .capitalize { text-transform: capitalize; }
+  .no-underline { text-decoration: none; }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-inline-size: 0;
+  }
+  .clamp-2, .clamp-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
+  .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
+
+  /* --- Surfaces ----------------------------------------------------------- */
+  .bg-surface { background: var(--surface); }
+  .bg-sunken { background: var(--bg-sunken); }
+  .bg-brand { background: var(--brand-600); color: var(--text-on-brand); }
+  .bg-soft { background: var(--brand-soft); color: var(--brand-soft-text); }
+  .bg-none { background: none; }
+
+  .border { border: 1px solid var(--line); }
+  .border-t { border-block-start: 1px solid var(--line); }
+  .border-b { border-block-end: 1px solid var(--line); }
+  .border-brand { border-color: var(--brand-400); }
+  .border-0 { border: 0; }
+
+  .r-xs { border-radius: var(--r-xs); }
+  .r-sm { border-radius: var(--r-sm); }
+  .r-md { border-radius: var(--r-md); }
+  .r-lg { border-radius: var(--r-lg); }
+  .r-full { border-radius: var(--r-full); }
+
+  .shadow-0 { box-shadow: none; }
+  .shadow-1 { box-shadow: var(--shadow-1); }
+  .shadow-2 { box-shadow: var(--shadow-2); }
+  .shadow-3 { box-shadow: var(--shadow-3); }
+  .shadow-4 { box-shadow: var(--shadow-4); }
+
+  /* --- Position and overflow ---------------------------------------------- */
+  .relative { position: relative; }
+  .absolute { position: absolute; }
+  .fixed { position: fixed; }
+  .sticky { position: sticky; }
+  .inset-0 { inset: 0; }
+  .z-1 { z-index: 1; }
+  .overflow-hidden { overflow: hidden; }
+  .overflow-auto { overflow: auto; }
+  .overflow-clip { overflow: clip; }
+
+  .opacity-60 { opacity: .6; }
+  .pointer-none { pointer-events: none; }
+  .no-select { user-select: none; }
+  .cursor-pointer { cursor: pointer; }
+
+  /* --- Accessibility ------------------------------------------------------ */
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  .skip-link {
+    position: absolute;
+    inset-block-start: -100%;
+    inset-inline-start: var(--space-4);
+    z-index: var(--z-toast);
+    background: var(--brand-600);
+    color: var(--text-on-brand);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--r-sm);
+  }
+  .skip-link:focus { inset-block-start: var(--space-4); }
+
+  /* --- Responsive variants (mobile first: these turn ON at the breakpoint) - */
+  @media (min-width: 40rem) {
+    .sm\:hidden { display: none; }
+    .sm\:block { display: block; }
+    .sm\:flex { display: flex; }
+    .sm\:row { flex-direction: row; }
+    .sm\:w-auto { inline-size: auto; }
+    .sm\:text-start { text-align: start; }
+  }
+  @media (min-width: 48rem) {
+    .md\:hidden { display: none; }
+    .md\:block { display: block; }
+    .md\:flex { display: flex; }
+    .md\:grid-d { display: grid; }
+    .md\:row { flex-direction: row; }
+    .md\:col { flex-direction: column; }
+    .md\:items-center { align-items: center; }
+    .md\:justify-between { justify-content: space-between; }
+    .md\:w-auto { inline-size: auto; }
+    .md\:text-center { text-align: center; }
+    .md\:p-8 { padding: var(--space-8); }
+    .md\:gap-6 { gap: var(--space-6); }
+  }
+  @media (min-width: 64rem) {
+    .lg\:hidden { display: none; }
+    .lg\:block { display: block; }
+    .lg\:flex { display: flex; }
+    .lg\:grid-d { display: grid; }
+    .lg\:row { flex-direction: row; }
+    .lg\:gap-8 { gap: var(--space-8); }
+  }
+
+  /* Show only to one input type */
+  @media (pointer: fine) { .touch-only { display: none; } }
+  @media (pointer: coarse) { .mouse-only { display: none; } }
+  @media print { .no-print { display: none !important; } }
+}