@carissa-io/theme-default 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "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",
@@ -66,7 +66,24 @@
     "@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"
+    "@carissa-io/components-prose": "^0.1.0",
+    "@carissa-io/components-tabs": "^0.1.0",
+    "@carissa-io/components-accordion": "^0.1.0",
+    "@carissa-io/components-breadcrumb": "^0.1.0",
+    "@carissa-io/components-pagination": "^0.1.0",
+    "@carissa-io/components-stepper": "^0.1.0",
+    "@carissa-io/components-sidebar": "^0.1.0",
+    "@carissa-io/components-navbar": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-menu": "^0.1.0",
+    "@carissa-io/components-table": "^0.1.0",
+    "@carissa-io/components-list": "^0.1.0",
+    "@carissa-io/components-description-list": "^0.1.0",
+    "@carissa-io/components-stat": "^0.1.0",
+    "@carissa-io/components-empty-state": "^0.1.0",
+    "@carissa-io/components-timeline": "^0.1.0",
+    "@carissa-io/components-tree": "^0.1.0",
+    "@carissa-io/components-code": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -167,36 +184,104 @@
     },
     "@carissa-io/components-prose": {
       "optional": true
+    },
+    "@carissa-io/components-tabs": {
+      "optional": true
+    },
+    "@carissa-io/components-accordion": {
+      "optional": true
+    },
+    "@carissa-io/components-breadcrumb": {
+      "optional": true
+    },
+    "@carissa-io/components-pagination": {
+      "optional": true
+    },
+    "@carissa-io/components-stepper": {
+      "optional": true
+    },
+    "@carissa-io/components-sidebar": {
+      "optional": true
+    },
+    "@carissa-io/components-navbar": {
+      "optional": true
+    },
+    "@carissa-io/components-drawer": {
+      "optional": true
+    },
+    "@carissa-io/components-menu": {
+      "optional": true
+    },
+    "@carissa-io/components-table": {
+      "optional": true
+    },
+    "@carissa-io/components-list": {
+      "optional": true
+    },
+    "@carissa-io/components-description-list": {
+      "optional": true
+    },
+    "@carissa-io/components-stat": {
+      "optional": true
+    },
+    "@carissa-io/components-empty-state": {
+      "optional": true
+    },
+    "@carissa-io/components-timeline": {
+      "optional": true
+    },
+    "@carissa-io/components-tree": {
+      "optional": true
+    },
+    "@carissa-io/components-code": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@carissa-io/components-accordion": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-avatar": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
+    "@carissa-io/components-breadcrumb": "^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-code": "^0.1.0",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-link": "^0.1.0",
+    "@carissa-io/components-list": "^0.1.0",
     "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-navbar": "^0.1.0",
+    "@carissa-io/components-pagination": "^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-sidebar": "^0.1.0",
     "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",
     "@carissa-io/components-spinner": "^0.1.0",
+    "@carissa-io/components-stat": "^0.1.0",
+    "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-table": "^0.1.0",
+    "@carissa-io/components-tabs": "^0.1.0",
     "@carissa-io/components-tag": "^0.1.0",
+    "@carissa-io/components-timeline": "^0.1.0",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-tooltip": "^0.1.0",
+    "@carissa-io/components-tree": "^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

@@ -937,3 +937,455 @@
     $c-prose-table-head-background: $var-surface,
     $c-prose-table-head-font-weight: $font-weight-bold
 );
+
+// Tabs: a --c-muted underline under the list and a 2px --c-primary indicator under the selected tab. Tabs read --c-muted
+// (4.7:1 on the background, 7.9:1 in dark), turn --c-text on a --c-surface hover and the selected one is --c-text and bold.
+// Square, bold, the theme's 1px focus ring inside the tab. No other block forwards it.
+@use '@carissa-io/components-tabs/scss' as tabs with (
+    $c-tabs-list-border-width: 1px,
+    $c-tabs-list-border-color: $var-muted,
+    $c-tabs-tab-padding-x: 1.25rem,
+    $c-tabs-tab-padding-y: 0.625rem,
+    $c-tabs-tab-font-size: $font-size-small,
+    $c-tabs-tab-font-weight: $font-weight-bold,
+    $c-tabs-tab-radius: $radius,
+    $c-tabs-tab-color: $var-muted,
+    $c-tabs-tab-color-hover: $var-text,
+    $c-tabs-tab-background-hover: $var-surface,
+    $c-tabs-tab-color-selected: $var-text,
+    $c-tabs-tab-background-selected: transparent,
+    $c-tabs-indicator-width: 2px,
+    $c-tabs-indicator-color: $var-primary,
+    $c-tabs-focus-outline: $focus-width solid $var-focus,
+    $c-tabs-focus-outline-offset: -2px,
+    $c-tabs-panel-padding-y: 1.25rem,
+    $c-tabs-transition-duration: $transition-duration
+);
+
+// Accordion: the box and the rules between items are --c-muted (the card and field edge), headers are bold --c-text with a
+// --c-surface hover, and the chevron follows the header text. Square, the theme's 1px focus ring inside the header.
+@use '@carissa-io/components-accordion/scss' as accordion with (
+    $c-accordion-border-width: 1px,
+    $c-accordion-border-color: $var-muted,
+    $c-accordion-radius: $radius,
+    $c-accordion-header-padding-x: 1.25rem,
+    $c-accordion-header-padding-y: 0.875rem,
+    $c-accordion-header-font-size: $font-size-body,
+    $c-accordion-header-font-weight: $font-weight-bold,
+    $c-accordion-header-color: $var-text,
+    $c-accordion-header-background: transparent,
+    $c-accordion-header-background-hover: $var-surface,
+    $c-accordion-header-color-open: $var-text,
+    $c-accordion-header-background-open: transparent,
+    $c-accordion-chevron-color: currentColor,
+    $c-accordion-content-padding-x: 1.25rem,
+    $c-accordion-content-padding-y: 1rem,
+    $c-accordion-focus-outline: $focus-width solid $var-focus,
+    $c-accordion-focus-outline-offset: -2px,
+    $c-accordion-transition-duration: $transition-duration
+);
+
+// Breadcrumb: links and separators in --c-muted (4.7:1 on the background), the current page in --c-text and bold. Links turn
+// --c-text and underline on hover. The theme's 1px focus ring, offset 2px.
+@use '@carissa-io/components-breadcrumb/scss' as breadcrumb with (
+    $c-breadcrumb-font-size: $font-size-small,
+    $c-breadcrumb-link-color: $var-muted,
+    $c-breadcrumb-link-color-hover: $var-text,
+    $c-breadcrumb-link-decoration: none,
+    $c-breadcrumb-link-decoration-hover: underline,
+    $c-breadcrumb-current-color: $var-text,
+    $c-breadcrumb-current-font-weight: $font-weight-bold,
+    $c-breadcrumb-separator-color: $var-muted,
+    $c-breadcrumb-focus-outline: $focus-width solid $var-focus,
+    $c-breadcrumb-focus-outline-offset: 2px,
+    $c-breadcrumb-focus-radius: $radius
+);
+
+// Pagination: neutral controls like the secondary button (--c-background with a --c-muted border, --c-surface-active on hover,
+// 44px touch target), the current page filled --c-primary with --c-on-primary (21:1). Square, bold, the ellipsis in --c-muted.
+// The theme's 1px focus ring, offset 2px.
+@use '@carissa-io/components-pagination/scss' as pagination with (
+    $c-pagination-gap: 0.25rem,
+    $c-pagination-font-size: $font-size-small,
+    $c-pagination-control-size: $min-height,
+    $c-pagination-control-padding-x: 0.75rem,
+    $c-pagination-control-radius: $radius,
+    $c-pagination-control-color: $var-text,
+    $c-pagination-control-background: $var-background,
+    $c-pagination-control-border-width: 1px,
+    $c-pagination-control-border-color: $var-muted,
+    $c-pagination-control-color-hover: $var-primary,
+    $c-pagination-control-background-hover: $var-surface-active,
+    $c-pagination-current-color: $var-on-primary,
+    $c-pagination-current-background: $var-primary,
+    $c-pagination-current-border-color: $var-primary,
+    $c-pagination-ellipsis-color: $var-muted,
+    $c-pagination-focus-outline: $focus-width solid $var-focus,
+    $c-pagination-focus-outline-offset: 2px,
+    $c-pagination-transition-duration: $transition-duration
+);
+
+// Stepper: a done step is a filled --c-primary marker with --c-on-primary (the check), the current one an outlined
+// --c-primary marker on the background, an upcoming one a --c-surface-active marker with --c-text (14:1). An error step is a
+// --c-error marker with --c-on-primary (4.5:1 in light, 7.6:1 in dark) and a --c-error title. Upcoming titles and descriptions
+// are --c-muted. Connectors are --c-muted lines, --c-primary once the step is done. The theme's 1px focus ring, offset 2px.
+@use '@carissa-io/components-stepper/scss' as stepper with (
+    $c-stepper-font-size: $font-size-small,
+    $c-stepper-marker-size: 2rem,
+    $c-stepper-marker-font-size: $font-size-small,
+    $c-stepper-marker-border-width: 2px,
+    $c-stepper-marker-color: $var-text,
+    $c-stepper-marker-background: $var-surface-active,
+    $c-stepper-marker-border-color: $var-surface-active,
+    $c-stepper-marker-current-color: $var-text,
+    $c-stepper-marker-current-background: $var-background,
+    $c-stepper-marker-current-border-color: $var-primary,
+    $c-stepper-marker-complete-color: $var-on-primary,
+    $c-stepper-marker-complete-background: $var-primary,
+    $c-stepper-marker-complete-border-color: $var-primary,
+    $c-stepper-marker-error-color: $var-on-primary,
+    $c-stepper-marker-error-background: $var-error,
+    $c-stepper-marker-error-border-color: $var-error,
+    $c-stepper-title-font-weight: $font-weight-bold,
+    $c-stepper-title-color: $var-text,
+    $c-stepper-title-color-upcoming: $var-muted,
+    $c-stepper-title-color-error: $var-error,
+    $c-stepper-description-color: $var-muted,
+    $c-stepper-connector-width: 2px,
+    $c-stepper-connector-color: $var-muted,
+    $c-stepper-connector-color-complete: $var-primary,
+    $c-stepper-control-radius: $radius,
+    $c-stepper-focus-outline: $focus-width solid $var-focus,
+    $c-stepper-focus-outline-offset: 2px,
+    $c-stepper-transition-duration: $transition-duration
+);
+
+// Sidebar: a --c-surface column with a 1px --c-muted edge. Items are --c-text (16.4:1 on the surface) with a --c-surface-active
+// hover (14.2:1); the current page is filled --c-primary with --c-on-primary (21:1), a shape and not only a hue. Section titles
+// are the small uppercase label style in --c-text, because --c-muted on --c-surface is only 4.35:1 in light. Square, the
+// theme's 1px focus ring inside the item. No other block forwards it.
+@use '@carissa-io/components-sidebar/scss' as sidebar with (
+    $c-sidebar-width: 16rem,
+    $c-sidebar-width-collapsed: 4.5rem,
+    $c-sidebar-padding: 0.75rem,
+    $c-sidebar-gap: 1.5rem,
+    $c-sidebar-background: $var-surface,
+    $c-sidebar-color: $var-text,
+    $c-sidebar-border-width: 1px,
+    $c-sidebar-border-color: $var-muted,
+    $c-sidebar-section-title-color: $var-text,
+    $c-sidebar-section-title-font-size: $label-font-size,
+    $c-sidebar-section-title-font-weight: $label-font-weight,
+    $c-sidebar-section-title-letter-spacing: $label-letter-spacing,
+    $c-sidebar-section-title-transform: uppercase,
+    $c-sidebar-item-gap: 0.75rem,
+    $c-sidebar-item-padding-x: 0.75rem,
+    $c-sidebar-item-padding-y: 0.625rem,
+    $c-sidebar-item-font-size: $font-size-small,
+    $c-sidebar-item-font-weight: $font-weight-bold,
+    $c-sidebar-item-radius: $radius,
+    $c-sidebar-item-color: $var-text,
+    $c-sidebar-item-color-hover: $var-text,
+    $c-sidebar-item-background-hover: $var-surface-active,
+    $c-sidebar-item-color-active: $var-on-primary,
+    $c-sidebar-item-background-active: $var-primary,
+    $c-sidebar-toggle-size: $min-height,
+    $c-sidebar-toggle-radius: $radius,
+    $c-sidebar-toggle-color: $var-text,
+    $c-sidebar-toggle-background-hover: $var-surface-active,
+    $c-sidebar-focus-outline: $focus-width solid $var-focus,
+    $c-sidebar-focus-outline-offset: -2px,
+    $c-sidebar-transition-duration: $transition-duration
+);
+
+// Navbar: a --c-background bar with a 1px --c-muted bottom edge. Items read like the tabs: bold --c-muted (4.7:1 on the
+// background), --c-text on a --c-surface hover, and --c-text for the current page. The breakpoint is the Sass default (48rem).
+// Square, 44px toggle, the theme's 1px focus ring inside the item. No other block forwards it.
+@use '@carissa-io/components-navbar/scss' as navbar with (
+    $c-navbar-padding-x: 1.25rem,
+    $c-navbar-padding-y: 0.5rem,
+    $c-navbar-gap: 1.5rem,
+    $c-navbar-background: $var-background,
+    $c-navbar-color: $var-text,
+    $c-navbar-border-width: 1px,
+    $c-navbar-border-color: $var-muted,
+    $c-navbar-brand-font-size: $font-size-body,
+    $c-navbar-brand-font-weight: $font-weight-bold,
+    $c-navbar-brand-color: $var-text,
+    $c-navbar-item-padding-x: 0.75rem,
+    $c-navbar-item-padding-y: 0.625rem,
+    $c-navbar-item-font-size: $font-size-small,
+    $c-navbar-item-font-weight: $font-weight-bold,
+    $c-navbar-item-radius: $radius,
+    $c-navbar-item-color: $var-muted,
+    $c-navbar-item-color-hover: $var-text,
+    $c-navbar-item-background-hover: $var-surface,
+    $c-navbar-item-color-active: $var-text,
+    $c-navbar-item-background-active: transparent,
+    $c-navbar-toggle-size: $min-height,
+    $c-navbar-toggle-radius: $radius,
+    $c-navbar-toggle-color: $var-text,
+    $c-navbar-toggle-background-hover: $var-surface-active,
+    $c-navbar-focus-outline: $focus-width solid $var-focus,
+    $c-navbar-focus-outline-offset: -2px
+);
+
+// Drawer: the Modal's box as a panel on the edge: --c-background with --c-text, a 1px --c-muted border (the edge that still
+// reads in dark), the same padding and the same close button. The backdrop is the one literal color, black at 50% in both
+// modes, and so is the shadow. Its index forwards the typography styles, already loaded and configured above: this block
+// goes after the Typography one.
+@use '@carissa-io/components-drawer/scss' as drawer with (
+    $c-drawer-background: $var-background,
+    $c-drawer-color: $var-text,
+    $c-drawer-border-width: 1px,
+    $c-drawer-border-color: $var-muted,
+    $c-drawer-radius: $radius,
+    $c-drawer-shadow: (0 4px 8px rgb(0 0 0 / 0.08), 0 16px 48px rgb(0 0 0 / 0.2)),
+    $c-drawer-padding-x: 1.5rem,
+    $c-drawer-padding-y: 1.25rem,
+    $c-drawer-gap: 1rem,
+    $c-drawer-size-sm: 20rem,
+    $c-drawer-size-md: 28rem,
+    $c-drawer-size-lg: 40rem,
+    $c-drawer-close-size: 1.25rem,
+    $c-drawer-close-color: $var-muted,
+    $c-drawer-close-color-hover: $var-text,
+    $c-drawer-backdrop-color: rgb(0 0 0 / 0.5),
+    $c-drawer-transition-duration: $transition-duration
+);
+
+// Menu: the panel is the Popover's (--c-background, 1px --c-muted border, flat). Items are --c-text with a --c-surface-active
+// hover and keyboard focus (14.2:1) and the theme's 1px focus ring; labels are small --c-muted text (4.7:1 on the panel) and
+// the separator a 1px --c-muted line. Square. Its index forwards the popover styles, already loaded and configured above:
+// this block goes after the Popover one.
+@use '@carissa-io/components-menu/scss' as menu with (
+    $c-menu-min-width: 12rem,
+    $c-menu-padding: 0.25rem,
+    $c-menu-radius: $radius,
+    $c-menu-item-padding-x: 0.75rem,
+    $c-menu-item-padding-y: 0.625rem,
+    $c-menu-item-gap: 0.75rem,
+    $c-menu-item-color: $var-text,
+    $c-menu-item-background: transparent,
+    $c-menu-item-color-hover: $var-text,
+    $c-menu-item-background-hover: $var-surface-active,
+    $c-menu-item-focus-outline: $focus-width solid $var-focus,
+    $c-menu-label-color: $var-muted,
+    $c-menu-label-font-size: $font-size-small,
+    $c-menu-label-padding-x: 0.75rem,
+    $c-menu-label-padding-y: 0.5rem,
+    $c-menu-separator-color: $var-muted,
+    $c-menu-separator-margin: 0.25rem
+);
+
+// Table: a --c-surface header (--c-text, bold) over rows divided by 1px --c-muted lines. Row hover is --c-surface-active, so it
+// still shows on a striped (--c-surface) row; the selected row is a 12% tint of --c-primary over the background, a mix of two
+// custom properties that follows the mode (text is 13:1 on it in both). The sticky header must be opaque so rows do not show
+// through: it is --c-surface, a custom property, so dark works. Square, the theme's 1px focus ring inside the cell.
+@use '@carissa-io/components-table/scss' as table with (
+    $c-table-font-size: $font-size-small,
+    $c-table-cell-padding-x: 1rem,
+    $c-table-cell-padding-y: 0.75rem,
+    $c-table-dense-cell-padding-x: 0.75rem,
+    $c-table-dense-cell-padding-y: 0.375rem,
+    $c-table-border-width: 1px,
+    $c-table-border-color: $var-muted,
+    $c-table-header-color: $var-text,
+    $c-table-header-background: $var-surface,
+    $c-table-header-font-weight: $font-weight-bold,
+    $c-table-sticky-header-background: $var-surface,
+    $c-table-row-background-hover: $var-surface-active,
+    $c-table-row-background-striped: $var-surface,
+    $c-table-row-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-table-foot-font-weight: $font-weight-bold,
+    $c-table-caption-color: $var-muted,
+    $c-table-focus-outline: $focus-width solid $var-focus,
+    $c-table-focus-outline-offset: -2px
+);
+
+// List: rows on the page background, divided by 1px --c-muted lines. The secondary text is --c-text at the small size, not
+// --c-muted, because the row sits on --c-surface-active when hovered and --c-muted is only 3.8:1 there (4.35:1 on --c-surface).
+// Hover is --c-surface-active; the current item is the same 12% --c-primary tint as a selected table row. Square, the theme's
+// 1px focus ring inside the row.
+@use '@carissa-io/components-list/scss' as list with (
+    $c-list-item-padding-x: 1rem,
+    $c-list-item-padding-y: 0.75rem,
+    $c-list-item-padding-y-sm: 0.5rem,
+    $c-list-item-padding-y-lg: 1rem,
+    $c-list-item-gap: 1rem,
+    $c-list-font-size: $font-size-body,
+    $c-list-font-size-sm: $font-size-small,
+    $c-list-font-size-lg: $font-size-h4,
+    $c-list-description-color: $var-text,
+    $c-list-description-font-size: $font-size-small,
+    $c-list-border-width: 1px,
+    $c-list-border-color: $var-muted,
+    $c-list-radius: $radius,
+    $c-list-item-background-hover: $var-surface-active,
+    $c-list-item-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-list-item-color-selected: $var-text,
+    $c-list-focus-outline: $focus-width solid $var-focus,
+    $c-list-focus-outline-offset: -2px,
+    $c-list-transition-duration: $transition-duration
+);
+
+// Description list: the term is a small bold --c-muted label (4.7:1 on the background, so use it on --c-background, where
+// --c-muted is not enough on --c-surface) and the detail is --c-text. No fills or borders.
+@use '@carissa-io/components-description-list/scss' as description-list with (
+    $c-description-list-gap-x: 2rem,
+    $c-description-list-gap-y: 1rem,
+    $c-description-list-term-gap: 0.25rem,
+    $c-description-list-term-width: 12rem,
+    $c-description-list-font-size: $font-size-body,
+    $c-description-list-term-color: $var-muted,
+    $c-description-list-term-font-size: $font-size-small,
+    $c-description-list-term-font-weight: $font-weight-bold,
+    $c-description-list-detail-color: $var-text
+);
+
+// Stat: a card-like block on the page background with a 1px --c-muted border (the Card's outlined look), not on --c-surface:
+// the delta colors are checked against --c-background, where --c-success is 5:1 and --c-error 4.5:1 in light (4.15:1 for
+// --c-error on --c-surface). The label and the description are --c-muted (4.7:1), the value is --c-text. The delta is
+// success when up, error when down and muted when flat; the arrow and the screen-reader text say the same, so color is never
+// the only signal. In dark the status colors are lighter (7.1:1 and above on the background).
+@use '@carissa-io/components-stat/scss' as stat with (
+    $c-stat-padding: 1.25rem 1.5rem,
+    $c-stat-gap: 1rem,
+    $c-stat-content-gap: 0.25rem,
+    $c-stat-radius: $radius,
+    $c-stat-background: $var-background,
+    $c-stat-border: 1px solid $var-muted,
+    $c-stat-label-color: $var-muted,
+    $c-stat-label-font-size: $font-size-small,
+    $c-stat-label-font-weight: $font-weight-bold,
+    $c-stat-value-color: $var-text,
+    $c-stat-value-font-size: $font-size-h1,
+    $c-stat-value-font-weight: $font-weight-bold,
+    $c-stat-description-color: $var-muted,
+    $c-stat-description-font-size: $font-size-small,
+    $c-stat-icon-color: $var-text,
+    $c-stat-delta-font-size: $font-size-small,
+    $c-stat-delta-font-weight: $font-weight-bold,
+    $c-stat-delta-up-color: $var-success,
+    $c-stat-delta-down-color: $var-error,
+    $c-stat-delta-flat-color: $var-muted
+);
+
+// Empty state: a centred block on the page background. The icon is --c-muted (4.7:1 light, 7.9:1 dark, above the 3:1 non-text
+// minimum), the title --c-text at the h3 size and bold, the description --c-muted (4.7:1 on the background, so keep it off
+// --c-surface, where light is 4.35:1). The actions are the app's buttons. Square, nothing else to set.
+@use '@carissa-io/components-empty-state/scss' as empty-state with (
+    $c-empty-state-padding: 3rem 1.5rem,
+    $c-empty-state-padding-sm: 1.5rem 1rem,
+    $c-empty-state-padding-lg: 4.5rem 2rem,
+    $c-empty-state-gap: 1rem,
+    $c-empty-state-icon-size: 3rem,
+    $c-empty-state-icon-size-sm: 2rem,
+    $c-empty-state-icon-size-lg: 4rem,
+    $c-empty-state-icon-color: $var-muted,
+    $c-empty-state-title-color: $var-text,
+    $c-empty-state-title-font-size: $font-size-h3,
+    $c-empty-state-title-font-size-sm: $font-size-h4,
+    $c-empty-state-title-font-size-lg: $font-size-h2,
+    $c-empty-state-title-font-weight: $font-weight-bold,
+    $c-empty-state-description-color: $var-muted,
+    $c-empty-state-description-font-size: $font-size-body,
+    $c-empty-state-description-font-size-sm: $font-size-small,
+    $c-empty-state-description-font-size-lg: $font-size-body,
+    $c-empty-state-actions-gap: 0.75rem
+);
+
+// Timeline: a --c-muted connector and a small dot per event. A default dot is a --c-surface-active fill with a --c-muted ring;
+// success, warning, error and info are solid dots in their status color (4.5:1 or more against the background in light, 7:1 in
+// dark, above the 3:1 non-text minimum); the current step is a hollow --c-primary ring. An icon marker keeps a --c-background
+// fill and takes the status as its ring, so the --c-text icon is 17.9:1 / 18.2:1 in every status. The status text is the
+// hidden status_label, the time is --c-muted (4.7:1 / 7.9:1 on the background) and the title --c-text, bold. Color is never the
+// only signal.
+@use '@carissa-io/components-timeline/scss' as timeline with (
+    $c-timeline-gap: 1.5rem,
+    $c-timeline-content-gap: 1rem,
+    $c-timeline-content-spacing: 0.25rem,
+    $c-timeline-horizontal-item-width: 14rem,
+    $c-timeline-marker-size: 0.75rem,
+    $c-timeline-marker-icon-size: 1.5rem,
+    $c-timeline-marker-border-width: 2px,
+    $c-timeline-marker-color: $var-text,
+    $c-timeline-marker-icon-background: $var-background,
+    $c-timeline-marker-default: $var-surface-active,
+    $c-timeline-marker-default-border: $var-muted,
+    $c-timeline-marker-success: $var-success,
+    $c-timeline-marker-warning: $var-warning,
+    $c-timeline-marker-error: $var-error,
+    $c-timeline-marker-info: $var-info,
+    $c-timeline-marker-current: $var-primary,
+    $c-timeline-connector-width: 1px,
+    $c-timeline-connector-color: $var-muted,
+    $c-timeline-title-font-weight: $font-weight-bold,
+    $c-timeline-title-color: $var-text,
+    $c-timeline-time-color: $var-muted,
+    $c-timeline-time-font-size: $font-size-small,
+    $c-timeline-description-color: $var-text,
+    $c-timeline-description-font-size: $font-size-small
+);
+
+// Tree: rows on the page background. Hover is --c-surface-active (--c-text 14.2:1 / 13.9:1); the selected row is the same 12%
+// --c-primary tint over the background as a selected table row, with --c-text (13.6:1 / 13.7:1). The chevron is the component's
+// CSS border chevron in --c-muted (3.8:1 on the hover and 3.6:1 on the selected tint in light, 5.9:1 and above in dark: above
+// the 3:1 non-text minimum). Square, the theme's 1px focus ring inside the row.
+@use '@carissa-io/components-tree/scss' as tree with (
+    $c-tree-font-size: $font-size-body,
+    $c-tree-row-padding-x: 0.75rem,
+    $c-tree-row-padding-y: 0.5rem,
+    $c-tree-row-gap: 0.5rem,
+    $c-tree-row-radius: $radius,
+    $c-tree-indent: 1.5rem,
+    $c-tree-toggle-size: 1rem,
+    $c-tree-toggle-chevron-size: 0.4375rem,
+    $c-tree-toggle-chevron-width: 2px,
+    $c-tree-toggle-color: $var-muted,
+    $c-tree-row-background-hover: $var-surface-active,
+    $c-tree-row-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-tree-row-color-selected: $var-text,
+    $c-tree-item-disabled-opacity: 0.5,
+    $c-tree-focus-outline: $focus-width solid $var-focus,
+    $c-tree-focus-outline-offset: -2px,
+    $c-tree-transition-duration: $transition-duration
+);
+
+// Code: the monospace stack of the tokens. Inline code is --c-text on --c-surface (16.4:1 in both modes), square. A kbd is a
+// --c-background key with a 1px --c-muted border and a --c-muted bottom edge, text --c-text (17.9:1 / 18.2:1). The block is
+// --c-surface with a 1px --c-muted border and --c-text (16.4:1); highlighted children are the app's to keep AA on that
+// background. The copy button reads like the secondary button (--c-background with a --c-muted border, --c-surface-active on
+// hover) and the theme's 1px focus ring.
+@use '@carissa-io/components-code/scss' as code with (
+    $c-code-font-family: $font-family-mono,
+    $c-code-font-size: 0.875em,
+    $c-code-padding: 0.125em 0.375em,
+    $c-code-radius: $radius,
+    $c-code-background: $var-surface,
+    $c-code-color: $var-text,
+    $c-kbd-font-size: 0.8125em,
+    $c-kbd-padding: 0.125em 0.5em,
+    $c-kbd-radius: $radius,
+    $c-kbd-background: $var-background,
+    $c-kbd-color: $var-text,
+    $c-kbd-border: 1px solid $var-muted,
+    $c-kbd-shadow: 0 1px 0 $var-muted,
+    $c-code-block-font-size: $font-size-small,
+    $c-code-block-line-height: $line-height-normal,
+    $c-code-block-padding: 1rem,
+    $c-code-block-radius: $radius,
+    $c-code-block-background: $var-surface,
+    $c-code-block-color: $var-text,
+    $c-code-block-border: 1px solid $var-muted,
+    $c-code-copy-offset: 0.5rem,
+    $c-code-copy-padding: 0.375rem 0.75rem,
+    $c-code-copy-font-size: $font-size-small,
+    $c-code-copy-radius: $radius,
+    $c-code-copy-background: $var-background,
+    $c-code-copy-color: $var-text,
+    $c-code-copy-border: 1px solid $var-muted,
+    $c-code-copy-background-hover: $var-surface-active,
+    $c-code-focus-outline: $focus-width solid $var-focus,
+    $c-code-focus-outline-offset: -2px
+);