@carissa-io/theme-default 0.3.10 → 0.3.11

package/DESIGN.md

@@ -418,6 +418,15 @@ 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

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`, `-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.
 
 ## Change a value

package/dist/index.css

@@ -4407,6 +4407,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 +5046,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.11",
   "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

@@ -1597,3 +1597,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
+);