@carissa-io/theme-default 0.3.4 → 0.3.6

package/DESIGN.md

@@ -274,6 +274,51 @@ placements. The look of each toast is the Alert's (see above), so its colors, ro
 0.875rem button in `--c-text` (14.8:1 or more on every tint). A toast slides 0.75rem from its edge and fades in over `$transition-duration`; with reduced motion
 only the fade stays. The region is in the page, not in the browser's top layer, so a toast shown while a modal is open sits behind the modal's backdrop.
 
+## Divider
+From [components-divider](components/components-divider): `Divider`, a 1px line in `--c-muted` (the edge of the cards and fields: 4.74:1 on the background in light, 7.85:1 in dark),
+1rem of space around it. With a label the text is the small `--c-muted` text (0.875rem, same contrast) with 0.75rem between it and each line. Horizontal is an `hr`, vertical and labelled
+ones are `role="separator"`.
+
+## Badge
+From [components-badge](components/components-badge): `Badge` in six variants and two sizes (`md` 0.75rem, `sm` 0.6875rem, bold), square like the rest, plus a `dot`. The variants are **tinted
+like the Alert**: 12% of the role color (`--c-primary`, `--c-success`, `--c-warning`, `--c-error`, `--c-info`) over `--c-background` with `color-mix`, a 1px border at 35% of the same color.
+**The text is always `--c-text`**, never the status color: it is 13.6:1 or more on every tint in both modes (light 13.63 to 15.32, dark 13.63 to 15.87), where the raw light `error` on its own tint would
+fail. Neutral is `--c-surface` with a `--c-muted` border (text 16.44:1). The **dot** carries the role color (`--c-muted` for neutral) and is 3:1 or more as a graphic on its tint in both modes: in light 3.81 (error), 4.21 (warning), 4.27 (success), 5.56 (info), 15.97 (primary) and 4.35 (neutral); in dark 6.25 or more. A dot has no text, so the caller gives it `aria-label`.
+
+## Tag
+From [components-tag](components/components-tag): `Tag`, a chip with the same six tints, the same text rule (`--c-text`, same ratios) and square corners as the Badge, bold, 0.875rem (`md`) or 0.75rem (`sm`). A removable tag is
+one tab stop and takes the theme focus ring (1px `--c-focus`, offset 2px). The remove "x" is the tag text color at 70%, full on hover. Disabled tags are exempt from contrast (55% opacity).
+
+## Link
+From [components-link](components/components-link): `Link` in `default`, `subtle` and `inline`. The default is `--c-primary` (black in light, white in dark: 21:1 and 19.8:1 on the background), bold, **always underlined**: a black link
+beside near-black text is told apart by the underline alone, so there is no un-underlined default. Hover is `--c-primary-hover`. `subtle` is `--c-muted` (4.74:1 light, 7.85:1 dark), `--c-text` on hover. Focus is the theme ring
+(1px `--c-focus`, offset 2px). Disabled is `--c-disabled-text` at full opacity (exempt from contrast, as the other disabled states).
+
+## Avatar
+From [components-avatar](components/components-avatar): `Avatar` in five sizes (`xs` 1.5rem to `xl` 5rem), a circle or a square (theme radius, so square). The initials are bold `--c-text` on `--c-surface-active`
+(14.23:1 light, 13.88:1 dark); the placeholder without a name is the empty disc. `AvatarGroup` overlaps avatars by 0.5rem with a 2px ring in `--c-background`, so the separation works in both modes.
+
+## Skeleton
+From [components-skeleton](components/components-skeleton): `Skeleton` as a text line, a circle or a rectangle, in `--c-surface-active` (a faint block on purpose: 1.26:1 on the light background, 1.31:1 in dark; it carries no information and is `aria-hidden`).
+The sweep is a band of `--c-background` at 60%, 1.5s per pass; with `prefers-reduced-motion` it is removed and the block stays static.
+
+## Progress
+From [components-progress](components/components-progress): `Progress` as a bar (0.25, 0.5 or 0.75rem tall, square ends) or a ring (1.5, 2.5 or 4rem). The track is `--c-surface-active` and the fill `--c-primary` (black in light, white in dark): 16.67:1 and 15.13:1 on
+the track, well above the 3:1 of a graphic. The visible percentage is bold `--c-text`. Indeterminate slides (bar) or turns (ring) in 1.4s; with reduced motion both become a slow opacity pulse (2s).
+
+## Tooltip
+From [components-tooltip](components/components-tooltip): `Tooltip`, a short hint on hover and keyboard focus. **The bubble is inverted**: `--c-text` as the background and `--c-background` as the text, so it stands out from
+the page in both modes and needs no shadow. Light: white text on `#171717`, 17.93:1; dark: `#0a0a0a` text on `#f5f5f5`, 18.16:1 (the same ratios separate the bubble from the page as a graphic). Square corners, 0.875rem text,
+0.5rem padding on the block axis and 0.75rem on the inline one, at most 20rem wide, a 0.5rem arrow, 0.5rem from the trigger. The fade follows `$transition-duration` (0.2s) and is removed with reduced motion. It opens after 300ms of hover
+or focus, stays open while the pointer is over it and closes on `Escape`; the bubble is `role="tooltip"` and the trigger gets `aria-describedby`. The hint is never the only way to get information (touch has no hover).
+
+## Prose
+From [components-prose](components/components-prose): `Prose`, raw HTML content (markdown, a CMS, an article) with the same hierarchy as `Heading` and `Text`. Body text is `--c-text` at 1rem and a 1.6 line height, 65ch wide (small and
+large scale the text and the headings by 0.875 and 1.125). Headings use the type scale tokens: `h1` and `h2` black (900), `h3` to `h6` bold, with the line heights of the typography block. Links are `--c-primary` and always underlined
+(21:1 light, 19.8:1 dark), `--c-primary-hover` on hover (15.13:1 and 15.72:1). The quote edge, the `hr` and the table borders are `--c-muted` (4.74:1 light, 7.85:1 dark, above the 3:1 of a graphic); the quote text and the figure
+caption are `--c-muted` on the page background too. Code, `pre`, `kbd` and the table head sit on `--c-surface` with `--c-text` (16.44:1 in both modes); `kbd` has a `--c-muted` edge. Everything is square (`$radius`), code uses `$font-family-mono`.
+`--c-muted` is not used for text on `--c-surface` (4.35:1 in light).
+
 ## Keyboard focus (all controls)
 One rule keeps the controls coherent: **an outlined control thickens its own border from 1px to 2px, black** (text fields,
 select, combobox, date picker, textarea, upload, empty checkbox, off switch, radio, secondary and ghost buttons); **a filled

package/README.md

@@ -142,7 +142,7 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 
 ## What it configures
 `components-input`, `-button`, `-checkbox`, `-switch`, `-radio-group`, `-slider`, `-popover`, `-listbox`, `-select`,
-`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal` and `-toast`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip` and `-prose`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -1786,3 +1786,802 @@
   outline: 2px solid currentColor;
   outline-offset: 2px;
 }
+
+.c-divider {
+  box-sizing: border-box;
+}
+
+.c-divider--horizontal {
+  width: 100%;
+  margin: 1rem 0;
+}
+
+hr.c-divider {
+  height: 0;
+  border: 0;
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-divider--vertical {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+  margin: 0 1rem;
+  vertical-align: middle;
+  border-left: 1px solid var(--c-muted);
+}
+
+.c-divider--labeled {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+.c-divider--labeled::before, .c-divider--labeled::after {
+  flex: 1 1 auto;
+  height: 0;
+  content: "";
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-divider__label {
+  flex: none;
+}
+
+.c-badge {
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 0.25em;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  line-height: 1.5;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+
+.c-badge--md {
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.c-badge--sm {
+  padding: 0 0.4375rem;
+  font-size: 0.6875rem;
+}
+
+.c-badge--neutral {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+}
+.c-badge--neutral.c-badge--dot {
+  background: var(--c-muted);
+  border-color: var(--c-muted);
+}
+
+.c-badge--primary {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-background));
+}
+.c-badge--primary.c-badge--dot {
+  background: var(--c-primary);
+  border-color: var(--c-primary);
+}
+
+.c-badge--success {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-success) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-background));
+}
+.c-badge--success.c-badge--dot {
+  background: var(--c-success);
+  border-color: var(--c-success);
+}
+
+.c-badge--warning {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-background));
+}
+.c-badge--warning.c-badge--dot {
+  background: var(--c-warning);
+  border-color: var(--c-warning);
+}
+
+.c-badge--error {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-error) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-background));
+}
+.c-badge--error.c-badge--dot {
+  background: var(--c-error);
+  border-color: var(--c-error);
+}
+
+.c-badge--info {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-info) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-info) 35%, var(--c-background));
+}
+.c-badge--info.c-badge--dot {
+  background: var(--c-info);
+  border-color: var(--c-info);
+}
+
+.c-badge--dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border-radius: 50%;
+}
+.c-badge--dot.c-badge--sm {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.c-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  max-width: 100%;
+  font-weight: 700;
+  line-height: 1.5;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+.c-tag:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-tag--md {
+  padding: 0.125rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+.c-tag--sm {
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+}
+
+.c-tag__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c-tag__remove {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 1em;
+  line-height: 1;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 50%;
+  opacity: 0.7;
+}
+.c-tag__remove:hover:not(:disabled) {
+  opacity: 1;
+}
+
+.c-tag--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.c-tag--disabled .c-tag__remove {
+  cursor: not-allowed;
+}
+
+.c-tag--neutral {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+}
+
+.c-tag--primary {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-background));
+}
+
+.c-tag--success {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-success) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-background));
+}
+
+.c-tag--warning {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-background));
+}
+
+.c-tag--error {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-error) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-background));
+}
+
+.c-tag--info {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-info) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-info) 35%, var(--c-background));
+}
+
+.c-link {
+  font-weight: 700;
+  color: var(--c-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.c-link:hover {
+  color: var(--c-primary-hover);
+  text-decoration: underline;
+}
+.c-link:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+  border-radius: 0;
+}
+
+.c-link--subtle {
+  color: var(--c-muted);
+}
+.c-link--subtle:hover {
+  color: var(--c-text);
+}
+
+.c-link--inline {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.c-link--disabled,
+.c-link--disabled:hover {
+  color: var(--c-disabled-text);
+  text-decoration: underline;
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.c-avatar {
+  --c-avatar-size: 2.5rem;
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--c-avatar-size);
+  height: var(--c-avatar-size);
+  overflow: hidden;
+  font-size: calc(var(--c-avatar-size) * 0.4);
+  font-weight: 700;
+  line-height: 1;
+  color: var(--c-text);
+  vertical-align: middle;
+  user-select: none;
+  background: var(--c-surface-active);
+}
+
+.c-avatar--xs {
+  --c-avatar-size: 1.5rem;
+}
+
+.c-avatar--sm {
+  --c-avatar-size: 2rem;
+}
+
+.c-avatar--md {
+  --c-avatar-size: 2.5rem;
+}
+
+.c-avatar--lg {
+  --c-avatar-size: 3.5rem;
+}
+
+.c-avatar--xl {
+  --c-avatar-size: 5rem;
+}
+
+.c-avatar--circle {
+  border-radius: 50%;
+}
+
+.c-avatar--square {
+  border-radius: 0;
+}
+
+.c-avatar__initials {
+  text-transform: uppercase;
+}
+
+.c-avatar__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.c-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.c-avatar-group > .c-avatar {
+  box-shadow: 0 0 0 2px var(--c-background);
+}
+.c-avatar-group > .c-avatar + .c-avatar {
+  margin-inline-start: -0.5rem;
+}
+
+@keyframes c-skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.c-skeleton {
+  display: block;
+  width: 100%;
+  background-color: var(--c-surface-active);
+  border-radius: 0;
+}
+
+.c-skeleton--text {
+  height: 1em;
+}
+
+.c-skeleton--circle {
+  flex: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.c-skeleton--rect {
+  min-height: 1px;
+}
+
+.c-skeleton--animated {
+  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-background) 60%, transparent) 50%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size: 50% 100%;
+  animation: c-skeleton-shimmer 1.5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-skeleton--animated {
+    background-image: none;
+    animation: none;
+  }
+}
+
+.c-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.c-skeleton--last {
+  width: 60%;
+}
+
+@keyframes c-progress-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@keyframes c-progress-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes c-progress-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.c-progress {
+  --c-progress-bar-height: 0.5rem;
+  --c-progress-circular-size: 2.5rem;
+  box-sizing: border-box;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--c-text);
+}
+
+.c-progress--sm {
+  --c-progress-bar-height: 0.25rem;
+  --c-progress-circular-size: 1.5rem;
+}
+
+.c-progress--md {
+  --c-progress-bar-height: 0.5rem;
+  --c-progress-circular-size: 2.5rem;
+}
+
+.c-progress--lg {
+  --c-progress-bar-height: 0.75rem;
+  --c-progress-circular-size: 4rem;
+}
+
+.c-progress--bar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  width: 100%;
+}
+.c-progress--bar .c-progress__track {
+  position: relative;
+  flex: 1;
+  height: var(--c-progress-bar-height);
+  overflow: hidden;
+  background: var(--c-surface-active);
+  border-radius: 0;
+}
+.c-progress--bar .c-progress__fill {
+  display: block;
+  height: 100%;
+  background: var(--c-primary);
+  border-radius: inherit;
+  transition: width 0.2s ease;
+}
+.c-progress--bar.c-progress--indeterminate .c-progress__fill {
+  width: 40%;
+  transition: none;
+  animation: c-progress-slide 1.4s ease-in-out infinite;
+}
+
+.c-progress--circular {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--c-progress-circular-size);
+  height: var(--c-progress-circular-size);
+  vertical-align: middle;
+}
+.c-progress--circular .c-progress__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.c-progress--circular .c-progress__track {
+  stroke: var(--c-surface-active);
+  stroke-width: 8;
+}
+.c-progress--circular .c-progress__fill {
+  stroke: var(--c-primary);
+  stroke-width: 8;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.2s ease;
+}
+.c-progress--circular .c-progress__value {
+  position: relative;
+  font-size: calc(var(--c-progress-circular-size) * 0.28);
+}
+.c-progress--circular.c-progress--indeterminate .c-progress__svg {
+  animation: c-progress-spin 1.4s linear infinite;
+}
+.c-progress--circular.c-progress--indeterminate .c-progress__fill {
+  stroke-dashoffset: 210;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-progress--bar.c-progress--indeterminate .c-progress__fill {
+    width: 100%;
+    animation: c-progress-pulse 2s ease-in-out infinite;
+  }
+  .c-progress--circular.c-progress--indeterminate .c-progress__svg {
+    animation: c-progress-pulse 2s ease-in-out infinite;
+  }
+}
+.c-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.c-tooltip__bubble {
+  position: absolute;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 20rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--c-background);
+  text-align: start;
+  overflow-wrap: break-word;
+  white-space: normal;
+  visibility: hidden;
+  background: var(--c-text);
+  border-radius: 0;
+  box-shadow: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+  pointer-events: none;
+}
+.c-tooltip__bubble::before {
+  position: absolute;
+  content: "";
+}
+.c-tooltip__bubble::after {
+  position: absolute;
+  width: 0.5rem;
+  height: 0.5rem;
+  content: "";
+  background: inherit;
+  transform: rotate(45deg);
+}
+.c-tooltip__bubble--top, .c-tooltip__bubble--bottom {
+  left: 50%;
+  translate: -50% 0;
+}
+.c-tooltip__bubble--top::before, .c-tooltip__bubble--bottom::before {
+  right: 0;
+  left: 0;
+  height: 0.5rem;
+}
+.c-tooltip__bubble--top::after, .c-tooltip__bubble--bottom::after {
+  left: calc(50% - 0.5rem / 2);
+}
+.c-tooltip__bubble--top {
+  bottom: calc(100% + 0.5rem);
+}
+.c-tooltip__bubble--top::before {
+  top: 100%;
+}
+.c-tooltip__bubble--top::after {
+  bottom: calc(0.5rem / -2);
+}
+.c-tooltip__bubble--bottom {
+  top: calc(100% + 0.5rem);
+}
+.c-tooltip__bubble--bottom::before {
+  bottom: 100%;
+}
+.c-tooltip__bubble--bottom::after {
+  top: calc(0.5rem / -2);
+}
+.c-tooltip__bubble--left, .c-tooltip__bubble--right {
+  top: 50%;
+  translate: 0 -50%;
+}
+.c-tooltip__bubble--left::before, .c-tooltip__bubble--right::before {
+  top: 0;
+  bottom: 0;
+  width: 0.5rem;
+}
+.c-tooltip__bubble--left::after, .c-tooltip__bubble--right::after {
+  top: calc(50% - 0.5rem / 2);
+}
+.c-tooltip__bubble--left {
+  right: calc(100% + 0.5rem);
+}
+.c-tooltip__bubble--left::before {
+  left: 100%;
+}
+.c-tooltip__bubble--left::after {
+  right: calc(0.5rem / -2);
+}
+.c-tooltip__bubble--right {
+  left: calc(100% + 0.5rem);
+}
+.c-tooltip__bubble--right::before {
+  right: 100%;
+}
+.c-tooltip__bubble--right::after {
+  left: calc(0.5rem / -2);
+}
+
+.c-tooltip--open > .c-tooltip__bubble {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-tooltip__bubble {
+    transition: none;
+  }
+}
+.c-prose {
+  --c-prose-scale: 1;
+  max-width: 65ch;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  font-size: calc(1rem * var(--c-prose-scale));
+  line-height: 1.6;
+  color: var(--c-text);
+}
+.c-prose--sm {
+  --c-prose-scale: 0.875;
+}
+.c-prose--md {
+  --c-prose-scale: 1;
+}
+.c-prose--lg {
+  --c-prose-scale: 1.125;
+}
+.c-prose p,
+.c-prose ul,
+.c-prose ol,
+.c-prose blockquote,
+.c-prose pre,
+.c-prose figure,
+.c-prose table {
+  margin: 1.25em 0;
+}
+.c-prose h1,
+.c-prose h2,
+.c-prose h3,
+.c-prose h4,
+.c-prose h5,
+.c-prose h6 {
+  margin: 1.75em 0 0.5em;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  color: var(--c-text);
+}
+.c-prose h1 {
+  font-size: calc(2.5rem * var(--c-prose-scale));
+  font-weight: 900;
+  line-height: 1.1;
+}
+.c-prose h2 {
+  font-size: calc(1.75rem * var(--c-prose-scale));
+  font-weight: 900;
+  line-height: 1.2;
+}
+.c-prose h3 {
+  font-size: calc(1.25rem * var(--c-prose-scale));
+  font-weight: 700;
+  line-height: 1.3;
+}
+.c-prose h4 {
+  font-size: calc(1.125rem * var(--c-prose-scale));
+  font-weight: 700;
+  line-height: 1.3;
+}
+.c-prose h5 {
+  font-size: calc(1rem * var(--c-prose-scale));
+  font-weight: 700;
+  line-height: 1.4;
+}
+.c-prose h6 {
+  font-size: calc(0.875rem * var(--c-prose-scale));
+  font-weight: 700;
+  line-height: 1.4;
+}
+.c-prose ul,
+.c-prose ol {
+  padding-inline-start: 1.5em;
+}
+.c-prose ul {
+  list-style: disc;
+}
+.c-prose ol {
+  list-style: decimal;
+}
+.c-prose li {
+  margin: 0.25em 0;
+}
+.c-prose li > ul,
+.c-prose li > ol {
+  margin: 0.25em 0 0;
+}
+.c-prose a {
+  color: var(--c-primary);
+  text-decoration: underline;
+}
+.c-prose a:hover {
+  color: var(--c-primary-hover);
+  text-decoration: underline;
+}
+.c-prose blockquote {
+  padding: 0 0 0 1em;
+  color: var(--c-muted);
+  border-inline-start: 4px solid var(--c-muted);
+}
+.c-prose code,
+.c-prose kbd {
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875em;
+}
+.c-prose code {
+  padding: 0.15em 0.4em;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-radius: 0;
+}
+.c-prose kbd {
+  padding: 0.1em 0.4em;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-muted);
+  border-bottom-width: 2px;
+  border-radius: 0;
+}
+.c-prose pre {
+  padding: 1rem;
+  overflow: auto;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-radius: 0;
+}
+.c-prose pre code {
+  padding: 0;
+  font-size: 0.875em;
+  color: inherit;
+  background: none;
+  border-radius: 0;
+}
+.c-prose hr {
+  height: 0;
+  margin: 2em 0;
+  border: 0;
+  border-top: 1px solid var(--c-muted);
+}
+.c-prose img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 0;
+}
+.c-prose figure > img {
+  margin-inline: auto;
+}
+.c-prose figcaption {
+  margin-top: 0.5em;
+  font-size: 0.875em;
+  color: var(--c-muted);
+}
+.c-prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.c-prose th,
+.c-prose td {
+  padding: 0.5rem 0.75rem;
+  text-align: start;
+  vertical-align: top;
+  border: 1px solid var(--c-muted);
+}
+.c-prose th {
+  font-weight: 700;
+  background: var(--c-surface);
+}
+.c-prose > :first-child {
+  margin-top: 0;
+}
+.c-prose > :last-child {
+  margin-bottom: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -57,7 +57,16 @@
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-spinner": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.0",
-    "@carissa-io/components-toast": "^0.1.0"
+    "@carissa-io/components-toast": "^0.1.0",
+    "@carissa-io/components-divider": "^0.1.0",
+    "@carissa-io/components-badge": "^0.1.0",
+    "@carissa-io/components-tag": "^0.1.0",
+    "@carissa-io/components-link": "^0.1.0",
+    "@carissa-io/components-avatar": "^0.1.0",
+    "@carissa-io/components-skeleton": "^0.1.0",
+    "@carissa-io/components-progress": "^0.1.0",
+    "@carissa-io/components-tooltip": "^0.1.0",
+    "@carissa-io/components-prose": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -131,27 +140,63 @@
     },
     "@carissa-io/components-toast": {
       "optional": true
+    },
+    "@carissa-io/components-divider": {
+      "optional": true
+    },
+    "@carissa-io/components-badge": {
+      "optional": true
+    },
+    "@carissa-io/components-tag": {
+      "optional": true
+    },
+    "@carissa-io/components-link": {
+      "optional": true
+    },
+    "@carissa-io/components-avatar": {
+      "optional": true
+    },
+    "@carissa-io/components-skeleton": {
+      "optional": true
+    },
+    "@carissa-io/components-progress": {
+      "optional": true
+    },
+    "@carissa-io/components-tooltip": {
+      "optional": true
+    },
+    "@carissa-io/components-prose": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@carissa-io/components-alert": "^0.1.0",
+    "@carissa-io/components-avatar": "^0.1.0",
+    "@carissa-io/components-badge": "^0.1.0",
     "@carissa-io/components-button": "^0.1.1",
     "@carissa-io/components-calendar": "^0.1.1",
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-checkbox": "^0.1.1",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
+    "@carissa-io/components-link": "^0.1.0",
     "@carissa-io/components-listbox": "^0.1.1",
     "@carissa-io/components-modal": "^0.1.0",
     "@carissa-io/components-popover": "^0.1.1",
+    "@carissa-io/components-progress": "^0.1.0",
+    "@carissa-io/components-prose": "^0.1.0",
     "@carissa-io/components-radio-group": "^0.1.1",
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-select": "^0.1.1",
+    "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",
     "@carissa-io/components-spinner": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-tag": "^0.1.0",
     "@carissa-io/components-toast": "^0.1.0",
+    "@carissa-io/components-tooltip": "^0.1.0",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
     "sass-embedded": "^1.105.1",

package/scss/index.scss

@@ -685,3 +685,255 @@
     $c-toast-enter-duration: $transition-duration,
     $c-toast-enter-distance: 0.75rem
 );
+
+// Divider: a 1px line in the muted color (the same edge as the card and field borders), so it reads in both modes. The
+// label is the small muted text, 0.75rem from each line. Spacing 1rem above and below (or at the sides when vertical).
+@use '@carissa-io/components-divider/scss' as divider with (
+    $c-divider-color: $var-muted,
+    $c-divider-thickness: 1px,
+    $c-divider-spacing: 1rem,
+    $c-divider-label-color: $var-muted,
+    $c-divider-label-gap: 0.75rem,
+    $c-divider-label-font-size: $font-size-small
+);
+
+// Badge: a small status marker, square like everything else. The variants are tinted like the alerts (12% of the role over
+// the page background, 35% for the border) and the text stays --c-text (14.8:1 or more on every tint): the raw status
+// colors are under 4.5:1 on some tints, so they only color the dot. Neutral is the surface with the muted border.
+// Primary is the tint of --c-primary (a light grey in light, a dark one in dark).
+@use '@carissa-io/components-badge/scss' as badge with (
+    $c-badge-radius: $radius,
+    $c-badge-border-width: 1px,
+    $c-badge-font-weight: $font-weight-bold,
+    $c-badge-md-font-size: $font-size-caption,
+    $c-badge-sm-font-size: $font-size-overline,
+
+    // Neutral
+    $c-badge-neutral-background: $var-surface,
+    $c-badge-neutral-border-color: $var-muted,
+    $c-badge-neutral-color: $var-text,
+    $c-badge-neutral-dot-color: $var-muted,
+
+    // Primary
+    $c-badge-primary-background: color-mix(in srgb, $var-primary 12%, $var-background),
+    $c-badge-primary-border-color: color-mix(in srgb, $var-primary 35%, $var-background),
+    $c-badge-primary-color: $var-text,
+    $c-badge-primary-dot-color: $var-primary,
+
+    // Success
+    $c-badge-success-background: color-mix(in srgb, $var-success 12%, $var-background),
+    $c-badge-success-border-color: color-mix(in srgb, $var-success 35%, $var-background),
+    $c-badge-success-color: $var-text,
+    $c-badge-success-dot-color: $var-success,
+
+    // Warning
+    $c-badge-warning-background: color-mix(in srgb, $var-warning 12%, $var-background),
+    $c-badge-warning-border-color: color-mix(in srgb, $var-warning 35%, $var-background),
+    $c-badge-warning-color: $var-text,
+    $c-badge-warning-dot-color: $var-warning,
+
+    // Error
+    $c-badge-error-background: color-mix(in srgb, $var-error 12%, $var-background),
+    $c-badge-error-border-color: color-mix(in srgb, $var-error 35%, $var-background),
+    $c-badge-error-color: $var-text,
+    $c-badge-error-dot-color: $var-error,
+
+    // Info
+    $c-badge-info-background: color-mix(in srgb, $var-info 12%, $var-background),
+    $c-badge-info-border-color: color-mix(in srgb, $var-info 35%, $var-background),
+    $c-badge-info-color: $var-text,
+    $c-badge-info-dot-color: $var-info
+);
+
+// Tag: the same tints as the badge, square, with the label-sized text and the theme focus ring (1px, offset 2px) because a
+// removable tag is a tab stop. The remove button is the tag's text color at 70%, full on hover.
+@use '@carissa-io/components-tag/scss' as tag with (
+    $c-tag-radius: $radius,
+    $c-tag-border-width: 1px,
+    $c-tag-font-weight: $font-weight-bold,
+    $c-tag-md-font-size: $font-size-small,
+    $c-tag-sm-font-size: $font-size-caption,
+    $c-tag-focus-outline: $focus-width solid $var-focus,
+    $c-tag-focus-outline-offset: 2px,
+
+    // Neutral
+    $c-tag-neutral-background: $var-surface,
+    $c-tag-neutral-border-color: $var-muted,
+    $c-tag-neutral-color: $var-text,
+
+    // Primary
+    $c-tag-primary-background: color-mix(in srgb, $var-primary 12%, $var-background),
+    $c-tag-primary-border-color: color-mix(in srgb, $var-primary 35%, $var-background),
+    $c-tag-primary-color: $var-text,
+
+    // Success
+    $c-tag-success-background: color-mix(in srgb, $var-success 12%, $var-background),
+    $c-tag-success-border-color: color-mix(in srgb, $var-success 35%, $var-background),
+    $c-tag-success-color: $var-text,
+
+    // Warning
+    $c-tag-warning-background: color-mix(in srgb, $var-warning 12%, $var-background),
+    $c-tag-warning-border-color: color-mix(in srgb, $var-warning 35%, $var-background),
+    $c-tag-warning-color: $var-text,
+
+    // Error
+    $c-tag-error-background: color-mix(in srgb, $var-error 12%, $var-background),
+    $c-tag-error-border-color: color-mix(in srgb, $var-error 35%, $var-background),
+    $c-tag-error-color: $var-text,
+
+    // Info
+    $c-tag-info-background: color-mix(in srgb, $var-info 12%, $var-background),
+    $c-tag-info-border-color: color-mix(in srgb, $var-info 35%, $var-background),
+    $c-tag-info-color: $var-text
+);
+
+// Link: --c-primary (black in light, white in dark) with an underline, because a black link on black text is told apart
+// by the underline alone; --c-primary-hover on hover. Subtle is --c-muted (4.7:1 on the background) and turns --c-text.
+// Disabled is --c-disabled-text at full opacity. The focus ring is the theme's 1px ring, offset 2px.
+@use '@carissa-io/components-link/scss' as link with (
+    $c-link-color: $var-primary,
+    $c-link-color-hover: $var-primary-hover,
+    $c-link-decoration: underline,
+    $c-link-hover-decoration: underline,
+    $c-link-font-weight: $font-weight-bold,
+    $c-link-subtle-color: $var-muted,
+    $c-link-subtle-color-hover: $var-text,
+    $c-link-inline-decoration: underline,
+    $c-link-inline-underline-offset: 0.15em,
+    $c-link-focus-outline: $focus-width solid $var-focus,
+    $c-link-focus-outline-offset: 2px,
+    $c-link-focus-radius: $radius,
+    $c-link-disabled-color: $var-disabled-text,
+    $c-link-disabled-opacity: 1
+);
+
+// Avatar: a --c-surface-active disc (or a square, with the theme radius) with --c-text initials, bold. The ring that
+// separates overlapping avatars in a group is the page background, so it blends in both modes.
+@use '@carissa-io/components-avatar/scss' as avatar with (
+    $c-avatar-background: $var-surface-active,
+    $c-avatar-color: $var-text,
+    $c-avatar-font-weight: $font-weight-bold,
+    $c-avatar-radius-square: $radius,
+    $c-avatar-group-overlap: -0.5rem,
+    $c-avatar-group-ring-width: 2px,
+    $c-avatar-group-ring-color: $var-background
+);
+
+// Skeleton: a --c-surface-active block, square, with a band of the page background at 60% sweeping across (a lighter band in
+// light, a darker one in dark). Reduced motion removes the sweep (the package handles it).
+@use '@carissa-io/components-skeleton/scss' as skeleton with (
+    $c-skeleton-background: $var-surface-active,
+    $c-skeleton-highlight: color-mix(in srgb, $var-background 60%, transparent),
+    $c-skeleton-radius: $radius,
+    $c-skeleton-text-height: 1em,
+    $c-skeleton-lines-gap: 0.5rem,
+    $c-skeleton-last-line-width: 60%,
+    $c-skeleton-circle-size: 2.5rem,
+    $c-skeleton-duration: 1.5s
+);
+
+// Progress: a --c-surface-active track with a --c-primary fill (black in light, white in dark), square ends, the
+// percentage in --c-text. Indeterminate loops at 1.4s; with reduced motion the package swaps the motion for a slow pulse.
+@use '@carissa-io/components-progress/scss' as progress with (
+    $c-progress-track-color: $var-surface-active,
+    $c-progress-fill-color: $var-primary,
+    $c-progress-color: $var-text,
+    $c-progress-font-size: $font-size-caption,
+    $c-progress-font-weight: $font-weight-bold,
+    $c-progress-gap: 0.75rem,
+    $c-progress-bar-height-sm: 0.25rem,
+    $c-progress-bar-height-md: 0.5rem,
+    $c-progress-bar-height-lg: 0.75rem,
+    $c-progress-bar-radius: $radius,
+    $c-progress-transition: width $transition-duration ease,
+    $c-progress-circular-size-sm: 1.5rem,
+    $c-progress-circular-size-md: 2.5rem,
+    $c-progress-circular-size-lg: 4rem,
+    $c-progress-circular-thickness: 8,
+    $c-progress-duration: 1.4s,
+    $c-progress-duration-reduced: 2s
+);
+
+// Tooltip: the bubble is inverted (--c-text as the background, --c-background as the text), so it reads against the page in
+// both modes: a near-black bubble with white text in light, a near-white one with near-black text in dark. Square like the
+// rest, no shadow (the contrast is the separation), 0.875rem text, at most 20rem wide, a 0.5rem arrow. The fade follows
+// $transition-duration and the package removes it with reduced motion. No other block forwards it, so it can go anywhere.
+@use '@carissa-io/components-tooltip/scss' as tooltip with (
+    $c-tooltip-background: $var-text,
+    $c-tooltip-color: $var-background,
+    $c-tooltip-radius: $radius,
+    $c-tooltip-padding: 0.5rem 0.75rem,
+    $c-tooltip-font-size: $font-size-small,
+    $c-tooltip-line-height: $line-height-normal,
+    $c-tooltip-max-width: 20rem,
+    $c-tooltip-shadow: none,
+    $c-tooltip-offset: 0.5rem,
+    $c-tooltip-arrow-size: 0.5rem,
+    $c-tooltip-transition-duration: $transition-duration
+);
+
+// Prose: raw HTML content with the same hierarchy as Heading and Text: the type scale tokens ($font-size-h1 to h6, the weights
+// and line heights of the typography block), body text in --c-text at a 1.6 line height, 65ch measure. Links are --c-primary
+// and underlined like Link; the quote edge, the rules and the table borders are --c-muted (the card and field edge), code, pre
+// and the table head sit on --c-surface. Colors only through the custom properties. No other block forwards it.
+@use '@carissa-io/components-prose/scss' as prose with (
+    $c-prose-max-width: 65ch,
+    $c-prose-font-family: $font-family,
+    $c-prose-font-size: $font-size-body,
+    $c-prose-color: $var-text,
+    $c-prose-line-height: 1.6,
+    $c-prose-gap: 1.25em,
+
+    $c-prose-heading-font-family: $font-family,
+    $c-prose-heading-color: $var-text,
+
+    $c-prose-h1-font-size: $font-size-h1,
+    $c-prose-h1-font-weight: $font-weight-black,
+    $c-prose-h1-line-height: 1.1,
+    $c-prose-h2-font-size: $font-size-h2,
+    $c-prose-h2-font-weight: $font-weight-black,
+    $c-prose-h2-line-height: 1.2,
+    $c-prose-h3-font-size: $font-size-h3,
+    $c-prose-h3-font-weight: $font-weight-bold,
+    $c-prose-h3-line-height: $line-height-tight,
+    $c-prose-h4-font-size: $font-size-h4,
+    $c-prose-h4-font-weight: $font-weight-bold,
+    $c-prose-h4-line-height: $line-height-tight,
+    $c-prose-h5-font-size: $font-size-h5,
+    $c-prose-h5-font-weight: $font-weight-bold,
+    $c-prose-h5-line-height: 1.4,
+    $c-prose-h6-font-size: $font-size-h6,
+    $c-prose-h6-font-weight: $font-weight-bold,
+    $c-prose-h6-line-height: 1.4,
+
+    $c-prose-link-color: $var-primary,
+    $c-prose-link-decoration: underline,
+    $c-prose-link-hover-color: $var-primary-hover,
+    $c-prose-link-hover-decoration: underline,
+
+    $c-prose-blockquote-border-width: 4px,
+    $c-prose-blockquote-border-color: $var-muted,
+    $c-prose-blockquote-color: $var-muted,
+
+    $c-prose-code-font-family: $font-family-mono,
+    $c-prose-code-font-size: 0.875em,
+    $c-prose-code-background: $var-surface,
+    $c-prose-code-color: $var-text,
+    $c-prose-code-radius: $radius,
+    $c-prose-pre-background: $var-surface,
+    $c-prose-pre-color: $var-text,
+    $c-prose-pre-radius: $radius,
+
+    $c-prose-kbd-background: $var-surface,
+    $c-prose-kbd-color: $var-text,
+    $c-prose-kbd-border-color: $var-muted,
+    $c-prose-kbd-radius: $radius,
+
+    $c-prose-hr-color: $var-muted,
+    $c-prose-img-radius: $radius,
+    $c-prose-figcaption-color: $var-muted,
+
+    $c-prose-table-border-color: $var-muted,
+    $c-prose-table-head-background: $var-surface,
+    $c-prose-table-head-font-weight: $font-weight-bold
+);