@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/app-shell/app-shell.tokens.json

@@ -0,0 +1,88 @@
+[
+  "--slotted-app-shell-aside-color",
+  "--slotted-app-shell-aside-extent",
+  "--slotted-app-shell-aside-size-lg",
+  "--slotted-app-shell-aside-size-md",
+  "--slotted-app-shell-aside-size-sm",
+  "--slotted-app-shell-aside-surface",
+  "--slotted-app-shell-banner-block-size",
+  "--slotted-app-shell-banner-color",
+  "--slotted-app-shell-banner-surface",
+  "--slotted-app-shell-border-color",
+  "--slotted-app-shell-brand-overflow",
+  "--slotted-app-shell-brand-wrap",
+  "--slotted-app-shell-canvas",
+  "--slotted-app-shell-color",
+  "--slotted-app-shell-elevation",
+  "--slotted-app-shell-footer-color",
+  "--slotted-app-shell-footer-surface",
+  "--slotted-app-shell-frame",
+  "--slotted-app-shell-frame-image",
+  "--slotted-app-shell-gutter",
+  "--slotted-app-shell-main-color",
+  "--slotted-app-shell-main-surface",
+  "--slotted-app-shell-nav-color",
+  "--slotted-app-shell-nav-overlay-size",
+  "--slotted-app-shell-nav-size-lg",
+  "--slotted-app-shell-nav-size-md",
+  "--slotted-app-shell-nav-size-sm",
+  "--slotted-app-shell-nav-surface",
+  "--slotted-app-shell-radius",
+  "--slotted-app-shell-rail-size",
+  "--slotted-app-shell-resizer-color",
+  "--slotted-app-shell-row-inset-size",
+  "--slotted-app-shell-row-mark-size",
+  "--slotted-app-shell-row-text-line-height",
+  "--slotted-app-shell-row-text-size",
+  "--slotted-app-shell-scrim",
+  "--slotted-app-shell-scrollbar-thumb-color",
+  "--slotted-app-shell-scrollbar-track-color",
+  "--slotted-app-shell-tone-surface",
+  "--slotted-border-strong",
+  "--slotted-border-subtle",
+  "--slotted-border-width-thick",
+  "--slotted-border-width-thin",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-height-lg",
+  "--slotted-control-height-md",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-radius",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-duration-medium",
+  "--slotted-easing-enter",
+  "--slotted-easing-exit",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-sm",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-sm",
+  "--slotted-radius-lg",
+  "--slotted-scrim",
+  "--slotted-shadow-lg",
+  "--slotted-shadow-md",
+  "--slotted-shadow-xs",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-surface",
+  "--slotted-surface-sunken",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-z-index-overlay",
+  "--slotted-z-index-popover"
+]

package/src/aspect-ratio/aspect-ratio.css

@@ -0,0 +1,131 @@
+@layer slotted.components {
+  /**
+   * ── The frame ──────────────────────────────────────────────────────────
+   *
+   * A box that is a stated proportion of its own width before anything is in
+   * it, so a picture, a map or an embedded player arrives into room already
+   * held for it and moves nothing below. The ratio is the consumer's
+   * decision: there is no default, and the DOM says which one was taken.
+   *
+   * Two attributes on every selector, always. The frame holds whatever the
+   * consumer put in it, and the pair is what stops a rule meant for the box
+   * from reaching the thing inside.
+   *
+   * The ratio is the platform's `aspect-ratio`, not the padding hack Radix
+   * and Chakra v2 use, and the difference is what happens to content taller
+   * than the box. The hack positions the child absolutely, so a longer
+   * translation or a caption that wraps leaves the box and lands on whatever
+   * comes next. A box with `aspect-ratio` keeps the automatic minimum
+   * css-sizing-4 §5.2.1 gives it — its own min-content height — so it holds
+   * the ratio while the content fits and grows when it does not. Nothing is
+   * clipped and nothing escapes: the frame reserves, and it never crops. The
+   * crop is `image`'s decision, taken with `fit`.
+   *
+   * A replaced child contributes nothing to that minimum: css-sizing-3 §5.2.1
+   * resolves a cyclic percentage on a replaced element against zero for the
+   * min-content contribution, so a 4000-pixel photograph at `block-size: 100%`
+   * does not grow the frame to 4000 pixels. Only content with a height of its
+   * own — text, a control, a card — can.
+   */
+  [data-ui='aspect-ratio'][data-part='root'] {
+    /**
+     * The proportion, as the public token. A named ratio writes it below; a
+     * number the consumer stated is written on the instance, as `w / h`, and
+     * the instance wins because a declaration on the element beats one from
+     * a stylesheet. `1 / 1` is the fallback for a frame that named nothing,
+     * which the bindings never produce: a square is the honest shape of a
+     * box nobody thought about.
+     */
+    aspect-ratio: var(--slotted-aspect-ratio, 1 / 1);
+    /**
+     * A grid of one cell rather than a block, so every child lands in the
+     * same place and is stretched to the frame. A child that has a height of
+     * its own keeps it and the frame grows around it; a second child stacks
+     * on the first, which is how a caption sits over a map without the
+     * consumer positioning anything. The row is `1fr` and not `minmax(0, 1fr)`:
+     * a track with a zero minimum would have no content minimum to grow from.
+     */
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 1fr;
+    /* The width the container gives, and never more. */
+    max-inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  /* ── The five named ratios ────────────────────────────────────────────── */
+
+  /**
+   * Named for what they hold rather than for their numbers, so a product
+   * decides once that a thumbnail is `landscape` and a hero is `wide`, and
+   * the decision reads in the DOM. Written as the public token so a theme
+   * that disagrees about what `wide` means retunes it in one place.
+   */
+  [data-ui='aspect-ratio'][data-part='root'][data-ratio='square'] {
+    --slotted-aspect-ratio: 1 / 1;
+  }
+
+  [data-ui='aspect-ratio'][data-part='root'][data-ratio='landscape'] {
+    --slotted-aspect-ratio: 4 / 3;
+  }
+
+  [data-ui='aspect-ratio'][data-part='root'][data-ratio='portrait'] {
+    --slotted-aspect-ratio: 3 / 4;
+  }
+
+  [data-ui='aspect-ratio'][data-part='root'][data-ratio='video'] {
+    --slotted-aspect-ratio: 16 / 9;
+  }
+
+  [data-ui='aspect-ratio'][data-part='root'][data-ratio='wide'] {
+    --slotted-aspect-ratio: 21 / 9;
+  }
+
+  /*
+   * `custom` has no rule: the base rule already reads the token the binding
+   * wrote on the instance, and a rule here would only restate the fallback.
+   */
+
+  /* ── What is inside ───────────────────────────────────────────────────── */
+
+  /**
+   * Every child takes the one cell and stretches to it. `min-inline-size: 0`
+   * is what lets an embedded player narrower than its own `width` attribute
+   * shrink with the frame; the block minimum is left alone on purpose, so a
+   * child taller than the ratio still grows the box.
+   */
+  [data-ui='aspect-ratio'][data-part='root'] > * {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+  }
+
+  /**
+   * A replaced element does not stretch in a grid — its ratio makes `normal`
+   * behave as `start` — so it is sized to the cell explicitly, and told to
+   * fit rather than to fill. `contain` is the one value that neither crops
+   * nor distorts: the frame reserves, and what it holds is shown whole. A
+   * consumer who wants the picture to cover the frame is asking for a crop,
+   * and `image` is the family that decides that.
+   *
+   * `picture` is in the list so its `img` sees a definite box to be 100 %
+   * of; an `iframe` and a `canvas` take the size and have no `object-fit`.
+   *
+   * `min-block-size: 0` is what keeps the frame at its ratio around a
+   * photograph. A grid item's automatic minimum is content-based, and while
+   * the row is being sized the percentage height is treated as `auto`, so
+   * the item asked for its natural height and a 4:3 photograph grew a 16:9
+   * frame to 4:3 (measured in the first capture of the `media` scene). A
+   * replaced element has nothing to say about the frame's height; the text
+   * child above keeps its automatic minimum, and the growth rule with it.
+   */
+  [data-ui='aspect-ratio'][data-part='root'] > :is(img, video, canvas, svg, iframe, picture) {
+    block-size: 100%;
+    display: block;
+    inline-size: 100%;
+    min-block-size: 0;
+  }
+
+  [data-ui='aspect-ratio'][data-part='root'] > :is(img, video) {
+    object-fit: contain;
+  }
+}

package/src/aspect-ratio/aspect-ratio.tokens.json

@@ -0,0 +1 @@
+["--slotted-aspect-ratio"]