@carissa-io/theme-default 0.3.10 → 0.3.12

package/DESIGN.md

@@ -126,10 +126,11 @@ From [components-checkbox](components/components-checkbox): the whole row (box a
 least 44px tall. The label is body text (1rem, `#171717`), not the uppercase field-label style.
 - **Box:** 20px square, square corners, 1px `#666666` border; the border turns black on hover.
 - **Checked:** black background with a white Lucide `check` mark.
+- **Indeterminate (mixed):** the checked box (`--c-primary` fill and border) with a 10px by 2px square dash in `--c-on-primary` instead of the check, drawn with CSS, so it follows the mode: 21.00:1 in both modes for the dash on the box (above the 4.5:1 text figure), and the box border on the background is 21.00:1 light, 19.80:1 dark (3:1 minimum). It sits after "checked" and before invalid, disabled and focus, so an invalid box keeps its red border, a disabled one turns `--c-disabled-text` on `--c-surface` (the dash follows, exempt from contrast) and the keyboard focus is the filled-box ring below (1px `--c-focus`, offset 2px). Hover only changes the border, which is already `--c-primary`. A test asserts the dash contrast in both modes.
 - **Disabled:** `#a3a3a3` label and mark on a `#f5f5f5` box with a `#d4d4d4` border; no hover.
 - **Error:** `#dc3545`, 13px, under the row; the box border turns red too. The built-in error shows after the first
   interaction, an error passed by the parent shows at once.
-- **Focus:** keyboard focus (`:focus-visible`): an empty box thickens its border to 2px; a checked (black) box draws a 1px
+- **Focus:** keyboard focus (`:focus-visible`): an empty box thickens its border to 2px; a checked or indeterminate (black) box draws a 1px
   black ring offset by 2px.
 
 ## Switch
@@ -418,11 +419,20 @@ From [components-color-picker](components/components-color-picker): `ColorPicker
 ## Async autocomplete
 From [components-async-autocomplete](components/components-async-autocomplete): `AsyncAutocomplete`. The field, the panel and the options are the Combobox's (reused figures, no new contrast). While a request is pending the field shows a 16px spinner at the arrow's place: a 2px `--c-primary` arc (21:1 / 19.8:1) over a `--c-surface-active` track, slowed down under `prefers-reduced-motion`. The states are written in the panel: `loading` and `empty` in `--c-muted` (5.74:1 / 7.85:1, the Listbox's empty message color) and `error` in `--c-error` (4.53:1 / 7.16:1 on the background, which is the panel's); the state is also exposed as `aria-busy` and `data-state`, so colour is never the only signal. Open takes the `--c-focus` border.
 
+## Section and container
+From [components-section](components/components-section): `Container` and `Section`. Layout only: gutters of 1rem growing to 2rem at 40rem, container widths of 40, 48, 64 and 80rem, and vertical rhythms of 2, 4 and 6rem. The section title is `--c-text` in the h2 style (17.93:1 / 18.16:1 on the background) and the lead paragraph is `--c-muted` at the lead size (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on `--c-surface`), so both pass AA on either ground. A section with a title is a landmark named by it.
+
+## Faq
+From [components-faq](components/components-faq): `Faq`. It is the Accordion (the box, the `--c-muted` rules, the `--c-surface` header hover and the 1px `--c-focus` ring documented in the Accordion section), so no new figure for the questions. The answers are `--c-text` (17.93:1 / 18.16:1) at a 1.6 line height and the list is capped at 48rem. The block must stay after the accordion block, because the FAQ stylesheet forwards the accordion's.
+
+## Carousel
+From [components-carousel](components/components-carousel): `Carousel`. The arrows and the pause / play button are the secondary button's: square, 2.75rem, a 1px `--c-muted` border (5.74:1 / 7.85:1 on the background), a `--c-surface-active` hover and a `--c-text` glyph (17.93:1 / 18.16:1; 14.23:1 / 13.88:1 on the hover). The glyphs (corner, bars, triangle) are drawn with borders in `currentColor`, so they follow the mode and need no new colour. Disabled arrows are at half opacity (exempt). The dots are 0.625rem circles in `--c-muted` (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on `--c-surface`, above the 3:1 minimum for graphics) and the current one is `--c-primary` (21:1 / 19.8:1) and 1.5rem long. Colour is not the only cue: the current dot is a bar against circles, and it also carries `aria-current`; the lightness gap between the two colours is 3.66:1 in light and 2.52:1 in dark (below 3:1 there, which the shape makes up for). The keyboard ring is the theme's 1px `--c-focus` outline offset by 2px (21:1 / 19.8:1). Transitions run at 0.2s and stop under `prefers-reduced-motion`.
+
 ## 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
 (black) control draws a separate 1px black ring offset by 2px**, because a thicker border would be invisible on a black fill
-(primary button, checked checkbox, on switch, slider thumb). Calendar days and the upload remove button use an inset 1px ring.
+(primary button, checked or indeterminate checkbox, on switch, slider thumb). Calendar days and the upload remove button use an inset 1px ring.
 
 ## Guidelines
 - **Accessibility:** 4.5:1 contrast for body text; interactive elements are at least 44px tall.

package/README.md

@@ -142,9 +142,11 @@ 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`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker` and `-async-autocomplete`. `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`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq` and `-carousel`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
+The checkbox's mixed state (`indeterminate`, from the next `components-checkbox` release, class `c-checkbox--indeterminate`) is the checked box with a 10px dash in `--c-on-primary`; on an older checkbox the rule is simply unused.
+
 ## Change a value
 The palette and the values shared by every component (fonts, radius, minimum height, focus ring, transition, label style, dropdown
 arrow) are the Sass variables of `scss/_tokens.scss` (the [tokens](#tokens)); each component has one `@use ... with (...)` block of overrides

package/dist/index.css

@@ -364,6 +364,8 @@
 }
 .c-checkbox__mark {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 1rem;
   height: 1rem;
   opacity: 0;
@@ -373,6 +375,13 @@
   width: 100%;
   height: 100%;
 }
+.c-checkbox__dash {
+  display: block;
+  width: 0.625rem;
+  height: 2px;
+  background: currentcolor;
+  border-radius: 0;
+}
 .c-checkbox__label {
   min-width: 0;
 }
@@ -391,6 +400,14 @@
 .c-checkbox__control:checked + .c-checkbox__box .c-checkbox__mark {
   opacity: 1;
 }
+.c-checkbox--indeterminate .c-checkbox__control + .c-checkbox__box {
+  color: var(--c-on-primary);
+  background: var(--c-primary);
+  border-color: var(--c-primary);
+}
+.c-checkbox--indeterminate .c-checkbox__control + .c-checkbox__box .c-checkbox__mark {
+  opacity: 1;
+}
 .c-checkbox--invalid .c-checkbox__control + .c-checkbox__box {
   border-color: var(--c-error);
 }
@@ -409,7 +426,7 @@
   border-color: var(--c-focus);
   box-shadow: inset 0 0 0 1px var(--c-focus);
 }
-.c-checkbox__control:checked:focus-visible + .c-checkbox__box {
+.c-checkbox__control:checked:focus-visible + .c-checkbox__box, .c-checkbox--indeterminate .c-checkbox__control:focus-visible + .c-checkbox__box {
   outline: 1px solid var(--c-focus);
   outline-offset: 2px;
   box-shadow: none;
@@ -4407,6 +4424,10 @@ ol.c-list {
   outline-offset: -2px;
 }
 
+.c-code-block--has-copy .c-code-block__pre {
+  padding-top: 2.5rem;
+}
+
 .c-code-block__code {
   font-size: inherit;
 }
@@ -5042,3 +5063,222 @@ ol.c-list {
     animation-duration: 2s;
   }
 }
+.c-container {
+  box-sizing: border-box;
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: 1rem;
+}
+@media (min-width: 40rem) {
+  .c-container {
+    padding-inline: 2rem;
+  }
+}
+
+.c-container--sm {
+  max-width: 40rem;
+}
+
+.c-container--md {
+  max-width: 48rem;
+}
+
+.c-container--lg {
+  max-width: 64rem;
+}
+
+.c-container--xl {
+  max-width: 80rem;
+}
+
+.c-container--full {
+  max-width: none;
+}
+
+.c-section {
+  box-sizing: border-box;
+}
+
+.c-section--sm {
+  padding-block: 2rem;
+}
+
+.c-section--md {
+  padding-block: 4rem;
+}
+
+.c-section--lg {
+  padding-block: 6rem;
+}
+
+.c-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 40rem;
+  margin-bottom: 2rem;
+}
+
+.c-section__title {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 900;
+  line-height: 1.2;
+  color: var(--c-text);
+}
+
+.c-section__description {
+  margin: 0;
+  font-size: 1.25rem;
+  line-height: 1.6;
+  color: var(--c-muted);
+}
+
+.c-faq {
+  max-width: 48rem;
+}
+
+.c-faq .c-accordion__content {
+  line-height: 1.6;
+  color: var(--c-text);
+}
+
+.c-carousel {
+  box-sizing: border-box;
+}
+
+.c-carousel__viewport {
+  overflow: hidden;
+}
+
+.c-carousel__track {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  touch-action: pan-x pan-y pinch-zoom;
+}
+.c-carousel__track::-webkit-scrollbar {
+  display: none;
+}
+
+.c-carousel__slide {
+  box-sizing: border-box;
+  flex: 0 0 calc((100% - 1rem * (var(--c-carousel-per-view, 1) - 1)) / var(--c-carousel-per-view, 1));
+  min-width: 0;
+  scroll-snap-align: start;
+}
+
+.c-carousel__controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.c-carousel__arrow,
+.c-carousel__toggle {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  color: var(--c-text);
+  cursor: pointer;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  transition: background-color 0.2s ease-out;
+}
+.c-carousel__arrow:hover:not(:disabled),
+.c-carousel__toggle:hover:not(:disabled) {
+  background: var(--c-surface-active);
+}
+.c-carousel__arrow:focus-visible,
+.c-carousel__toggle:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+.c-carousel__arrow:disabled,
+.c-carousel__toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.c-carousel__arrow::before,
+.c-carousel__toggle::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  content: "";
+}
+
+.c-carousel__arrow::before {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-top: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+}
+
+.c-carousel__arrow--next::before {
+  transform: translate(-65%, -50%) rotate(45deg);
+}
+
+.c-carousel__arrow--prev::before {
+  transform: translate(-35%, -50%) rotate(-135deg);
+}
+
+.c-carousel__toggle--playing::before {
+  width: 0.5rem;
+  height: 0.75rem;
+  border-right: 3px solid currentColor;
+  border-left: 3px solid currentColor;
+  transform: translate(-50%, -50%);
+}
+
+.c-carousel__toggle--paused::before {
+  border-top: 0.375rem solid transparent;
+  border-bottom: 0.375rem solid transparent;
+  border-left: 0.625rem solid currentColor;
+  transform: translate(-35%, -50%);
+}
+
+.c-carousel__dots {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.c-carousel__dot {
+  box-sizing: border-box;
+  width: 0.625rem;
+  height: 0.625rem;
+  padding: 0;
+  cursor: pointer;
+  background: var(--c-muted);
+  border: 0;
+  border-radius: 0;
+  transition: width 0.2s ease-out, background-color 0.2s ease-out;
+}
+.c-carousel__dot:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-carousel__dot--current {
+  width: 1.5rem;
+  background: var(--c-primary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-carousel__arrow,
+  .c-carousel__toggle,
+  .c-carousel__dot {
+    transition: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "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",
@@ -93,7 +93,10 @@
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-rating": "^0.1.0",
     "@carissa-io/components-color-picker": "^0.1.0",
-    "@carissa-io/components-async-autocomplete": "^0.1.0"
+    "@carissa-io/components-async-autocomplete": "^0.1.0",
+    "@carissa-io/components-section": "^0.1.0",
+    "@carissa-io/components-faq": "^0.1.0",
+    "@carissa-io/components-carousel": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -275,6 +278,15 @@
     },
     "@carissa-io/components-async-autocomplete": {
       "optional": true
+    },
+    "@carissa-io/components-section": {
+      "optional": true
+    },
+    "@carissa-io/components-faq": {
+      "optional": true
+    },
+    "@carissa-io/components-carousel": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -287,6 +299,7 @@
     "@carissa-io/components-button": "^0.1.1",
     "@carissa-io/components-calendar": "^0.1.1",
     "@carissa-io/components-card": "^0.1.0",
+    "@carissa-io/components-carousel": "^0.1.0",
     "@carissa-io/components-checkbox": "^0.1.1",
     "@carissa-io/components-code": "^0.1.0",
     "@carissa-io/components-color-picker": "^0.1.0",
@@ -297,6 +310,7 @@
     "@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-faq": "^0.1.0",
     "@carissa-io/components-field": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-link": "^0.1.0",
@@ -315,6 +329,7 @@
     "@carissa-io/components-radio-group": "^0.1.1",
     "@carissa-io/components-rating": "^0.1.0",
     "@carissa-io/components-search": "^0.1.1",
+    "@carissa-io/components-section": "^0.1.0",
     "@carissa-io/components-select": "^0.1.1",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-skeleton": "^0.1.0",

package/scss/index.scss

@@ -138,6 +138,14 @@
     $c-checkbox-mark-color: $var-on-primary,
     $c-checkbox-mark-size: 1rem,
 
+    // Indeterminate: the checked box, with a 10px by 2px dash in the mark colour
+    $c-checkbox-indeterminate-background: $var-primary,
+    $c-checkbox-indeterminate-border-color: $var-primary,
+    $c-checkbox-indeterminate-mark-color: $var-on-primary,
+    $c-checkbox-indeterminate-mark-width: 0.625rem,
+    $c-checkbox-indeterminate-mark-thickness: 2px,
+    $c-checkbox-indeterminate-mark-radius: 0,
+
     // Disabled: #a3a3a3 on #f5f5f5
     $c-checkbox-disabled-color: $var-disabled-text,
     $c-checkbox-disabled-background: $var-surface,
@@ -1597,3 +1605,58 @@
     $c-async-autocomplete-empty-color: $var-muted,
     $c-async-autocomplete-error-color: $var-error
 );
+
+// Section and container: layout only. Gutters of 1rem growing to 2rem and the three vertical rhythms are plain lengths; the
+// section title is --c-text (17.93:1 / 18.16:1) in the theme's h2 style and the lead paragraph is --c-muted (5.74:1 / 7.85:1).
+@use '@carissa-io/components-section/scss' as section with (
+    $c-container-gutter: 1rem,
+    $c-container-gutter-wide: 2rem,
+    $c-section-spacing-sm: 2rem,
+    $c-section-spacing-md: 4rem,
+    $c-section-spacing-lg: 6rem,
+    $c-section-header-gap: 0.75rem,
+    $c-section-header-margin-bottom: 2rem,
+    $c-section-title-font-size: $font-size-h2,
+    $c-section-title-font-weight: $font-weight-black,
+    $c-section-title-line-height: 1.2,
+    $c-section-title-color: $var-text,
+    $c-section-description-font-size: $font-size-lead,
+    $c-section-description-line-height: 1.6,
+    $c-section-description-color: $var-muted
+);
+
+// FAQ: the accordion block above does the look (its stylesheet is forwarded by the faq one, so keep this block after it); the
+// answers are --c-text (17.93:1 / 18.16:1) at a 1.6 line height and the list is capped at a readable measure.
+@use '@carissa-io/components-faq/scss' as faq with (
+    $c-faq-max-width: 48rem,
+    $c-faq-answer-color: $var-text,
+    $c-faq-answer-line-height: 1.6
+);
+
+// Carousel: the arrows and the pause / play button are the secondary button (--c-muted border, --c-text glyph at 17.93:1 / 18.16:1, a
+// --c-surface-active hover), square like every control of the theme. Inactive dots are --c-muted and the
+// current one is --c-primary and longer (1.5rem against 0.625rem), so position is not told by colour alone. The ring is the
+// theme's --c-focus.
+@use '@carissa-io/components-carousel/scss' as carousel with (
+    $c-carousel-gap: 1rem,
+    $c-carousel-transition-duration: $transition-duration,
+    $c-carousel-controls-gap: 1rem,
+    $c-carousel-controls-margin-top: 1rem,
+    $c-carousel-button-size: $min-height,
+    $c-carousel-button-radius: $radius,
+    $c-carousel-button-border-width: 1px,
+    $c-carousel-button-border-color: $var-muted,
+    $c-carousel-button-color: $var-text,
+    $c-carousel-button-background: $var-background,
+    $c-carousel-button-background-hover: $var-surface-active,
+    $c-carousel-button-disabled-opacity: 0.5,
+    $c-carousel-icon-size: 0.5rem,
+    $c-carousel-icon-thickness: 2px,
+    $c-carousel-dot-size: 0.625rem,
+    $c-carousel-dot-size-current: 1.5rem,
+    $c-carousel-dot-gap: 0.5rem,
+    $c-carousel-dot-color: $var-muted,
+    $c-carousel-dot-color-current: $var-primary,
+    $c-carousel-focus-outline: $focus-width solid $var-focus,
+    $c-carousel-focus-outline-offset: 2px
+);