@carissa-io/theme-default 0.3.5 → 0.3.7

package/DESIGN.md

@@ -306,6 +306,62 @@ 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).
+
+## Tabs
+From [components-tabs](components/components-tabs): `Tabs`, `TabList`, `Tab` and `TabPanel`. A 1px `--c-muted` line runs under the list (4.74:1 light, 7.85:1 dark) and the selected tab has a 2px `--c-primary` indicator on it (21:1 light, 19.8:1 dark, well above the 3:1 of a graphic) with
+bold `--c-text` (17.93:1 / 18.16:1). The other tabs are bold `--c-muted` (4.74:1 / 7.85:1) and turn `--c-text` on a `--c-surface` hover (16.44:1 in both modes); `--c-muted` is never used for text on `--c-surface` (4.35:1 in light), so the hover changes the text too.
+Square, 0.875rem, 1.25rem by 0.625rem of padding. The indicator is a bottom edge (horizontal) or an inline end edge (vertical). Keyboard focus is the theme's 1px `--c-focus` ring, drawn inside the tab so the scrolling list does not clip it.
+
+## Accordion
+From [components-accordion](components/components-accordion): `Accordion` and `AccordionItem`. The box and the rules between the items are 1px `--c-muted` (4.74:1 / 7.85:1); each header is a full-width bold `--c-text` button (17.93:1 / 18.16:1) with a `--c-surface` hover (16.44:1) and a chevron
+that follows the text color and turns over when the item opens. 1.25rem of inline padding, 0.875rem of block padding on the header and 1rem on the content, square. Focus is the theme's 1px `--c-focus` ring, inside the header. The chevron is CSS, not an icon.
+
+## Breadcrumb
+From [components-breadcrumb](components/components-breadcrumb): `Breadcrumb` and `BreadcrumbItem`. Links and separators are `--c-muted` (4.74:1 on the page in light, 7.85:1 in dark), links gain an underline and turn `--c-text` on hover (17.93:1 / 18.16:1), and the current page is bold `--c-text`
+and not a link. 0.875rem text. Focus is the theme's 1px `--c-focus` ring, offset 2px. The separator is generated content, so screen readers do not read it.
+
+## Pagination
+From [components-pagination](components/components-pagination): `Pagination`. The controls follow the secondary button: `--c-background` with a 1px `--c-muted` border, bold `--c-text` (17.93:1 / 18.16:1), `--c-surface-active` on hover (14.23:1 / 13.88:1),
+square, 44px minimum (the theme's touch target). The current page is filled: `--c-on-primary` on `--c-primary`, 21:1 in both modes. The ellipsis is `--c-muted` (4.74:1 / 7.85:1) and previous and next, drawn as CSS chevrons, are disabled
+at the ends (half opacity). Focus is the theme's 1px `--c-focus` ring, offset 2px.
+
+## Stepper
+From [components-stepper](components/components-stepper): `Stepper` and `Step`. The status is carried by the marker shape and the hidden status text, never by color alone: a done step is a filled `--c-primary` marker with a `--c-on-primary` check (21:1), the current one an outlined 2px
+`--c-primary` marker on `--c-background` with its number in `--c-text` (17.93:1 / 18.16:1), an upcoming one a `--c-surface-active` marker with its number in `--c-text` (14.23:1 / 13.88:1), and an error one a `--c-error` marker with a `--c-on-primary` mark
+(4.53:1 light, 7.59:1 dark) and a `--c-error` title (4.53:1 / 7.16:1). Titles are bold `--c-text`; upcoming titles and the descriptions are `--c-muted` (4.74:1 / 7.85:1). The connectors are 2px `--c-muted` lines (4.74:1 / 7.85:1, above 3:1)
+and `--c-primary` once the step is done. Clickable (completed) steps are buttons with the theme's 1px `--c-focus` ring, offset 2px.
+
+## Sidebar
+From [components-sidebar](components/components-sidebar): `Sidebar` and its parts. A `--c-surface` column (16rem, 4.5rem collapsed) with a 1px `--c-muted` edge (4.74:1 light, 7.85:1 dark). Items are bold `--c-text` (16.44:1 on the surface in both modes), 0.875rem with 0.625rem of block padding, with a `--c-surface-active`
+hover (14.23:1 light, 13.88:1 dark). The current page is filled: `--c-on-primary` on `--c-primary`, 21:1 in both modes, so it is told apart by shape and weight of fill, not by hue alone. Section titles use the label style (small, bold, uppercase, tracking) in `--c-text` and not
+`--c-muted`, which is only 4.35:1 on the surface in light. A disabled item is half opacity and not a link. The toggle is a 44px square, `--c-text` on a `--c-surface-active` hover. Square; focus is the theme's 1px `--c-focus` ring, inside the item.
+When collapsed the labels stay in the accessibility tree.
+
+## Navbar
+From [components-navbar](components/components-navbar): `Navbar` and its parts. A `--c-background` bar with a 1px `--c-muted` bottom edge. The brand is bold `--c-text` (17.93:1 light, 18.16:1 dark). Items read like the tabs: bold `--c-muted` (4.74:1 / 7.85:1), `--c-text` on a `--c-surface` hover (16.44:1),
+and `--c-text` for the current page (`aria-current="page"`). The content collapses behind a 44px toggle below 48rem (the component's Sass breakpoint, a media query, no JS). Square; focus is the theme's 1px `--c-focus` ring, inside the item.
+
+## Drawer
+From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
+(the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
+The panel slides in over `$transition-duration`; with reduced motion it just appears.
+
+## Menu
+From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`
+background (14.23:1 light, 13.88:1 dark) plus the theme's 1px `--c-focus` ring. Labels are small `--c-muted` text (4.74:1 / 7.85:1 on the panel), the separator a 1px `--c-muted` line, a disabled item is half opacity. Square. The trigger is the app's own button, so its look is not part of the theme.
+
 ## 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`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer` and `-menu`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value