@med-o/ui 0.0.0-stage → 0.1.0

package/src/button/button.css

@@ -0,0 +1,319 @@
+/**
+ * Button – med.o Design System
+ *
+ * Plain CSS on top of the design tokens. The same classes work in React, Vue,
+ * Angular or plain HTML:
+ *   <button class="medo-button medo-button--primary medo-button--md">Save</button>
+ *
+ * Variants: primary · secondary · ghost · danger · text · ghost-danger
+ * Sizes:    sm (32) · md (40) · lg (48)
+ * Icon only: add medo-button--icon-only, always with aria-label.
+ *
+ * State contract: [data-hovered] [data-pressed] [data-focus-visible] [data-disabled] [data-pending]
+ * (set by React Aria – other frameworks set the same). Plain HTML buttons without
+ * data-rac fall back to :hover, :active, :focus-visible and :disabled.
+ */
+
+.medo-button {
+  /* Private custom properties set by the variants. */
+  --_bg: transparent;
+  --_bg-hover: var(--_bg);
+  --_bg-pressed: var(--_bg-hover);
+  --_fg: var(--medo-color-text-primary);
+  --_fg-hover: var(--_fg);
+  --_fg-pressed: var(--_fg-hover);
+  --_focus: var(--medo-shadow-focus-ring-inset);
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--medo-space-2);
+  block-size: var(--medo-size-control-md);
+  padding-block: 0;
+  padding-inline: var(--medo-space-4);
+  border: 0;
+  border-radius: var(--medo-radius-md);
+  background-color: var(--_bg);
+  color: var(--_fg);
+  font: var(--medo-typography-label-md);
+  letter-spacing: var(--medo-font-tracking-normal);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    box-shadow var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-button[data-hovered] {
+  background-color: var(--_bg-hover);
+  color: var(--_fg-hover);
+}
+
+@media (hover: hover) {
+  .medo-button:not([data-rac]):hover {
+    background-color: var(--_bg-hover);
+    color: var(--_fg-hover);
+  }
+}
+
+.medo-button[data-pressed],
+.medo-button:not([data-rac]):active {
+  background-color: var(--_bg-pressed);
+  color: var(--_fg-pressed);
+}
+
+.medo-button:focus-visible {
+  outline: none;
+}
+
+.medo-button[data-focus-visible],
+.medo-button:not([data-rac]):focus-visible {
+  box-shadow: var(--_focus);
+}
+
+/* Windows high contrast mode hides box-shadows: fall back to a real outline. */
+@media (forced-colors: active) {
+  .medo-button:is([data-focus-visible], :not([data-rac]):focus-visible) {
+    outline: var(--medo-focus-ring-width) solid CanvasText;
+    outline-offset: 2px;
+  }
+}
+
+/* Disabled: never only by opacity, the colors keep the label readable for the layout. */
+.medo-button:disabled,
+.medo-button[data-disabled],
+.medo-button[aria-disabled='true']:not([data-pending]) {
+  --_bg: var(--medo-color-action-disabled);
+  --_bg-hover: var(--_bg);
+  --_bg-pressed: var(--_bg);
+  --_fg: var(--medo-color-text-disabled);
+  --_fg-hover: var(--_fg);
+  cursor: not-allowed;
+}
+
+/* iOS highlight: pressed shows at once and fades out on release. Color fades stay with reduced motion. */
+.medo-button:is([data-pressed], :not([data-rac]):active) {
+  transition-duration: 0s;
+}
+
+/* ---------- Sizes ---------- */
+
+.medo-button--sm {
+  gap: var(--medo-space-1);
+  block-size: var(--medo-size-control-sm);
+  padding-inline: var(--medo-space-3);
+}
+
+.medo-button--lg {
+  block-size: var(--medo-size-control-lg);
+  padding-inline: var(--medo-space-5);
+  font: var(--medo-typography-label-lg);
+}
+
+.medo-button__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-button--lg .medo-button__icon {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-button__icon > svg,
+.medo-button__icon > .medo-spinner {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* Pending (isPending): keeps its look and size; the spinner replaces the icon, the label says what happens. */
+.medo-button[data-pending] {
+  cursor: progress;
+}
+
+/* ---------- Variants ---------- */
+
+.medo-button--primary {
+  --_bg: var(--medo-color-action-primary);
+  --_bg-hover: var(--medo-color-action-primary-hover);
+  --_bg-pressed: var(--medo-color-action-primary-pressed);
+  --_fg: var(--medo-color-text-on-action);
+}
+
+.medo-button--secondary {
+  --_bg: var(--medo-color-action-secondary);
+  --_bg-hover: var(--medo-color-action-secondary-hover);
+  --_bg-pressed: var(--medo-color-action-secondary-pressed);
+  --_fg: var(--medo-color-text-primary);
+}
+
+.medo-button--danger {
+  --_bg: var(--medo-color-action-danger);
+  --_bg-hover: var(--medo-color-action-danger-hover);
+  --_bg-pressed: var(--medo-color-action-danger-pressed);
+  --_fg: var(--medo-color-text-on-danger);
+}
+
+.medo-button--ghost {
+  --_bg-hover: var(--medo-color-state-hover);
+  --_bg-pressed: var(--medo-color-state-pressed);
+  --_fg: var(--medo-color-text-primary);
+  --_focus: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-button--ghost-danger {
+  --_bg-hover: var(--medo-color-feedback-danger-surface);
+  --_bg-pressed: var(--medo-color-state-pressed);
+  --_fg: var(--medo-color-text-danger);
+  --_focus: inset 0 0 0 var(--medo-focus-ring-width) var(--medo-color-focus-ring);
+}
+
+.medo-button--text {
+  --_fg: var(--medo-color-text-brand);
+  --_fg-hover: var(--medo-color-text-brand-hover);
+  --_fg-pressed: var(--medo-color-text-brand-pressed);
+  padding-inline: 0;
+  border-radius: var(--medo-radius-sm);
+}
+
+.medo-button--text[data-hovered],
+.medo-button--text[data-pressed],
+.medo-button--text:not([data-rac]):is(:hover, :active) {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.medo-button--text:is([data-focus-visible], :not([data-rac]):focus-visible) {
+  box-shadow: none;
+  outline: var(--medo-focus-ring-width) solid var(--medo-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Ghost, ghost danger and text buttons have no fill when disabled. */
+.medo-button--ghost:is(:disabled, [data-disabled], [aria-disabled='true']),
+.medo-button--ghost-danger:is(:disabled, [data-disabled], [aria-disabled='true']),
+.medo-button--text:is(:disabled, [data-disabled], [aria-disabled='true']) {
+  --_bg: transparent;
+  text-decoration: none;
+}
+
+/* ---------- Icon only ---------- */
+
+.medo-button--icon-only {
+  inline-size: var(--medo-size-control-md);
+  padding-inline: 0;
+}
+
+.medo-button--icon-only .medo-button__icon {
+  inline-size: var(--medo-size-icon-md);
+  block-size: var(--medo-size-icon-md);
+}
+
+.medo-button--icon-only.medo-button--sm {
+  inline-size: var(--medo-size-control-sm);
+}
+
+.medo-button--icon-only.medo-button--sm .medo-button__icon {
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+}
+
+.medo-button--icon-only.medo-button--lg {
+  inline-size: var(--medo-size-control-lg);
+}
+
+.medo-button--icon-only.medo-button--lg .medo-button__icon {
+  inline-size: var(--medo-size-icon-lg);
+  block-size: var(--medo-size-icon-lg);
+}
+
+/* ---------- Media icon button ----------
+ * On images and video: media (overlay/media circle) · media-ghost (no fill, on a gradient bar).
+ * Hover/pressed tint the fill with state/hover-on-media · state/pressed-on-media (same in both themes).
+ * Focus: media 2 px ring outside · media-ghost 2 px ring inside. sm is 28 with a 44 px hit area.
+ */
+
+.medo-button--media,
+.medo-button--media-ghost {
+  --_fg: var(--medo-color-text-on-media);
+  --_tint: transparent;
+  position: relative;
+  border-radius: var(--medo-radius-full);
+  background-image: linear-gradient(var(--_tint), var(--_tint));
+}
+
+.medo-button--media {
+  --_bg: var(--medo-color-overlay-media);
+  --_focus: var(--medo-shadow-focus-ring);
+}
+
+.medo-button--media:is([data-hovered], :not([data-rac]):hover),
+.medo-button--media-ghost:is([data-hovered], :not([data-rac]):hover) {
+  --_tint: var(--medo-color-state-hover-on-media);
+}
+
+.medo-button--media:is([data-pressed], :not([data-rac]):active),
+.medo-button--media-ghost:is([data-pressed], :not([data-rac]):active) {
+  --_tint: var(--medo-color-state-pressed-on-media);
+}
+
+.medo-button--icon-only:is(.medo-button--media, .medo-button--media-ghost).medo-button--sm {
+  inline-size: calc(var(--medo-space-6) + var(--medo-space-1)); /* 28 */
+  block-size: calc(var(--medo-space-6) + var(--medo-space-1));
+}
+
+.medo-button--icon-only:is(.medo-button--media, .medo-button--media-ghost).medo-button--sm::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--medo-space-2)); /* 44 hit area */
+  border-radius: var(--medo-radius-full);
+}
+
+/* ---------- Button group ----------
+ * The main action sits at the end of the reading path.
+ *   footer  – right, primary rightmost, destructive left (forms, dialogs, card footers)
+ *   header  – right, next to a title, size sm
+ *   content – left, primary first (hero, teaser, empty state)
+ * Mobile < 640 px: footer and content stack full width with the primary on top.
+ * DOM order = desktop reading order; mobile reorders visually only.
+ */
+
+.medo-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--medo-space-2);
+}
+
+.medo-button-group--footer,
+.medo-button-group--header {
+  justify-content: flex-end;
+}
+
+.medo-button-group__destructive {
+  margin-inline-end: auto;
+}
+
+@media (max-width: 639.98px) {
+  /* breakpoint/sm (640) */
+  .medo-button-group--footer,
+  .medo-button-group--content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .medo-button-group--footer {
+    flex-direction: column-reverse;
+  }
+  .medo-button-group--footer .medo-button-group__destructive {
+    order: -1; /* last on screen in column-reverse */
+    margin-inline-end: 0;
+    display: grid; /* the button fills the width like the others */
+  }
+}

package/src/card/card.css

@@ -0,0 +1,217 @@
+/**
+ * Card – med.o Design System
+ *
+ * Container for one topic. Media, header actions, body and footer are optional; the title is required.
+ *   <article class="medo-card medo-card--outlined">
+ *     <div class="medo-card__media">…</div>
+ *     <div class="medo-card__main">
+ *       <div class="medo-card__header">
+ *         <div class="medo-card__heading"><h3 class="medo-card__title">…</h3><p class="medo-card__subtitle">…</p></div>
+ *         <div class="medo-card__header-actions">…</div>
+ *       </div>
+ *       <div class="medo-card__body">…</div>
+ *       <div class="medo-card__footer">…</div>
+ *     </div>
+ *   </article>
+ *
+ * Variants: outlined (default) · elevated · filled · brand · plain. Density: standard (24) · compact (16).
+ * Interactive: the title link is stretched over the card (one click target); buttons stay above it.
+ */
+
+.medo-card {
+  --_pad: var(--medo-space-6);
+  --_bg: var(--medo-color-surface-default);
+  --_border: var(--medo-color-border-default);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: var(--medo-border-width-thin) solid var(--_border);
+  border-radius: var(--medo-radius-lg);
+  background-color: var(--_bg);
+  color: var(--medo-color-text-primary);
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.medo-card--compact {
+  --_pad: var(--medo-space-4);
+}
+
+.medo-card--elevated {
+  box-shadow: var(--medo-shadow-elevation-1);
+}
+.medo-card--filled {
+  --_bg: var(--medo-color-surface-subtle);
+  --_border: transparent;
+}
+.medo-card--brand {
+  --_bg: var(--medo-color-surface-brand-subtle);
+  --_border: var(--medo-color-border-brand);
+}
+.medo-card--plain {
+  --_bg: transparent;
+  --_border: transparent;
+  --_pad: 0;
+  overflow: visible;
+}
+
+/* ---------- Parts ---------- */
+
+.medo-card__media {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background-color: var(--medo-color-surface-subtle);
+}
+
+.medo-card__media > :is(img, video, picture, .medo-image) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.medo-card--plain .medo-card__media {
+  border-radius: var(--medo-radius-lg);
+  margin-block-end: var(--medo-space-4);
+}
+
+.medo-card__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-4);
+  flex: 1;
+  padding: var(--_pad);
+}
+
+.medo-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--medo-space-4);
+}
+
+.medo-card__heading {
+  display: grid;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-card__title {
+  margin: 0;
+  font: var(--medo-typography-heading-sm);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-card__subtitle {
+  margin: 0;
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-card__body {
+  font: var(--medo-typography-body-sm);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-card__body > :first-child {
+  margin-block-start: 0;
+}
+.medo-card__body > :last-child {
+  margin-block-end: 0;
+}
+
+/* Footer at the bottom, so cards in a row align. */
+.medo-card__footer {
+  margin-block-start: auto;
+}
+
+/* ---------- Horizontal (lists): media 180 px wide on the left ---------- */
+
+.medo-card--horizontal {
+  flex-direction: row;
+}
+
+.medo-card--horizontal .medo-card__media {
+  flex: 0 0 11.25rem; /* 180 px */
+  aspect-ratio: auto;
+}
+
+/* ---------- Interactive: stretched title link ---------- */
+
+.medo-card__link {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+/* The link covers the whole card. */
+.medo-card__link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+/* Buttons and other controls stay clickable above the link. */
+.medo-card :is(.medo-card__header-actions, .medo-card__footer, .medo-card__body) :is(a, button, input, select, textarea, [tabindex]) {
+  position: relative;
+  z-index: 1;
+}
+
+.medo-card--interactive {
+  cursor: pointer;
+}
+
+.medo-card--interactive::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: 0;
+  transition: background-color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-hovered])::before {
+  background-color: var(--medo-color-state-hover);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-pressed])::before {
+  background-color: var(--medo-color-state-pressed);
+}
+
+.medo-card--interactive:has(.medo-card__link[data-focus-visible]) {
+  box-shadow: var(--medo-shadow-focus-ring);
+}
+
+.medo-card--interactive.medo-card--elevated:has(.medo-card__link[data-focus-visible]) {
+  box-shadow: var(--medo-shadow-focus-ring), var(--medo-shadow-elevation-1);
+}
+
+@media (forced-colors: active) {
+  .medo-card {
+    border-color: CanvasText;
+  }
+  .medo-card--interactive:has(.medo-card__link[data-focus-visible]) {
+    outline: var(--medo-focus-ring-width) solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+/* Interactive cards give way a little while pressed (iOS) and spring back. */
+.medo-card--interactive {
+  transition: scale var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+.medo-card--interactive:has(.medo-card__link[data-pressed]) {
+  scale: 0.98;
+  transition-duration: var(--medo-motion-duration-fast);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .medo-card--interactive:has(.medo-card__link[data-pressed]) {
+    scale: none;
+  }
+}