@carissa-io/theme-default 0.3.11 → 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
@@ -431,7 +432,7 @@ From [components-carousel](components/components-carousel): `Carousel`. The arro
 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

@@ -145,6 +145,8 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 `-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.11",
+  "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",

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,