@echodial/deck 0.1.0

package/src/19-logical.css

@@ -0,0 +1,226 @@
+/* ==========================================================================
+   Deck — 19 Logical properties and direction
+   The framework is written in logical properties end to end: inline-size,
+   block-size, inset-inline-start, padding-block, margin-inline, border-start-
+   start-radius. That means Deck already lays out correctly in Arabic, Hebrew,
+   Urdu, and Farsi with nothing but dir="rtl" on the html element.
+
+   What logical properties cannot fix by themselves is content: icons that
+   point somewhere, characters that are inherently one-directional, and the few
+   places where a physical direction is genuinely meant. That is what this file
+   handles.
+   ========================================================================== */
+
+@layer deck.utilities {
+
+  /* --- Logical spacing utilities -------------------------------------------
+     The short physical-looking names in the utility layer (.mt-4, .px-3) are
+     already logical underneath — .mt-4 sets margin-block-start. These are the
+     explicitly named versions for when the distinction matters in review.
+     ---------------------------------------------------------------------- */
+  .mis-auto { margin-inline-start: auto; }
+  .mie-auto { margin-inline-end: auto; }
+
+  /* Same seven steps as every other spacing family: 0 1 2 3 4 6 8. */
+  .mis-0 { margin-inline-start: 0; }
+  .mis-1 { margin-inline-start: var(--space-1); }
+  .mis-2 { margin-inline-start: var(--space-2); }
+  .mis-3 { margin-inline-start: var(--space-3); }
+  .mis-4 { margin-inline-start: var(--space-4); }
+  .mis-6 { margin-inline-start: var(--space-6); }
+  .mis-8 { margin-inline-start: var(--space-8); }
+  .mie-0 { margin-inline-end: 0; }
+  .mie-1 { margin-inline-end: var(--space-1); }
+  .mie-2 { margin-inline-end: var(--space-2); }
+  .mie-3 { margin-inline-end: var(--space-3); }
+  .mie-4 { margin-inline-end: var(--space-4); }
+  .mie-6 { margin-inline-end: var(--space-6); }
+  .mie-8 { margin-inline-end: var(--space-8); }
+
+
+  .pis-0 { padding-inline-start: 0; }
+  .pis-1 { padding-inline-start: var(--space-1); }
+  .pis-2 { padding-inline-start: var(--space-2); }
+  .pis-3 { padding-inline-start: var(--space-3); }
+  .pis-4 { padding-inline-start: var(--space-4); }
+  .pis-6 { padding-inline-start: var(--space-6); }
+  .pis-8 { padding-inline-start: var(--space-8); }
+  .pie-0 { padding-inline-end: 0; }
+  .pie-1 { padding-inline-end: var(--space-1); }
+  .pie-2 { padding-inline-end: var(--space-2); }
+  .pie-3 { padding-inline-end: var(--space-3); }
+  .pie-4 { padding-inline-end: var(--space-4); }
+  .pie-6 { padding-inline-end: var(--space-6); }
+  .pie-8 { padding-inline-end: var(--space-8); }
+
+  .pbs-0 { padding-block-start: 0; }
+  .pbs-1 { padding-block-start: var(--space-1); }
+  .pbs-2 { padding-block-start: var(--space-2); }
+  .pbs-3 { padding-block-start: var(--space-3); }
+  .pbs-4 { padding-block-start: var(--space-4); }
+  .pbs-6 { padding-block-start: var(--space-6); }
+  .pbs-8 { padding-block-start: var(--space-8); }
+  .pbe-0 { padding-block-end: 0; }
+  .pbe-1 { padding-block-end: var(--space-1); }
+  .pbe-2 { padding-block-end: var(--space-2); }
+  .pbe-3 { padding-block-end: var(--space-3); }
+  .pbe-4 { padding-block-end: var(--space-4); }
+  .pbe-6 { padding-block-end: var(--space-6); }
+  .pbe-8 { padding-block-end: var(--space-8); }
+
+  .bis { border-inline-start: 1px solid var(--line); }
+  .bie { border-inline-end: 1px solid var(--line); }
+
+  .min-is-0 { min-inline-size: 0; }
+
+  .inset-is-0 { inset-inline-start: 0; }
+  .inset-ie-0 { inset-inline-end: 0; }
+  .inset-bs-0 { inset-block-start: 0; }
+  .inset-be-0 { inset-block-end: 0; }
+
+  /* Radius on the leading and trailing edges, not left and right */
+  .r-start { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
+  .r-end { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
+
+  /* --- Writing mode --------------------------------------------------------
+     Vertical text for a table header that would otherwise need a 40 character
+     column, or for a sidebar label.
+     ---------------------------------------------------------------------- */
+  .writing-vertical {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+  }
+  .writing-vertical-lr { writing-mode: vertical-lr; }
+  .writing-upright { text-orientation: upright; letter-spacing: .1em; }
+  .writing-sideways { writing-mode: sideways-lr; }
+  .writing-normal { writing-mode: horizontal-tb; }
+
+  /* A rotated column header that still measures and aligns correctly */
+  .th-vertical {
+    writing-mode: vertical-rl;
+    rotate: 180deg;
+    white-space: nowrap;
+    block-size: 8rem;
+    padding-block: var(--space-3);
+    text-align: start;
+  }
+
+  /* --- Explicit direction --------------------------------------------------
+     Sometimes a value has one true direction regardless of the page. An order
+     number, an account number, a URL, and a code block read left to right even
+     on an Arabic page. Isolate them so they do not scramble the text around
+     them.
+     ---------------------------------------------------------------------- */
+  .dir-ltr { direction: ltr; unicode-bidi: isolate; }
+  .dir-rtl { direction: rtl; unicode-bidi: isolate; }
+  .bidi-isolate { unicode-bidi: isolate; }
+  .bidi-plaintext { unicode-bidi: plaintext; }
+
+  /* Identifiers read left to right in every language: an order number, a commit
+     hash, an API key, a part code. Keep them LTR wherever they appear, and keep
+     them from scrambling the text around them. */
+  .mono, code, kbd, samp, .nums { unicode-bidi: isolate; }
+  .code-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
+}
+
+@layer deck.rtl {
+
+  /* --- Icons that point ----------------------------------------------------
+     An arrow, a chevron, a reply glyph, and a back button all mean "the
+     direction of reading". They must mirror. A checkmark, a clock, a wrench,
+     and a logo must not. Mark the ones that point.
+     ---------------------------------------------------------------------- */
+  [dir="rtl"] .mirror-rtl { scale: -1 1; }
+
+  /* The pointing icons in Deck's own sprite, mirrored automatically */
+  [dir="rtl"] :is(
+    .icon:has(use[href$="#chevron-left"]),
+    .icon:has(use[href$="#chevron-right"]),
+    .icon:has(use[href$="#arrow-left"]),
+    .icon:has(use[href$="#arrow-right"]),
+    .icon:has(use[href$="#arrow-up-right"]),
+    .icon:has(use[href$="#external"]),
+    .icon:has(use[href$="#log-out"]),
+    .icon:has(use[href$="#send"]),
+    .icon:has(use[href$="#trend-up"]),
+    .icon:has(use[href$="#trend-down"])
+  ) { scale: -1 1; }
+
+  /* Things that must never mirror, even inside a flipped ancestor */
+  [dir="rtl"] .no-flip { scale: 1 1; }
+
+  /* --- Direction-aware motion ---------------------------------------------
+     The entrance animations move toward the reader. In RTL the start edge is
+     on the right, so the keyframes flip too.
+     ---------------------------------------------------------------------- */
+  @media (prefers-reduced-motion: no-preference) {
+    [dir="rtl"] .enter-start { animation-name: dk-in-start-rtl; }
+    [dir="rtl"] .enter-end { animation-name: dk-in-end-rtl; }
+    @keyframes dk-in-start-rtl { from { opacity: 0; translate: calc(var(--travel) * 1.6) 0; } }
+    @keyframes dk-in-end-rtl { from { opacity: 0; translate: calc(var(--travel) * -1.6) 0; } }
+
+    [dir="rtl"] .icon-follow { transition: translate var(--dur-2) var(--ease-spring); }
+    [dir="rtl"] .btn:hover .icon-follow,
+    [dir="rtl"] .list-row:hover .icon-follow,
+    [dir="rtl"] .card-link:hover .icon-follow { translate: -3px 0; }
+
+    [dir="rtl"] .sweep { background-position: 100% 100%; }
+    [dir="rtl"] .marquee-track { animation-name: dk-marquee-rtl; }
+    @keyframes dk-marquee-rtl { to { translate: 100% 0; } }
+  }
+
+  /* --- Components that hard-code a direction ------------------------------- */
+
+  /* The select arrow is drawn with background-position from the right edge */
+  [dir="rtl"] .select {
+    background-position: 19px calc(50% + 1px), 14px calc(50% + 1px);
+    background-image: linear-gradient(135deg, transparent 50%, currentColor 50%),
+                      linear-gradient(45deg, currentColor 50%, transparent 50%);
+    padding-inline: var(--space-10) var(--space-3);
+  }
+
+  /* Search icon sits on the start edge, which is the right in RTL */
+  [dir="rtl"] .search > .icon { inset-inline-start: var(--space-3); }
+
+  /* Pinned grid columns and their shadows. Which edge is "start" is already
+     logical in both branches of 12-datagrid; only the offsets are physical,
+     so mirroring the four variables flips the scroll-state path and the
+     class-based fallback at the same time. */
+  [dir="rtl"] .dg-wrap {
+    --dg-pin-shadow-start: -6px 0 8px -6px oklch(20% .03 var(--hue-neutral) / .28);
+    --dg-pin-shadow-end: 6px 0 8px -6px oklch(20% .03 var(--hue-neutral) / .28);
+    --dg-pin-clip-start: inset(0 0 0 -12px);
+    --dg-pin-clip-end: inset(0 -12px 0 0);
+  }
+
+  /* Switch knob travels toward the end edge */
+  [dir="rtl"] .switch input::after { translate: 0 0; }
+  [dir="rtl"] .switch input:checked::after { translate: -18px 0; }
+
+  /* Toast swipe and chart bars grow from the start edge, and transform-origin
+     has no logical form.
+
+     FINDINGS 59: .progress::-webkit-progress-value is also in this list and
+     does nothing. A pseudo-element is not valid inside :is(), and :is() parses
+     forgivingly -- the browser drops the invalid item and keeps the rest, so
+     this rule serialises as [dir="rtl"] :is(.chart-bar-fill, .toast-timer).
+     No warning, no failed rule, no visual difference. It is harmless here
+     because the progress fill animates inline-size rather than a transform,
+     and because the engine mirrors <progress> under dir="rtl" on its own.
+
+     Due for deletion. If a vendor pseudo-element ever does need a logical
+     flip, it has to be its own rule -- grouping it will fail silently. */
+  [dir="rtl"] :is(.chart-bar-fill, .progress::-webkit-progress-value, .toast-timer) {
+    transform-origin: right center;
+  }
+  [dir="rtl"] .scroll-progress { transform-origin: right center; }
+
+  /* Breadcrumb separator */
+  [dir="rtl"] .breadcrumb li + li::before { content: "\\\\"; }
+
+  /* Timeline rail and dots */
+  [dir="rtl"] .timeline-item:not(:last-child)::before { inset-inline-start: 10px; }
+
+  /* Mixed-direction pages: a block that is LTR inside an RTL document */
+  [dir="ltr"] [dir="rtl"], [dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }
+}

package/src/20-gradients.css

@@ -0,0 +1,302 @@
+/* ==========================================================================
+   Deck — 20 Gradients
+   Every gradient here is built from the brand hue, so the hue slider retunes
+   them along with everything else. Interpolation is in oklab or oklch, which
+   avoids the grey dead zone you get when sRGB blends two saturated colors.
+   ========================================================================== */
+
+@layer deck.effects {
+
+  /* --- Surface washes ------------------------------------------------------
+     Quiet. These sit behind content and must never fight it.
+     ---------------------------------------------------------------------- */
+  .g-surface {
+    background-image: linear-gradient(in oklab 180deg,
+      color-mix(in oklab, var(--brand-500) 7%, transparent),
+      transparent 60%);
+  }
+  .g-sunken {
+    background-image: linear-gradient(in oklab 180deg,
+      transparent,
+      color-mix(in oklab, var(--ink-900) 5%, transparent));
+  }
+  .g-brand {
+    background-image: linear-gradient(in oklab 135deg,
+      var(--brand-600), oklch(from var(--brand-600) l c calc(h + 34)));
+    color: var(--text-on-brand);
+  }
+  .g-brand-soft {
+    background-image: linear-gradient(in oklab 135deg,
+      var(--brand-soft), color-mix(in oklab, var(--brand-soft) 40%, var(--surface)));
+  }
+  .g-dark {
+    background-image: linear-gradient(in oklab 160deg, var(--ink-900), var(--ink-1000));
+    color: var(--ink-100);
+  }
+
+  /* --- Aurora / mesh -------------------------------------------------------
+     Three soft radial blooms. No image, no SVG filter, no blur — blur on a
+     large area is expensive and this reads the same.
+     ---------------------------------------------------------------------- */
+  .g-mesh {
+    background-color: var(--bg);
+    background-image:
+      radial-gradient(closest-side at 18% 22%,
+        oklch(72% .14 var(--hue-brand) / .30), transparent),
+      radial-gradient(closest-side at 82% 12%,
+        oklch(76% .13 calc(var(--hue-brand) + 62) / .24), transparent),
+      radial-gradient(closest-side at 62% 88%,
+        oklch(70% .12 calc(var(--hue-brand) - 48) / .22), transparent);
+    background-size: 70% 70%, 60% 60%, 78% 78%;
+    background-repeat: no-repeat;
+  }
+  .g-mesh-warm {
+    --hue-brand: 34;
+  }
+  .g-mesh-subtle {
+    background-image:
+      radial-gradient(closest-side at 20% 0%, oklch(74% .10 var(--hue-brand) / .18), transparent),
+      radial-gradient(closest-side at 90% 30%, oklch(78% .09 calc(var(--hue-brand) + 70) / .14), transparent);
+    background-size: 80% 80%, 70% 70%;
+    background-repeat: no-repeat;
+  }
+
+  /* Slow drift for a hero. Off under reduced motion. */
+  @media (prefers-reduced-motion: no-preference) {
+    .g-mesh-drift {
+      animation: g-drift 22s var(--ease-in-out) infinite alternate;
+    }
+    @keyframes g-drift {
+      to { background-position: 8% 6%, -6% 10%, 4% -8%; }
+    }
+  }
+
+  /* --- Text gradients ------------------------------------------------------
+     background-clip on the text. Always keep a real color underneath so the
+     text is still readable if the clip fails.
+     ---------------------------------------------------------------------- */
+  .g-text {
+    color: var(--brand-700);
+    background-image: linear-gradient(in oklab 92deg,
+      var(--brand-600), oklch(from var(--brand-500) l c calc(h + 52)));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    /* keeps descenders from clipping in some engines */
+    padding-block-end: .06em;
+  }
+  .g-text-shine {
+    color: var(--text);
+    background-image: linear-gradient(in oklab 92deg,
+      var(--text) 0 40%, var(--brand-400) 50%, var(--text) 60% 100%);
+    background-size: 260% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .g-text-shine { animation: g-shine 4.5s var(--ease-in-out) infinite; }
+    @keyframes g-shine { to { background-position: -160% 0; } }
+  }
+
+  /* --- Gradient borders ----------------------------------------------------
+     Two backgrounds with different clip boxes. Works with any border-radius,
+     unlike border-image, and leaves the inside a real surface color.
+     ---------------------------------------------------------------------- */
+  .g-border {
+    --g-width: 1.5px;
+    border: var(--g-width) solid transparent;
+    background:
+      linear-gradient(var(--surface), var(--surface)) padding-box,
+      linear-gradient(in oklab var(--g-angle, 135deg),
+        var(--brand-500), oklch(from var(--brand-400) l c calc(h + 70))) border-box;
+  }
+  .g-border-soft {
+    background:
+      linear-gradient(var(--surface), var(--surface)) padding-box,
+      linear-gradient(in oklab 160deg,
+        color-mix(in oklab, var(--brand-400) 60%, transparent),
+        transparent 70%) border-box;
+  }
+  /* The angle is a registered property, so it can animate */
+  @media (prefers-reduced-motion: no-preference) {
+    .g-border-spin { animation: g-spin 6s linear infinite; }
+    @keyframes g-spin { to { --g-angle: 495deg; } }
+  }
+
+  /* A single glowing hairline along the top edge — good for a nav or a modal */
+  .g-hairline {
+    position: relative;
+  }
+  .g-hairline::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    block-size: 1px;
+    background: linear-gradient(90deg, transparent,
+      color-mix(in oklab, var(--brand-400) 70%, transparent) 30% 70%, transparent);
+  }
+
+  /* --- Scrims ---------------------------------------------------------------
+     A caption over a photo needs a legible floor. A flat 50% black overlay
+     dulls the whole image; an eased scrim only darkens where the text sits.
+     ---------------------------------------------------------------------- */
+  .g-scrim {
+    position: relative;
+    isolation: isolate;
+  }
+  .g-scrim::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--scrim);
+    pointer-events: none;
+  }
+  .g-scrim-top::after {
+    background: linear-gradient(to bottom,
+      oklch(12% .02 var(--hue-neutral) / .72), transparent 62%);
+  }
+  .g-scrim > * { position: relative; }
+
+  /* --- Fade masks ----------------------------------------------------------
+     Content that runs off the edge should fade, not be cut with a hard line.
+     ---------------------------------------------------------------------- */
+  .g-fade-inline {
+    mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 4%),
+                                #000 calc(100% - var(--fade, 4%)), transparent);
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 4%),
+                                #000 calc(100% - var(--fade, 4%)), transparent);
+  }
+  .g-fade-end {
+    mask-image: linear-gradient(90deg, #000 70%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
+  }
+  .g-fade-block {
+    mask-image: linear-gradient(180deg, #000 60%, transparent);
+    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
+  }
+  /* Long text that is collapsed: fade the bottom instead of a hard cut */
+  .g-fade-more {
+    max-block-size: var(--collapsed, 9rem);
+    overflow: hidden;
+    mask-image: linear-gradient(180deg, #000 65%, transparent);
+    -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
+  }
+  .g-fade-more.is-open {
+    max-block-size: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+  }
+  .scroller { mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
+
+  /* --- Sheen ---------------------------------------------------------------
+     A highlight that sweeps across on hover. --sheen is registered, so it
+     animates as a real percentage instead of jumping.
+     ---------------------------------------------------------------------- */
+  .g-sheen {
+    position: relative;
+    overflow: hidden;
+    isolation: isolate;
+  }
+  .g-sheen::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--sheen);
+    inline-size: 40%;
+    background: linear-gradient(105deg, transparent,
+      oklch(100% 0 0 / .32) 45%, oklch(100% 0 0 / .32) 55%, transparent);
+    pointer-events: none;
+    transition: --sheen var(--dur-5) var(--ease-out);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .g-sheen:hover::after { --sheen: 110%; }
+  }
+
+  /* --- Status gradients ----------------------------------------------------- */
+  .g-good { background-image: linear-gradient(in oklab 135deg, var(--good-600), oklch(from var(--good-600) l c calc(h - 26))); color: var(--text-on-good); }
+  .g-warn { background-image: linear-gradient(in oklab 135deg, var(--warn-500), oklch(from var(--warn-500) l c calc(h + 22))); color: var(--text-on-warn); }
+  .g-bad  { background-image: linear-gradient(in oklab 135deg, var(--bad-600), oklch(from var(--bad-600) l c calc(h - 18))); color: var(--text-on-bad); }
+
+  /* --- Conic accents -------------------------------------------------------- */
+  .g-conic {
+    background-image: conic-gradient(from var(--g-angle, 0deg) in oklch longer hue,
+      oklch(70% .16 0), oklch(70% .16 360));
+  }
+  .g-ring {
+    --thickness: 3px;
+    border-radius: var(--r-full);
+    background: conic-gradient(from var(--g-angle, 0deg),
+      transparent, var(--brand-500), transparent 62%);
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .g-ring-spin { animation: g-spin-360 1.6s linear infinite; }
+    @keyframes g-spin-360 { to { --g-angle: 360deg; } }
+  }
+
+  /* --- Structural patterns --------------------------------------------------
+     Not gradients as decoration — gradients standing in for an image. These
+     cost nothing to download and retint automatically.
+     ---------------------------------------------------------------------- */
+  .g-grid-lines {
+    background-image:
+      linear-gradient(to right, var(--line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
+    background-size: var(--cell, 24px) var(--cell, 24px);
+  }
+  .g-dots {
+    background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
+    background-size: var(--cell, 18px) var(--cell, 18px);
+  }
+  .g-stripes {
+    background-image: repeating-linear-gradient(45deg,
+      color-mix(in oklab, var(--ink-500) 8%, transparent) 0 6px,
+      transparent 6px 12px);
+  }
+  /* Hatching for a "pending" or "unavailable" block in a schedule */
+  .g-hatch {
+    background-image: repeating-linear-gradient(-45deg,
+      color-mix(in oklab, var(--warn-500) 22%, transparent) 0 5px,
+      transparent 5px 10px);
+  }
+
+  /* --- Skeleton and shimmer, unified with the palette ---------------------- */
+  .g-shimmer {
+    background-image: linear-gradient(100deg,
+      transparent 20%,
+      color-mix(in oklab, var(--brand-200) 55%, transparent) 45%,
+      transparent 70%);
+    background-size: 250% 100%;
+    background-repeat: no-repeat;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .g-shimmer { animation: dk-shimmer 1.6s var(--ease-in-out) infinite; }
+  }
+
+  /* --- Chart fills ---------------------------------------------------------
+     Area charts read better with a gradient falling off to nothing.
+     ---------------------------------------------------------------------- */
+  .chart-area-g {
+    fill: url(#deck-area-gradient);
+    stroke: none;
+  }
+  .g-bar-fill {
+    background-image: linear-gradient(in oklab 180deg,
+      var(--series, var(--c1)),
+      color-mix(in oklab, var(--series, var(--c1)) 70%, var(--ink-900)));
+  }
+
+  /* --- Fallback ------------------------------------------------------------
+     Engines without oklch get the plain brand color rather than a broken
+     gradient. The declarations above simply do not apply.
+     ---------------------------------------------------------------------- */
+  @supports not (color: oklch(50% .1 200)) {
+    .g-brand, .g-good, .g-warn, .g-bad { background-image: none; background-color: var(--brand-600); }
+    .g-text { -webkit-text-fill-color: currentColor; background-image: none; }
+    .g-mesh { background-image: none; }
+  }
+}