@carissa-io/theme-default 0.3.5 → 0.3.6

package/DESIGN.md

@@ -306,6 +306,19 @@ The sweep is a band of `--c-background` at 60%, 1.5s per pass; with `prefers-red
 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`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton` and `-progress`. `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

@@ -2304,3 +2304,284 @@ hr.c-divider {
     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.5",
+  "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",
@@ -64,7 +64,9 @@
     "@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-progress": "^0.1.0",
+    "@carissa-io/components-tooltip": "^0.1.0",
+    "@carissa-io/components-prose": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -159,6 +161,12 @@
     },
     "@carissa-io/components-progress": {
       "optional": true
+    },
+    "@carissa-io/components-tooltip": {
+      "optional": true
+    },
+    "@carissa-io/components-prose": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -178,6 +186,7 @@
     "@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",
@@ -187,6 +196,7 @@
     "@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

@@ -853,3 +853,87 @@
     $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
+);