@med-o/ui 0.0.0-stage → 0.1.0

package/src/field/field.css

@@ -0,0 +1,115 @@
+/**
+ * Field – med.o Design System
+ * Label + control + helper / error text. Used by TextField, CheckboxGroup, RadioGroup.
+ *
+ * State contract (data attributes, set by React Aria – other frameworks set the same):
+ *   [data-invalid] [data-disabled] [data-required]
+ */
+
+.medo-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-1);
+  min-inline-size: 0;
+}
+
+.medo-field--group {
+  gap: var(--medo-space-2);
+}
+
+.medo-field__label {
+  display: inline-flex;
+  gap: var(--medo-space-1);
+  padding-inline-start: var(--medo-space-0-5);
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-primary);
+}
+
+.medo-field__required {
+  color: var(--medo-color-text-danger);
+}
+
+.medo-field__footer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-2);
+  padding-inline-start: var(--medo-space-0-5);
+  font: var(--medo-typography-body-sm);
+}
+
+.medo-field__footer:empty {
+  display: none;
+}
+
+.medo-field__description {
+  color: var(--medo-color-text-secondary);
+}
+
+/* The error message replaces the helper text. */
+.medo-field[data-invalid] > .medo-field__footer > .medo-field__description {
+  display: none;
+}
+
+.medo-field__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--medo-space-1);
+  color: var(--medo-color-text-danger);
+}
+
+.medo-field__error > svg {
+  flex-shrink: 0;
+  inline-size: var(--medo-size-icon-sm);
+  block-size: var(--medo-size-icon-sm);
+  margin-block-start: var(--medo-space-0-5);
+}
+
+.medo-field__counter {
+  margin-inline-start: auto;
+  color: var(--medo-color-text-secondary);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.medo-field__counter[data-over] {
+  color: var(--medo-color-text-danger);
+}
+
+.medo-field[data-disabled] .medo-field__label {
+  color: var(--medo-color-text-disabled);
+}
+/* Helper text stays readable when the field is disabled: it often explains why. */
+
+/* Options of CheckboxGroup and RadioGroup */
+.medo-field__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--medo-space-2);
+}
+
+.medo-field[data-orientation='horizontal'] .medo-field__options {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: var(--medo-space-6);
+}
+
+/* Errors appear softly instead of popping in. */
+.medo-field__error {
+  transition:
+    opacity var(--medo-motion-duration-fast) var(--medo-motion-easing-standard),
+    translate var(--medo-motion-spring-snappy-duration) var(--medo-motion-spring-snappy);
+}
+@starting-style {
+  .medo-field__error {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--medo-space-1));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @starting-style {
+    .medo-field__error {
+      translate: none;
+    }
+  }
+}

package/src/link/link.css

@@ -0,0 +1,103 @@
+/**
+ * Link – med.o Design System
+ *
+ * Navigates to a page, place or file. Actions are buttons.
+ *   Inline (in running text, always underlined):
+ *     <a class="medo-link" href="/privacy">privacy policy</a>
+ *   Standalone (own line, underline on hover):
+ *     <a class="medo-link medo-link--standalone medo-link--md" href="/projects">View all <svg …/></a>
+ *
+ * State contract: [data-hovered] [data-pressed] [data-focus-visible] [data-disabled]
+ * (set by React Aria – plain HTML falls back to :hover, :active, :focus-visible).
+ */
+
+.medo-link {
+  --_fg: var(--medo-color-text-brand);
+  --_underline: 1px;
+
+  color: var(--_fg);
+  font: inherit;
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--_underline);
+  text-underline-offset: 0.2em;
+  border-radius: var(--medo-radius-sm);
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--medo-motion-duration-fast) var(--medo-motion-easing-standard);
+}
+
+.medo-link:is([data-hovered], :not([data-rac]):hover) {
+  --_fg: var(--medo-color-text-brand-hover);
+  --_underline: 2px;
+}
+
+.medo-link:is([data-pressed], :not([data-rac]):active) {
+  --_fg: var(--medo-color-text-brand-pressed);
+  --_underline: 2px;
+}
+
+.medo-link:is([data-focus-visible], :not([data-rac]):focus-visible) {
+  outline: var(--medo-focus-ring-width) solid var(--medo-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ---------- Standalone ---------- */
+
+.medo-link--standalone {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--medo-space-1);
+  min-block-size: var(--medo-space-6); /* 24 px target (WCAG 2.5.8) */
+  font: var(--medo-typography-label-md);
+  text-decoration-line: none;
+}
+
+.medo-link--standalone.medo-link--sm {
+  font: var(--medo-typography-label-sm);
+}
+
+.medo-link--standalone:is([data-hovered], [data-pressed], :not([data-rac]):hover, :not([data-rac]):active) {
+  text-decoration-line: underline;
+  --_underline: 1px;
+}
+
+/* ---------- Icons (external, arrow) ---------- */
+
+.medo-link__icon {
+  display: inline-block;
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-start: var(--medo-space-1);
+  vertical-align: -0.125em;
+  stroke-width: 2.5;
+}
+
+.medo-link--standalone .medo-link__icon {
+  margin-inline-start: 0;
+  vertical-align: baseline;
+  inline-size: var(--medo-space-4);
+  block-size: var(--medo-space-4);
+}
+
+.medo-link--standalone.medo-link--sm .medo-link__icon {
+  inline-size: var(--medo-space-3);
+  block-size: var(--medo-space-3);
+  stroke-width: 3;
+}
+
+.medo-link[data-disabled] {
+  --_fg: var(--medo-color-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .medo-link {
+    color: LinkText;
+  }
+  .medo-link:is([data-focus-visible], :not([data-rac]):focus-visible) {
+    outline-color: Highlight;
+  }
+}
+
+/* Color fades stay with reduced motion – they do not move anything. */

package/src/list/list.css

@@ -0,0 +1,172 @@
+/**
+ * List – med.o Design System
+ *
+ *   <ul class="medo-list medo-list--bullet [medo-list--md]">       bullets · <ol class="medo-list--number"> · <ul role="list" class="medo-list--check">
+ *     <li class="medo-list__item">Text <ul class="medo-list …">level 2</ul></li>
+ *     <li class="medo-list__item medo-list__item--excluded"><span class="medo-list__icon">×</span>…</li>
+ *   </ul>
+ *   <dl class="medo-dl medo-dl--auto"><div class="medo-dl__row"><dt class="medo-dl__term"/><dd class="medo-dl__value"/></div></dl>
+ * Without a size class the list takes the size of the surrounding text; markers scale with it.
+ * Marker column 24 (numbers 28), aligned to the first line. Item spacing space/2. Level 2: ring, „a.“.
+ */
+
+.medo-list {
+  --_col: 1.5rem; /* 24 */
+  --_icon: max(1rem, 1em); /* 16 · lg 20 */
+
+  display: grid;
+  gap: var(--medo-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--medo-color-text-primary);
+}
+
+.medo-list--sm {
+  font: var(--medo-typography-body-sm);
+}
+.medo-list--md {
+  font: var(--medo-typography-body-md);
+}
+.medo-list--lg {
+  --_icon: var(--medo-size-icon-md); /* 20 */
+  font: var(--medo-typography-body-lg);
+}
+
+.medo-list--number {
+  --_col: 1.75rem; /* 28 */
+  counter-reset: medo-list;
+}
+
+.medo-list__item {
+  position: relative;
+  padding-inline-start: var(--_col);
+}
+
+/* Level 2 sits in the text column of its parent item: 24 px further in. */
+.medo-list__item > .medo-list {
+  margin-block-start: var(--medo-space-2);
+}
+
+/* ---------- Markers: own column, centred on the first line ---------- */
+
+.medo-list--bullet > .medo-list__item::before,
+.medo-list--number > .medo-list__item::before,
+.medo-list__icon {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  align-items: center;
+  block-size: 1lh;
+  color: var(--medo-color-text-secondary);
+}
+
+/* Bullet: dot 6 (sm 5), centred in a box as tall as the first line. */
+.medo-list--bullet > .medo-list__item::before {
+  content: '';
+  inset-block-start: calc(0.5lh - 0.1875em);
+  block-size: 0.375em;
+  inline-size: 0.375em;
+  border-radius: var(--medo-radius-full);
+  background-color: currentColor;
+}
+
+/* Level 2: ring. */
+.medo-list__item .medo-list--bullet > .medo-list__item::before {
+  box-sizing: border-box;
+  border: 1.25px solid currentColor;
+  background-color: transparent;
+}
+
+/* Number: same style as the text, tabular figures, right aligned so „9.“ and „10.“ line up. */
+.medo-list--number > .medo-list__item {
+  counter-increment: medo-list;
+}
+
+.medo-list--number > .medo-list__item::before {
+  content: counter(medo-list) '.';
+  justify-content: flex-end;
+  inline-size: calc(var(--_col) - 0.375em);
+  font-variant-numeric: tabular-nums;
+}
+
+.medo-list__item .medo-list--number > .medo-list__item::before {
+  content: counter(medo-list, lower-alpha) '.';
+}
+
+/* ---------- Feature list ---------- */
+
+.medo-list__icon {
+  color: var(--medo-color-text-brand);
+}
+
+.medo-list__icon > svg {
+  inline-size: var(--_icon);
+  block-size: var(--_icon);
+}
+
+.medo-list__item--excluded {
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-list__item--excluded .medo-list__icon {
+  color: var(--medo-color-text-secondary);
+}
+
+/* ---------- Description list ---------- */
+
+.medo-dl {
+  container-type: inline-size;
+  margin: 0;
+}
+
+.medo-dl__row {
+  display: grid;
+  grid-template-columns: 11.25rem minmax(0, 1fr); /* term column 180 */
+  gap: var(--medo-space-1) var(--medo-space-4);
+  align-items: baseline;
+  padding-block: var(--medo-space-3);
+}
+
+.medo-dl__row:first-child {
+  padding-block-start: 0;
+}
+
+.medo-dl__row + .medo-dl__row {
+  border-block-start: var(--medo-border-width-thin) solid var(--medo-color-border-default);
+}
+
+.medo-dl__term {
+  font: var(--medo-typography-label-md);
+  color: var(--medo-color-text-secondary);
+}
+
+.medo-dl__value {
+  min-inline-size: 0;
+  margin: 0;
+  font: var(--medo-typography-body-md);
+  color: var(--medo-color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.medo-dl--stacked .medo-dl__row {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* auto: stacked when the list itself is narrow (phone, Drawer, narrow column). */
+@container (max-width: 22.5rem) {
+  .medo-dl--auto .medo-dl__row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (forced-colors: active) {
+  .medo-list--bullet > .medo-list__item::before {
+    background-color: CanvasText;
+  }
+  .medo-list__item .medo-list--bullet > .medo-list__item::before {
+    background-color: transparent;
+    border-color: CanvasText;
+  }
+}