@carissa-io/theme-default 0.3.11 → 0.3.13

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
@@ -427,11 +428,23 @@ From [components-faq](components/components-faq): `Faq`. It is the Accordion (th
 ## 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`.
 
+## Visually hidden
+From [components-visually-hidden](components/components-visually-hidden): `VisuallyHidden`. The hidden state is the clip pattern and has no look. The revealed state (`focusable`, a skip link) is `--c-text` on `--c-background` (17.93:1 / 18.16:1) with a 0.75rem 1rem padding at the top-left corner; it is only shown while it has keyboard focus, so the browser's focus indicator still marks it and the pair stays well above 4.5:1 in both modes. No new colour.
+
+## Live region
+From [components-live-region](components/components-live-region): `LiveRegion`. Hidden regions have no look (they are announced, not seen). The visible variant is a square box: `--c-text` on `--c-surface` (16.44:1 / 16.44:1) with a 1px `--c-muted` border (5.27:1 / 7.11:1 on the surface, above the 3:1 non-text minimum), 0.75rem 1rem padding; an empty region takes no space.
+
+## Theme switch
+From [components-theme-switch](components/components-theme-switch): `ThemeSwitch`. A segmented control built like the stepper and tabs: square, a 1px `--c-muted` border (5.74:1 / 7.85:1 on the background) and 2.75rem options with 1.25rem icons (`currentColor`, so `--c-text` at 17.93:1 / 18.16:1 on the background). The current option is filled `--c-primary` with an `--c-on-primary` icon (21:1 / 21:1) and a 2px `--c-on-primary` underline, so it is told apart by shape as well as by colour; it also carries `aria-checked`. Hover is a `--c-surface-active` fill (`--c-text` 14.23:1 / 13.88:1). The keyboard ring is the theme's 1px `--c-focus` outline offset by 2px (21:1 / 19.8:1 on the background). The text labels stay visually hidden (the icons are the visible cue). The `cycle` variant is one bordered button of the same height showing the current mode icon (`--c-text` on `--c-background`, same hover and ring).
+
+## Icon
+From [components-icon](components/components-icon): `Icon`. No colour of its own: the stroke is `currentColor`, so an icon has the contrast of the text it sits in (17.93:1 / 18.16:1 for `--c-text`, 5.74:1 / 7.85:1 for `--c-muted`, both above the 3:1 non-text minimum). Sizes are pinned in rem (1, 1.25, 1.5 and 2rem) so they do not drift with the font size around them. A decorative icon is `aria-hidden`; a lone one needs a `label`.
+
 ## 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`, `-async-autocomplete`, `-section`, `-faq` and `-carousel`. `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`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch` and `-icon`. `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;
@@ -5265,3 +5282,157 @@ ol.c-list {
     transition: none;
   }
 }
+.c-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-visually-hidden--focusable:focus,
+.c-visually-hidden--focusable:focus-within {
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 1000;
+  width: auto;
+  height: auto;
+  padding: 0.75rem 1rem;
+  margin: 0;
+  overflow: visible;
+  color: var(--c-text);
+  white-space: normal;
+  background: var(--c-background);
+  clip-path: none;
+}
+
+.c-live-region--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-live-region:not(.c-live-region--hidden) {
+  padding: 0.75rem 1rem;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-live-region:not(.c-live-region--hidden):empty {
+  display: none;
+}
+
+.c-theme-switch {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 0;
+  color: var(--c-text);
+  vertical-align: middle;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+
+.c-theme-switch__option,
+button.c-theme-switch {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  transition: background-color 0.2s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-theme-switch__option,
+  button.c-theme-switch {
+    transition: none;
+  }
+}
+.c-theme-switch__option:hover,
+button.c-theme-switch:hover {
+  background: var(--c-surface-active);
+}
+.c-theme-switch__option:focus-visible,
+button.c-theme-switch:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-theme-switch__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0.875rem;
+  border-radius: 0;
+}
+
+.c-theme-switch__option--current,
+.c-theme-switch__option--current:hover {
+  color: var(--c-on-primary);
+  background: var(--c-primary);
+  box-shadow: inset 0 -2px 0 var(--c-on-primary);
+}
+
+.c-theme-switch--cycle {
+  padding: 0.75rem 0.875rem;
+}
+
+.c-theme-switch__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.c-theme-switch__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: -0.2em;
+}
+
+.c-icon--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c-icon--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.c-icon--lg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c-icon--xl {
+  width: 2rem;
+  height: 2rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "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",
@@ -96,7 +96,11 @@
     "@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"
+    "@carissa-io/components-carousel": "^0.1.0",
+    "@carissa-io/components-visually-hidden": "^0.1.0",
+    "@carissa-io/components-live-region": "^0.1.0",
+    "@carissa-io/components-theme-switch": "^0.1.0",
+    "@carissa-io/components-icon": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -287,6 +291,18 @@
     },
     "@carissa-io/components-carousel": {
       "optional": true
+    },
+    "@carissa-io/components-visually-hidden": {
+      "optional": true
+    },
+    "@carissa-io/components-live-region": {
+      "optional": true
+    },
+    "@carissa-io/components-theme-switch": {
+      "optional": true
+    },
+    "@carissa-io/components-icon": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -312,10 +328,12 @@
     "@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-icon": "^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-live-region": "^0.1.0",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
@@ -342,6 +360,7 @@
     "@carissa-io/components-tabs": "^0.1.0",
     "@carissa-io/components-tag": "^0.1.0",
     "@carissa-io/components-tag-input": "^0.1.0",
+    "@carissa-io/components-theme-switch": "^0.1.0",
     "@carissa-io/components-time-picker": "^0.1.0",
     "@carissa-io/components-timeline": "^0.1.0",
     "@carissa-io/components-toast": "^0.1.0",
@@ -349,6 +368,7 @@
     "@carissa-io/components-tree": "^0.1.0",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
+    "@carissa-io/components-visually-hidden": "^0.1.0",
     "sass-embedded": "^1.105.1",
     "vitest": "^4.1.11"
   },

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,
@@ -1652,3 +1660,59 @@
     $c-carousel-focus-outline: $focus-width solid $var-focus,
     $c-carousel-focus-outline-offset: 2px
 );
+
+// Visually hidden: the hidden state is the clip pattern and has no look. The revealed (focusable) state, a skip link, is
+// --c-text on --c-background (17.93:1 / 18.16:1) with comfortable padding; the browser's focus ring still marks it. No
+// component stylesheet is forwarded here, so the order does not matter.
+@use '@carissa-io/components-visually-hidden/scss' as visually-hidden with (
+    $c-visually-hidden-focus-top: 0.5rem,
+    $c-visually-hidden-focus-left: 0.5rem,
+    $c-visually-hidden-focus-padding: 0.75rem 1rem,
+    $c-visually-hidden-focus-background: $var-background,
+    $c-visually-hidden-focus-color: $var-text
+);
+
+// Live region: only the visible variant has a look, a square box like the theme's alerts and cards: --c-text on
+// --c-surface (16.44:1 / 16.44:1) with a 1px --c-muted border (5.27:1 / 7.11:1 on the surface, above the 3:1 minimum). An empty
+// region takes no space (the component hides it).
+@use '@carissa-io/components-live-region/scss' as live-region with (
+    $c-live-region-visible-padding: 0.75rem 1rem,
+    $c-live-region-visible-radius: $radius,
+    $c-live-region-visible-color: $var-text,
+    $c-live-region-visible-background: $var-surface,
+    $c-live-region-visible-border: 1px solid $var-muted
+);
+
+// Theme switch: a segmented control like the stepper and tabs: a square box with a 1px --c-muted border (5.74:1 / 7.85:1 on the
+// background) and 2.75rem options. The current option is filled --c-primary with --c-on-primary (21:1 / 21:1) and a 2px
+// --c-on-primary underline, so it is told apart by shape as well as by colour. Hover is --c-surface-active (--c-text 14.23:1 /
+// 13.88:1) and the keyboard ring is the theme's 1px --c-focus outline offset by 2px (21:1 / 19.8:1). The labels stay visually hidden.
+@use '@carissa-io/components-theme-switch/scss' as theme-switch with (
+    $c-theme-switch-gap: 0,
+    $c-theme-switch-padding: 0,
+    $c-theme-switch-radius: $radius,
+    $c-theme-switch-option-radius: $radius,
+    $c-theme-switch-icon-size: 1.25rem,
+    $c-theme-switch-option-padding: 0.75rem 0.875rem,
+    $c-theme-switch-option-gap: 0.5rem,
+    $c-theme-switch-show-label: false,
+    $c-theme-switch-color: $var-text,
+    $c-theme-switch-background: $var-background,
+    $c-theme-switch-border: 1px solid $var-muted,
+    $c-theme-switch-hover-background: $var-surface-active,
+    $c-theme-switch-current-color: $var-on-primary,
+    $c-theme-switch-current-background: $var-primary,
+    $c-theme-switch-current-marker: inset 0 -2px 0 $var-on-primary,
+    $c-theme-switch-focus-outline: $focus-width solid $var-focus,
+    $c-theme-switch-focus-offset: 2px,
+    $c-theme-switch-transition: $transition-duration
+);
+
+// Icon: pinned sizes (1, 1.25, 1.5 and 2rem) so a glyph does not change with the font size around it; the colour is the
+// text colour of the parent (currentColor), so it follows both modes with no colour of its own.
+@use '@carissa-io/components-icon/scss' as icon with (
+    $c-icon-size-sm: 1rem,
+    $c-icon-size-md: 1.25rem,
+    $c-icon-size-lg: 1.5rem,
+    $c-icon-size-xl: 2rem
+);