@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/styles/components.css

@@ -0,0 +1,453 @@
+/* Component rules that utilities cannot express: keyframes, pseudo-element marks, invisible hit
+   areas for coarse pointers and container queries. Ported from the design reference. */
+
+/* Motion: 120 to 280 ms, transform and opacity only. Reduced motion keeps an 80 ms fade. */
+@keyframes xos-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes xos-peek-in {
+  from {
+    opacity: 0;
+    transform: translateX(var(--space-16));
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes xos-peek-in-rtl {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--space-16) * -1));
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes xos-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes xos-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes xos-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes xos-drain {
+  from {
+    transform: scaleX(1);
+  }
+
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.xos-anim-pop {
+  animation: xos-pop-in var(--motion-duration-base) var(--motion-easing-enter);
+  transform-origin: top;
+}
+
+.xos-anim-dialog {
+  animation: xos-pop-in var(--motion-duration-deliberate) var(--motion-easing-enter);
+}
+
+.xos-anim-peek {
+  animation: xos-peek-in var(--motion-duration-slow) var(--motion-easing-enter);
+}
+
+[dir="rtl"] .xos-anim-peek,
+.xos-anim-peek[dir="rtl"] {
+  animation-name: xos-peek-in-rtl;
+}
+
+.xos-anim-fade {
+  animation: xos-fade-in var(--motion-duration-slow) var(--motion-easing-enter);
+}
+
+.xos-anim-spin {
+  animation: xos-spin calc(var(--motion-duration-slow) * 4) linear infinite;
+}
+
+.xos-anim-pulse {
+  animation: xos-pulse calc(var(--motion-duration-deliberate) * 5) var(--motion-easing-standard)
+    infinite;
+}
+
+/* The undo countdown drains over the toast's own seconds (`--xos-seconds`, unitless). */
+.xos-anim-drain {
+  transform-origin: left;
+  animation: xos-drain calc(var(--xos-seconds, 8) * var(--motion-duration-slow) * 5) linear forwards;
+}
+
+[dir="rtl"] .xos-anim-drain {
+  transform-origin: right;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xos-anim-pop,
+  .xos-anim-dialog,
+  .xos-anim-peek,
+  .xos-anim-fade {
+    animation: xos-fade-in var(--motion-duration-reduced) linear !important;
+  }
+
+  .xos-anim-spin,
+  .xos-anim-pulse,
+  .xos-anim-drain {
+    animation: none !important;
+  }
+}
+
+/* Route view transitions (RouteTransition, @xos/ui/route-transition): the page that leaves fades
+   out fast, the page that arrives fades in rising a little, at the route transition duration. The
+   overlay lets clicks through to the live page. Reduced motion, from the device or from
+   me.reduced_motion, turns them off: no animation runs and the page swaps at once. */
+@keyframes xos-route-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes xos-route-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--space-8));
+  }
+}
+
+::view-transition {
+  pointer-events: none;
+}
+
+::view-transition-old(.xos-route) {
+  animation: xos-route-out var(--motion-duration-fast) var(--motion-easing-exit) both;
+}
+
+::view-transition-new(.xos-route) {
+  animation: xos-route-in var(--motion-duration-deliberate) var(--motion-easing-enter) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:not([data-motion="full"])::view-transition-group(*),
+  :root:not([data-motion="full"])::view-transition-old(*),
+  :root:not([data-motion="full"])::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+:root[data-motion="reduce"]::view-transition-group(*),
+:root[data-motion="reduce"]::view-transition-old(*),
+:root[data-motion="reduce"]::view-transition-new(*) {
+  animation: none !important;
+}
+
+/* Icons that point along the reading direction mirror in right-to-left locales. */
+[dir="rtl"] .xos-flip-rtl {
+  transform: scaleX(-1);
+}
+
+/* Checkbox, radio and switch marks drawn on the native input. */
+.xos-check-input {
+  appearance: none;
+  display: grid;
+  place-content: center;
+  flex: none;
+  margin: 0;
+  inline-size: var(--ui-check);
+  block-size: var(--ui-check);
+  border: var(--stroke-width-hairline) solid var(--color-border-control);
+  border-radius: var(--radius-chip);
+  background: var(--color-bg-surface);
+  cursor: pointer;
+}
+
+.xos-check-input:checked {
+  background: var(--color-accent-default);
+  border-color: var(--color-accent-default);
+}
+
+.xos-check-input:checked::after {
+  content: "";
+  inline-size: var(--space-8);
+  block-size: var(--space-4);
+  border: solid var(--color-accent-text-on);
+  border-width: 0 0 var(--ui-hairline-half) var(--ui-hairline-half);
+  transform: translateY(calc(var(--stroke-width-hairline) * -1)) rotate(-45deg);
+}
+
+/* A select-all box over a partial selection shows a dash (DataTable selection). */
+.xos-check-input:indeterminate {
+  background: var(--color-accent-default);
+  border-color: var(--color-accent-default);
+}
+
+.xos-check-input:indeterminate::after {
+  content: "";
+  inline-size: var(--space-8);
+  block-size: var(--ui-hairline-half);
+  background: var(--color-accent-text-on);
+}
+
+.xos-check-input[type="radio"] {
+  border-radius: var(--radius-pill);
+}
+
+.xos-check-input[type="radio"]:checked::after {
+  inline-size: var(--space-6);
+  block-size: var(--space-6);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent-text-on);
+  transform: none;
+}
+
+.xos-check-input[role="switch"] {
+  position: relative;
+  display: block;
+  inline-size: var(--density-control-md);
+  block-size: var(--space-16);
+  border-radius: var(--space-8);
+}
+
+.xos-check-input[role="switch"]::after {
+  content: "";
+  position: absolute;
+  inset-block-start: var(--space-2);
+  inset-inline-start: var(--space-2);
+  inline-size: var(--ui-switch-knob);
+  block-size: var(--ui-switch-knob);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-text-secondary);
+  transform: none;
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+
+.xos-check-input[role="switch"]:checked::after {
+  background: var(--color-accent-text-on);
+  transform: translateX(var(--space-12));
+}
+
+[dir="rtl"] .xos-check-input[role="switch"]:checked::after {
+  transform: translateX(calc(var(--space-12) * -1));
+}
+
+.xos-check-input:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+[data-theme="sunlight"] .xos-check-input {
+  border-width: var(--stroke-width-focus);
+}
+
+/* Touch: dense controls keep their visual size and gain an invisible hit area of at least
+   target-coarse, centered on the control (decision D18). */
+@media (pointer: coarse) {
+  .xos-hit {
+    position: relative;
+  }
+
+  .xos-hit::before {
+    content: "";
+    position: absolute;
+    inset-inline: min(0%, calc(50% - var(--density-target-coarse) / 2));
+    inset-block: min(0%, calc(50% - var(--density-target-coarse) / 2));
+  }
+
+  .xos-check {
+    min-block-size: var(--density-target-coarse);
+    min-inline-size: var(--density-target-coarse);
+  }
+}
+
+/* RecordList and RecordRow. Rows reflow by the width of their own list, not the viewport, so a list
+   in a half-width column reflows too (decision D18): state, title and owner on the first line; key,
+   chips, next date and action wrap beneath, indented under the title. Only the visual order
+   changes; focus order stays the source order. A row of a selectable list leads with its checkbox. */
+.xos-rlist {
+  container: xos-rlist / inline-size;
+}
+
+.xos-rrow {
+  --xos-rrow-lead: var(--space-20);
+
+  display: grid;
+  grid-template-columns:
+    var(--space-20) calc(var(--space-64) + var(--space-8)) minmax(0, 1fr) auto
+    calc(var(--space-40) * 4 + var(--space-16)) var(--density-control-md) calc(var(--space-40) * 3);
+  align-items: center;
+  gap: var(--space-8);
+  min-block-size: var(--density-row-default);
+  padding-inline: var(--space-12);
+}
+
+.xos-rrow[data-selectable] {
+  --xos-rrow-lead: calc(var(--space-20) * 2 + var(--space-8));
+
+  grid-template-columns:
+    var(--space-20) var(--space-20) calc(var(--space-64) + var(--space-8)) minmax(0, 1fr) auto
+    calc(var(--space-40) * 4 + var(--space-16)) var(--density-control-md) calc(var(--space-40) * 3);
+}
+
+.xos-rrow-action {
+  opacity: 0;
+}
+
+.xos-rrow:hover .xos-rrow-action,
+.xos-rrow:focus-within .xos-rrow-action {
+  opacity: 1;
+}
+
+@media (pointer: coarse) {
+  .xos-rrow-action {
+    opacity: 1;
+  }
+}
+
+@container xos-rlist (max-width: 719.98px) {
+  .xos-rrow {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--space-8);
+    row-gap: var(--space-4);
+    padding-block: var(--space-8);
+  }
+
+  .xos-rrow-select,
+  .xos-rrow-state {
+    order: 1;
+    flex: none;
+    inline-size: var(--space-20);
+  }
+
+  .xos-rrow-title {
+    order: 2;
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+
+  .xos-rrow-owner {
+    order: 3;
+    flex: none;
+  }
+
+  .xos-rrow::after {
+    content: "";
+    order: 3;
+    flex-basis: 100%;
+  }
+
+  .xos-rrow-key,
+  .xos-rrow-chips,
+  .xos-rrow-next {
+    order: 4;
+  }
+
+  .xos-rrow-key {
+    margin-inline-start: calc(var(--xos-rrow-lead) + var(--space-8));
+  }
+
+  .xos-rrow-action {
+    order: 5;
+    margin-inline-start: auto;
+  }
+}
+
+/* Gate criteria reflow by the width of the list: the statement takes its own line under the code,
+   with the tag and action after it. */
+.xos-criteria {
+  container: xos-criteria / inline-size;
+}
+
+@container xos-criteria (max-width: 719.98px) {
+  .xos-criteria li {
+    flex-wrap: wrap;
+    padding-block: var(--space-8);
+  }
+
+  .xos-criteria-label {
+    flex-basis: 100%;
+  }
+}
+
+/* In a narrow inbox the item text takes its own line and the actions wrap beneath it. */
+.xos-notif {
+  container: xos-notif / inline-size;
+}
+
+@container xos-notif (max-width: 399.98px) {
+  .xos-notif-item {
+    flex-wrap: wrap;
+  }
+
+  .xos-notif-text {
+    flex: 1 1 calc(100% - var(--space-32));
+  }
+}
+
+/* Compass surfaces raise every target to touch-min (48 pt). */
+.xos-compass {
+  font: var(--typography-text-16);
+}
+
+.xos-compass :where(button, input, select, [role="radio"], [role="tab"], a) {
+  min-block-size: var(--density-touch-min);
+}
+
+.xos-compass :where(button[aria-label]) {
+  min-inline-size: var(--density-touch-min);
+}
+
+[data-theme="sunlight"] .xos-compass :where(button, input, select),
+.xos-compass[data-theme="sunlight"] :where(button, input, select) {
+  border-width: var(--stroke-width-focus);
+}
+
+/* Hovered and pressed accent fills (A24-004): the scrim at the hover or pressed opacity over the
+   accent. The label is white on every accent that passes, so the darker fill only gains contrast
+   (5.28:1 hovered in Dark, against 4.06:1 from the old brightness filter), and a white-label
+   accent darkens the same way. The contrast gate checks both states (contrast-pairs.json). */
+.xos-fill-accent:hover:not(:disabled, [aria-disabled="true"]) {
+  background-color: color-mix(
+    in srgb,
+    var(--color-accent-default),
+    var(--color-scrim) calc(var(--opacity-hover) * 100%)
+  );
+}
+
+.xos-fill-accent:active:not(:disabled, [aria-disabled="true"]) {
+  background-color: color-mix(
+    in srgb,
+    var(--color-accent-default),
+    var(--color-scrim) calc(var(--opacity-pressed) * 100%)
+  );
+}

package/src/styles/index.css

@@ -0,0 +1,16 @@
+/* @xos/ui stylesheet: the Tailwind 4 entry for every app that renders these components.
+   An app's global stylesheet imports this file once (`@import "@xos/ui/styles.css";`) and the
+   Tailwind PostCSS plugin compiles it. Utilities come from the shared token preset through
+   tailwind.config.cjs, `@source` adds this package's components to the app's own sources, and the
+   token build supplies every variable, scoped to `[data-theme]` for Dark, Light and Sunlight. */
+@import "tailwindcss";
+@config "../../tailwind.config.cjs";
+@source "../";
+
+@import "@xos/tokens/css/base.css";
+@import "@xos/tokens/css/theme.dark.css";
+@import "@xos/tokens/css/theme.light.css";
+@import "@xos/tokens/css/theme.sunlight.css";
+
+@import "./base.css";
+@import "./components.css";