@carissa-io/theme-default 0.3.5 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "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,18 @@
     "@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",
+    "@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"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -159,12 +170,47 @@
     },
     "@carissa-io/components-progress": {
       "optional": true
+    },
+    "@carissa-io/components-tooltip": {
+      "optional": true
+    },
+    "@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
     }
   },
   "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",
@@ -172,21 +218,30 @@
     "@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-drawer": "^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-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-stepper": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-tabs": "^0.1.0",
     "@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,327 @@
     $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
+);
+
+// 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
+);