@carissa-io/theme-default 0.3.8 → 0.3.10

package/scss/_tokens.scss

@@ -9,7 +9,7 @@
 $black: #000; // primary, hover and focus
 $white: #fff;
 $text: #171717;
-$muted: #737373; // labels, field borders, placeholders (4.7:1 on white)
+$muted: #666666; // labels, field borders, placeholders (5.7:1 on white)
 $surface: #f5f5f5; // hover surface, disabled background
 $surface-active: #e5e5e5;
 $primary-hover: #262626;

package/scss/index.scss

@@ -78,7 +78,7 @@
     $c-button-primary-background-disabled: $var-surface,
     $c-button-primary-border-color-disabled: $var-surface,
 
-    // Secondary: 1px #737373 border, black on hover
+    // Secondary: 1px #666666 border, black on hover
     $c-button-secondary-color: $var-text,
     $c-button-secondary-background: $var-background,
     $c-button-secondary-border-color: $var-muted,
@@ -125,7 +125,7 @@
     $c-checkbox-gap: 0.75rem,
     $c-checkbox-transition: (color $transition-duration ease, background-color $transition-duration ease, border-color $transition-duration ease, opacity $transition-duration ease),
 
-    // Box: 20px square, 1px #737373 border, black on hover
+    // Box: 20px square, 1px #666666 border, black on hover
     $c-checkbox-box-size: 1.25rem,
     $c-checkbox-border-color: $var-muted,
     $c-checkbox-border-color-hover: $var-primary,
@@ -155,7 +155,7 @@
 );
 
 @use '@carissa-io/components-switch/scss' as switch with (
-    // Track: square, 40 x 20px, white with a 1px #737373 border; black when on
+    // Track: square, 40 x 20px, white with a 1px #666666 border; black when on
     $c-switch-track-width: 2.5rem,
     $c-switch-track-height: 1.25rem,
     $c-switch-track-radius: $radius,
@@ -168,7 +168,7 @@
     $c-switch-track-background-disabled: $var-surface,
     $c-switch-track-border-color-disabled: $var-disabled-border,
 
-    // Thumb: square, #737373 when off, white when on
+    // Thumb: square, #666666 when off, white when on
     $c-switch-thumb-size: 0.875rem,
     $c-switch-thumb-offset: 0.125rem,
     $c-switch-thumb-radius: $radius,
@@ -203,7 +203,7 @@
     $c-radio-group-dot-gap: 0.75rem,
     $c-radio-group-transition: (color $transition-duration ease, background-color $transition-duration ease, border-color $transition-duration ease, background-size $transition-duration ease),
 
-    // Dot: 20px circle (a radio is round, so the radius stays 50%), 1px #737373 border, black on hover
+    // Dot: 20px circle (a radio is round, so the radius stays 50%), 1px #666666 border, black on hover
     $c-radio-group-dot-size: 1.25rem,
     $c-radio-group-border-color: $var-muted,
     $c-radio-group-border-color-hover: $var-primary,
@@ -246,7 +246,7 @@
     $c-slider-min-height: $min-height,
     $c-slider-transition: (background-color $transition-duration ease, border-color $transition-duration ease),
 
-    // Track: 2px #737373 line with a black fill
+    // Track: 2px #666666 line with a black fill
     $c-slider-track-height: 2px,
     $c-slider-track-color: $var-muted,
     $c-slider-track-fill-color: $var-primary,
@@ -274,7 +274,7 @@
 );
 
 @use '@carissa-io/components-popover/scss' as popover with (
-    // Panel: white, 1px #737373 border, square, flat (no shadow), 4px below the anchor
+    // Panel: white, 1px #666666 border, square, flat (no shadow), 4px below the anchor
     $c-popover-background: $var-background,
     $c-popover-color: $var-text,
     $c-popover-border-width: 1px,
@@ -356,7 +356,7 @@
 // Upload: the Input field with a dashed box as the dropzone. Its index forwards the input styles, already loaded and
 // configured above, so it must come after them.
 @use '@carissa-io/components-upload/scss' as upload with (
-    // Box: dashed 1px #737373 (the input border), black on hover and while files are dragged over it
+    // Box: dashed 1px #666666 (the input border), black on hover and while files are dragged over it
     $c-upload-border-style: dashed,
     $c-upload-transition: (border-color $transition-duration ease, background-color $transition-duration ease, box-shadow $transition-duration ease, color $transition-duration ease),
     $c-upload-dragging-border-color: $var-primary,
@@ -788,7 +788,7 @@
 );
 
 // Link: --c-primary (black in light, white in dark) with an underline, because a black link on black text is told apart
-// by the underline alone; --c-primary-hover on hover. Subtle is --c-muted (4.7:1 on the background) and turns --c-text.
+// by the underline alone; --c-primary-hover on hover. Subtle is --c-muted (5.7:1 on the background) and turns --c-text.
 // Disabled is --c-disabled-text at full opacity. The focus ring is the theme's 1px ring, offset 2px.
 @use '@carissa-io/components-link/scss' as link with (
     $c-link-color: $var-primary,
@@ -939,7 +939,7 @@
 );
 
 // 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.
+// (5.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,
@@ -985,7 +985,7 @@
     $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
+// Breadcrumb: links and separators in --c-muted (5.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,
@@ -1062,7 +1062,7 @@
 
 // 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
+// are the small uppercase label style in --c-text, because --c-muted on --c-surface is 5.27:1 in light (it passes, the label stays text for emphasis). 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,
@@ -1098,7 +1098,7 @@
     $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
+// Navbar: a --c-background bar with a 1px --c-muted bottom edge. Items read like the tabs: bold --c-muted (5.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 (
@@ -1155,7 +1155,7 @@
 );
 
 // 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
+// hover and keyboard focus (14.2:1) and the theme's 1px focus ring; labels are small --c-muted text (5.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 (
@@ -1204,7 +1204,7 @@
 );
 
 // List: rows on the page background, divided by 1px --c-muted lines. The secondary text is --c-text at the small size, not
-// --c-muted, because the row sits on --c-surface-active when hovered and --c-muted is only 3.8:1 there (4.35:1 on --c-surface).
+// --c-muted, because the row sits on --c-surface-active when hovered and --c-muted is 4.56:1 there (5.27:1 on --c-surface), so the text color keeps the hover clearly readable.
 // Hover is --c-surface-active; the current item is the same 12% --c-primary tint as a selected table row. Square, the theme's
 // 1px focus ring inside the row.
 @use '@carissa-io/components-list/scss' as list with (
@@ -1229,7 +1229,7 @@
     $c-list-transition-duration: $transition-duration
 );
 
-// Description list: the term is a small bold --c-muted label (4.7:1 on the background, so use it on --c-background, where
+// Description list: the term is a small bold --c-muted label (5.7:1 on the background, so use it on --c-background, where
 // --c-muted is not enough on --c-surface) and the detail is --c-text. No fills or borders.
 @use '@carissa-io/components-description-list/scss' as description-list with (
     $c-description-list-gap-x: 2rem,
@@ -1245,7 +1245,7 @@
 
 // Stat: a card-like block on the page background with a 1px --c-muted border (the Card's outlined look), not on --c-surface:
 // the delta colors are checked against --c-background, where --c-success is 5:1 and --c-error 4.5:1 in light (4.15:1 for
-// --c-error on --c-surface). The label and the description are --c-muted (4.7:1), the value is --c-text. The delta is
+// --c-error on --c-surface). The label and the description are --c-muted (5.7:1), the value is --c-text. The delta is
 // success when up, error when down and muted when flat; the arrow and the screen-reader text say the same, so color is never
 // the only signal. In dark the status colors are lighter (7.1:1 and above on the background).
 @use '@carissa-io/components-stat/scss' as stat with (
@@ -1271,9 +1271,9 @@
     $c-stat-delta-flat-color: $var-muted
 );
 
-// Empty state: a centred block on the page background. The icon is --c-muted (4.7:1 light, 7.9:1 dark, above the 3:1 non-text
-// minimum), the title --c-text at the h3 size and bold, the description --c-muted (4.7:1 on the background, so keep it off
-// --c-surface, where light is 4.35:1). The actions are the app's buttons. Square, nothing else to set.
+// Empty state: a centred block on the page background. The icon is --c-muted (5.7:1 light, 7.9:1 dark, above the 3:1 non-text
+// minimum), the title --c-text at the h3 size and bold, the description --c-muted (5.7:1 on the background, so keep it off
+// --c-surface, where light is 5.27:1). The actions are the app's buttons. Square, nothing else to set.
 @use '@carissa-io/components-empty-state/scss' as empty-state with (
     $c-empty-state-padding: 3rem 1.5rem,
     $c-empty-state-padding-sm: 1.5rem 1rem,
@@ -1299,7 +1299,7 @@
 // success, warning, error and info are solid dots in their status color (4.5:1 or more against the background in light, 7:1 in
 // dark, above the 3:1 non-text minimum); the current step is a hollow --c-primary ring. An icon marker keeps a --c-background
 // fill and takes the status as its ring, so the --c-text icon is 17.9:1 / 18.2:1 in every status. The status text is the
-// hidden status_label, the time is --c-muted (4.7:1 / 7.9:1 on the background) and the title --c-text, bold. Color is never the
+// hidden status_label, the time is --c-muted (5.7:1 / 7.9:1 on the background) and the title --c-text, bold. Color is never the
 // only signal.
 @use '@carissa-io/components-timeline/scss' as timeline with (
     $c-timeline-gap: 1.5rem,
@@ -1389,3 +1389,211 @@
     $c-code-focus-outline: $focus-width solid $var-focus,
     $c-code-focus-outline-offset: -2px
 );
+
+// Field: the label, hint and error around a control with no label of its own (radio group, slider, custom control). The label is
+// --c-text (17.93:1 / 18.16:1 on the background) in the label size and weight, not --c-muted, which is 5.27:1 on --c-surface in
+// light. The hint is --c-muted (5.74:1 / 7.85:1 on the background) and the error is --c-error (4.53:1 / 7.16:1), the same
+// color as the Input's error line, with the component's required asterisk. Keep a field on --c-background.
+@use '@carissa-io/components-field/scss' as field with (
+    $c-field-font-family: $font-family,
+    $c-field-font-size: $font-size-body,
+    $c-field-color: $var-text,
+    $c-field-label-font-size: $font-size-small,
+    $c-field-label-font-weight: $font-weight-bold,
+    $c-field-label-color: $var-text,
+    $c-field-help-font-size: $font-size-small,
+    $c-field-help-color: $var-muted,
+    $c-field-error-font-size: $font-size-small,
+    $c-field-error-color: $var-error,
+    $c-field-required-color: $var-error,
+    $c-field-gap: 0.5rem,
+    $c-field-horizontal-label-width: 10rem,
+    $c-field-horizontal-gap: 1.5rem
+);
+
+// Number input: the field is the Input's (configured at the top; this module forwards it). The steppers read like the
+// secondary button inside the box: --c-muted glyphs (5.74:1 / 7.85:1, above the 3:1 non-text minimum) turning --c-text on a
+// --c-surface-active hover (--c-text 14.23:1 / 13.88:1), square, half opacity at a bound.
+@use '@carissa-io/components-number-input/scss' as number-input with (
+    $c-number-input-stepper-size: 1.5rem,
+    $c-number-input-stepper-gap: 0.125rem,
+    $c-number-input-stepper-font-size: $font-size-body,
+    $c-number-input-stepper-radius: $radius,
+    $c-number-input-stepper-color: $var-muted,
+    $c-number-input-stepper-color-hover: $var-text,
+    $c-number-input-stepper-background: transparent,
+    $c-number-input-stepper-background-hover: $var-surface-active,
+    $c-number-input-stepper-disabled-opacity: 0.5,
+    $c-number-input-text-align: start
+);
+
+// OTP input: one box per character, built like the Input box: --c-background with a 1px --c-muted border (5.74:1 / 7.85:1),
+// --c-primary on hover, and the keyboard focus thickens the border to the theme's black ring (--c-focus, 21:1 / 19.8:1). An
+// invalid box is --c-error (4.53:1 / 7.16:1) and the message under the boxes is --c-error too; a disabled one is --c-surface
+// with --c-disabled-text (exempt from contrast). The digit is --c-text (17.93:1 / 18.16:1). Square, 3rem by 3.5rem.
+@use '@carissa-io/components-otp-input/scss' as otp-input with (
+    $c-otp-input-font-family: $font-family,
+    $c-otp-input-font-size: $font-size-h3,
+    $c-otp-input-label-font-size: $label-font-size,
+    $c-otp-input-label-font-weight: $label-font-weight,
+    $c-otp-input-error-font-size: $font-size-small,
+    $c-otp-input-color: $var-text,
+    $c-otp-input-label-color: $var-muted,
+    $c-otp-input-background: $var-background,
+    $c-otp-input-border-color: $var-muted,
+    $c-otp-input-border-color-hover: $var-primary,
+    $c-otp-input-focus-color: $var-focus,
+    $c-otp-input-focus-ring: $var-focus,
+    $c-otp-input-focus-ring-width: $focus-width,
+    $c-otp-input-error-color: $var-error,
+    $c-otp-input-error-ring: $var-error,
+    $c-otp-input-disabled-background: $var-surface,
+    $c-otp-input-disabled-color: $var-disabled-text,
+    $c-otp-input-cell-width: 3rem,
+    $c-otp-input-cell-height: 3.5rem,
+    $c-otp-input-border-width: 1px,
+    $c-otp-input-radius: $radius,
+    $c-otp-input-gap: 0.5rem,
+    $c-otp-input-label-gap: 0.5rem,
+    $c-otp-input-transition: border-color $transition-duration ease
+);
+
+// Phone: the field is the Input's (configured at the top; this module forwards it); the country select sits in its start slot
+// as --c-text on a transparent background (so the box color shows in both modes) with a 1px --c-muted divider before the
+// number, and the theme's 1px --c-focus outline when focused.
+@use '@carissa-io/components-phone/scss' as phone with (
+    $c-phone-country-max-width: 7rem,
+    $c-phone-country-padding-x: 0.25rem,
+    $c-phone-country-color: $var-text,
+    $c-phone-country-background: transparent,
+    $c-phone-country-border-color: $var-muted,
+    $c-phone-country-border-width: 1px,
+    $c-phone-country-gap: 0.5rem,
+    $c-phone-country-focus-outline: $focus-width solid $var-focus,
+    $c-phone-country-disabled-color: $var-disabled-text
+);
+
+// Tag input: the box is the Input's and the chips are the Tag's, both configured above (this module forwards them), so it only
+// sets the spacing between the chips and the text field. Placed after the Tag block on purpose.
+@use '@carissa-io/components-tag-input/scss' as tag-input with (
+    $c-tag-input-gap: 0.375rem,
+    $c-tag-input-control-min-width: 6rem
+);
+
+// Time picker: the date picker's field (a text input) with a Listbox of times in the Popover, so the box, the notched label,
+// the panel border and the options are the ones configured above (this module forwards them). Body text, tabular figures, a
+// 16px clock icon that is muted and turns black on hover and when open, like the Select arrow without the rotation.
+@use '@carissa-io/components-time-picker/scss' as time-picker with (
+    $c-time-picker-color: $var-text,
+    $c-time-picker-min-height: 1.5em,
+    $c-time-picker-placeholder-color: $var-muted,
+    $c-time-picker-icon-size: $arrow-size,
+    $c-time-picker-icon-offset: $arrow-offset,
+    $c-time-picker-icon-color: $var-arrow-color,
+    $c-time-picker-icon-color-hover: $var-arrow-color-active,
+    $c-time-picker-icon-color-open: $var-arrow-color-active,
+    $c-time-picker-icon-color-disabled: $var-arrow-color-disabled,
+    $c-time-picker-icon-transition: color $transition-duration ease,
+    $c-time-picker-open-border-color: $var-focus
+);
+
+// Date range: the date picker's trigger with one or two month grids in the Popover (the calendar block above styles the days;
+// the two ends use its selected look, black with white text). The days between them are a --c-surface-active band with --c-text
+// (14.23:1 / 13.88:1). The calendar keeps its default `border-spacing: 0` and the band is painted on the cell as well as on the
+// day, so the rows read as one unbroken range. Keep this block after the calendar and the date picker.
+@use '@carissa-io/components-date-range/scss' as date-range with (
+    $c-date-range-trigger-color: $var-text,
+    $c-date-range-trigger-min-height: 1.5em,
+    $c-date-range-placeholder-color: $var-muted,
+    $c-date-range-panel-padding: 0.5rem,
+    $c-date-range-months-gap: 1rem,
+    $c-date-range-in-range-background: $var-surface-active,
+    $c-date-range-in-range-color: $var-text,
+    $c-date-range-in-range-radius: 0,
+    $c-date-range-icon-size: $arrow-size,
+    $c-date-range-icon-offset: $arrow-offset,
+    $c-date-range-icon-color: $var-arrow-color,
+    $c-date-range-icon-color-hover: $var-arrow-color-active,
+    $c-date-range-icon-color-open: $var-arrow-color-active,
+    $c-date-range-icon-color-disabled: $var-arrow-color-disabled,
+    $c-date-range-icon-transition: color $transition-duration ease,
+    $c-date-range-open-border-color: $var-focus
+);
+
+// Rating: the stars are --c-primary (21:1 / 19.8:1 on the background) over --c-muted ones (5.74:1 / 7.85:1), so the filled
+// and the empty part differ by shape (a solid star against an outline one) and by lightness (4.43:1 / 2.52:1 between them),
+// never by hue alone; the preview while hovering is --c-primary-hover (15.13:1 in light). The keyboard ring is the theme's --c-focus. The label is the field label style in --c-muted.
+@use '@carissa-io/components-rating/scss' as rating with (
+    $c-rating-label-font-size: $label-font-size,
+    $c-rating-label-font-weight: $label-font-weight,
+    $c-rating-label-color: $var-muted,
+    $c-rating-label-gap: 0.5rem,
+    $c-rating-size: 1.75rem,
+    $c-rating-gap: 0.25rem,
+    $c-rating-color: $var-primary,
+    $c-rating-color-hover: $var-primary-hover,
+    $c-rating-empty-color: $var-muted,
+    $c-rating-transition: color $transition-duration ease,
+    $c-rating-focus-color: $var-focus,
+    $c-rating-focus-ring-width: $focus-width,
+    $c-rating-focus-radius: $radius,
+    $c-rating-disabled-opacity: 0.5
+);
+
+// Colour picker: the field is the Input's with a swatch chip and the hex text; the panel is the Popover's. The hue and
+// brightness areas are the colour data itself, so their gradients keep the component's literal colours. Everything else is
+// custom properties: the thumbs are a --c-background ring over a --c-text one (visible over any colour in both modes), the
+// keyboard ring is --c-focus, the hex input is built like the Input box and the chips are bordered with --c-muted.
+@use '@carissa-io/components-color-picker/scss' as color-picker with (
+    $c-color-picker-color: $var-text,
+    $c-color-picker-min-height: 1.5em,
+    $c-color-picker-gap: 0.75rem,
+    $c-color-picker-open-border-color: $var-focus,
+    $c-color-picker-chip-size: 1.25rem,
+    $c-color-picker-chip-radius: $radius,
+    $c-color-picker-chip-border-color: $var-muted,
+    $c-color-picker-chip-empty-background: repeating-conic-gradient($var-surface-active 0% 25%, $var-background 0% 50%) 50% / 0.5rem 0.5rem,
+    $c-color-picker-panel-width: 15rem,
+    $c-color-picker-panel-padding: 0.75rem,
+    $c-color-picker-panel-gap: 0.75rem,
+    $c-color-picker-area-radius: $radius,
+    $c-color-picker-track-radius: $radius,
+    $c-color-picker-alpha-checker: repeating-conic-gradient($var-surface-active 0% 25%, $var-background 0% 50%) 50% / 0.5rem 0.5rem,
+    $c-color-picker-thumb-size: 1.25rem,
+    $c-color-picker-thumb-border-width: 2px,
+    $c-color-picker-thumb-border-color: $var-background,
+    $c-color-picker-thumb-shadow: (0 0 0 1px $var-text),
+    $c-color-picker-focus-ring-width: $focus-width,
+    $c-color-picker-focus-ring-color: $var-focus,
+    $c-color-picker-focus-ring-offset: 2px,
+    $c-color-picker-hex-font-family: $font-family-mono,
+    $c-color-picker-hex-font-size: $font-size-small,
+    $c-color-picker-hex-color: $var-text,
+    $c-color-picker-hex-background: $var-background,
+    $c-color-picker-hex-padding: 0.625rem 0.75rem,
+    $c-color-picker-hex-border-color: $var-muted,
+    $c-color-picker-hex-border-color-invalid: $var-error,
+    $c-color-picker-hex-radius: $radius,
+    $c-color-picker-swatch-size: 1.75rem,
+    $c-color-picker-swatch-radius: $radius,
+    $c-color-picker-swatch-border-color: $var-muted,
+    $c-color-picker-swatch-selected-ring-color: $var-primary
+);
+
+// Async autocomplete: the Combobox's field (a text input over the Listbox in the Popover, configured above) with a spinner
+// while a request is pending (--c-primary arc over a --c-surface-active track) and one message in the panel per state:
+// loading and empty in --c-muted (5.74:1 / 7.85:1, the Listbox's empty message color) and an error in --c-error (4.53:1 / 7.16:1).
+@use '@carissa-io/components-async-autocomplete/scss' as async-autocomplete with (
+    $c-async-autocomplete-color: $var-text,
+    $c-async-autocomplete-min-height: 1.5em,
+    $c-async-autocomplete-placeholder-color: $var-muted,
+    $c-async-autocomplete-open-border-color: $var-focus,
+    $c-async-autocomplete-spinner-size: $arrow-size,
+    $c-async-autocomplete-spinner-offset: $arrow-offset,
+    $c-async-autocomplete-spinner-width: 2px,
+    $c-async-autocomplete-spinner-color: $var-primary,
+    $c-async-autocomplete-spinner-track-color: $var-surface-active,
+    $c-async-autocomplete-loading-color: $var-muted,
+    $c-async-autocomplete-empty-color: $var-muted,
+    $c-async-autocomplete-error-color: $var-error
+);