@carissa-io/theme-default 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,133 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "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",
+  "files": [
+    "dist",
+    "scss",
+    "DESIGN.md"
+  ],
+  "exports": {
+    ".": "./dist/index.css",
+    "./css": "./dist/index.css",
+    "./scss": "./scss/index.scss"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "sass --load-path=node_modules --no-source-map scss/index.scss dist/index.css",
+    "lint": "node scripts/lint.mjs",
+    "pretest": "npm run build",
+    "test": "vitest run",
+    "prepublishOnly": "node -e \"if (!process.env.GITHUB_ACTIONS) { console.error('Refusing to publish outside GitHub Actions CI: commit and push to main instead.'); process.exit(1); }\" && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/carissa-io/theme-default.git"
+  },
+  "license": "UNLICENSED",
+  "engines": {
+    "node": ">=24"
+  },
+  "peerDependencies": {
+    "@carissa-io/components-input": "^0.2.1",
+    "@carissa-io/components-email": "^0.1.6",
+    "@carissa-io/components-password": "^0.1.7",
+    "@carissa-io/components-url": "^0.1.7",
+    "@carissa-io/components-button": "^0.1.1",
+    "@carissa-io/components-checkbox": "^0.1.1",
+    "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-radio-group": "^0.1.1",
+    "@carissa-io/components-textarea": "^0.1.1",
+    "@carissa-io/components-slider": "^0.1.1",
+    "@carissa-io/components-popover": "^0.1.1",
+    "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-select": "^0.1.1",
+    "@carissa-io/components-combobox": "^0.1.1",
+    "@carissa-io/components-upload": "^0.1.1",
+    "@carissa-io/components-calendar": "^0.1.1",
+    "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-search": "^0.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@carissa-io/components-input": {
+      "optional": true
+    },
+    "@carissa-io/components-email": {
+      "optional": true
+    },
+    "@carissa-io/components-password": {
+      "optional": true
+    },
+    "@carissa-io/components-url": {
+      "optional": true
+    },
+    "@carissa-io/components-button": {
+      "optional": true
+    },
+    "@carissa-io/components-checkbox": {
+      "optional": true
+    },
+    "@carissa-io/components-switch": {
+      "optional": true
+    },
+    "@carissa-io/components-radio-group": {
+      "optional": true
+    },
+    "@carissa-io/components-textarea": {
+      "optional": true
+    },
+    "@carissa-io/components-slider": {
+      "optional": true
+    },
+    "@carissa-io/components-popover": {
+      "optional": true
+    },
+    "@carissa-io/components-listbox": {
+      "optional": true
+    },
+    "@carissa-io/components-select": {
+      "optional": true
+    },
+    "@carissa-io/components-combobox": {
+      "optional": true
+    },
+    "@carissa-io/components-upload": {
+      "optional": true
+    },
+    "@carissa-io/components-calendar": {
+      "optional": true
+    },
+    "@carissa-io/components-date-picker": {
+      "optional": true
+    },
+    "@carissa-io/components-search": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@carissa-io/components-button": "^0.1.1",
+    "@carissa-io/components-calendar": "^0.1.1",
+    "@carissa-io/components-checkbox": "^0.1.1",
+    "@carissa-io/components-combobox": "^0.1.1",
+    "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-input": "^0.2.1",
+    "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-popover": "^0.1.1",
+    "@carissa-io/components-radio-group": "^0.1.1",
+    "@carissa-io/components-search": "^0.1.1",
+    "@carissa-io/components-select": "^0.1.1",
+    "@carissa-io/components-slider": "^0.1.1",
+    "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-upload": "^0.1.1",
+    "sass-embedded": "^1.105.1",
+    "vitest": "^4.1.11"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

package/scss/index.scss

@@ -0,0 +1,511 @@
+// Carissa Default theme: Swiss minimalism (see DESIGN.md). Only variable overrides, no component code.
+// Neutral scale = Tailwind's neutral palette values, written out as plain colors.
+
+// Palette (Tailwind's neutral scale as plain colors), named by role so a theme is changed in one place.
+$black: #000; // primary, hover and focus
+$white: #fff;
+$text: #171717;
+$muted: #737373; // labels, field borders, placeholders (4.7:1 on white)
+$surface: #f5f5f5; // hover surface, disabled background
+$surface-active: #e5e5e5;
+$primary-hover: #262626;
+$primary-active: #404040;
+$disabled-text: #a3a3a3;
+$disabled-border: #d4d4d4;
+$error: #dc3545;
+
+// Values shared by every component, so the whole theme moves together.
+$font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);
+$radius: 0;
+$min-height: 2.75rem; // 44px touch target
+$focus-color: $black;
+$focus-width: 1px;
+$transition-duration: 0.2s;
+$label-font-size: 0.6875rem;
+$label-font-weight: 700;
+$label-letter-spacing: 0.1em;
+
+// The dropdown arrow of Select and Combobox: 16px, muted, black on hover and when open, turns over with the list.
+$arrow-size: 1rem;
+$arrow-offset: 0.75rem;
+$arrow-color: $muted;
+$arrow-color-active: $black;
+$arrow-color-disabled: $disabled-text;
+$arrow-transition: (rotate $transition-duration ease, color $transition-duration ease);
+$arrow-rotate-open: 180deg;
+
+@use '@carissa-io/components-input/scss' as input with (
+    // Typography: neutral grotesque stack (no webfont to load), label = bold, uppercase, tracking-widest
+    $c-input-font-family: $font-family,
+    $c-input-font-size: 1rem,
+    $c-input-label-layout: notched,
+    $c-input-label-font-size: $label-font-size,
+    $c-input-label-font-weight: $label-font-weight,
+    $c-input-label-text-transform: uppercase,
+    $c-input-label-letter-spacing: $label-letter-spacing,
+    $c-input-label-color: $muted,
+    $c-input-color: $text,
+
+    // Surface and borders: high contrast, absolute black as the primary color
+    $c-input-background: $white,
+    $c-input-placeholder-color: $muted,
+    $c-input-border-color: $muted,
+    $c-input-border-color-hover: $black,
+    $c-input-focus-color: $focus-color,
+    $c-input-focus-ring: $focus-color,
+    $c-input-focus-ring-width: $focus-width,
+    $c-input-error-ring: $error,
+    $c-input-disabled-background: $surface,
+    $c-input-disabled-color: $disabled-text,
+
+    // Box: square corners, 44px minimum touch target
+    $c-input-radius: $radius,
+    $c-input-min-height: $min-height,
+    $c-input-padding-y: 0.375rem,
+    $c-input-padding-x: 0.75rem,
+
+    // Multiline (textarea): vertical resize only, a roomy minimum
+    $c-input-resize: vertical,
+    $c-input-textarea-min-height: 6rem,
+    $c-input-textarea-padding-y: 0.875rem, // room under the notched label
+
+    // Motion: subtle, 200ms
+    $c-input-transition: border-color $transition-duration ease,
+
+    // Side button
+    $c-input-button-color: $muted,
+    $c-input-button-color-hover: $black
+);
+
+@use '@carissa-io/components-button/scss' as button with (
+    // Typography: same stack and label style as the input labels
+    $c-button-font-family: $font-family,
+    $c-button-font-size: $label-font-size,
+    $c-button-font-weight: $label-font-weight,
+    $c-button-text-transform: uppercase,
+    $c-button-letter-spacing: $label-letter-spacing,
+
+    // Box: square corners, 44px minimum touch target
+    $c-button-radius: $radius,
+    $c-button-min-height: $min-height,
+    $c-button-padding-y: 0.375rem,
+    $c-button-padding-x: 1.25rem,
+    $c-button-transition: (color $transition-duration ease, background-color $transition-duration ease, border-color $transition-duration ease),
+
+    // Primary: absolute black, white text
+    $c-button-primary-color: $white,
+    $c-button-primary-background: $black,
+    $c-button-primary-border-color: $black,
+    $c-button-primary-color-hover: $white,
+    $c-button-primary-background-hover: $primary-hover,
+    $c-button-primary-border-color-hover: $primary-hover,
+    $c-button-primary-color-active: $white,
+    $c-button-primary-background-active: $primary-active,
+    $c-button-primary-border-color-active: $primary-active,
+    $c-button-primary-color-disabled: $disabled-text,
+    $c-button-primary-background-disabled: $surface,
+    $c-button-primary-border-color-disabled: $surface,
+
+    // Secondary: 1px #737373 border, black on hover
+    $c-button-secondary-color: $text,
+    $c-button-secondary-background: $white,
+    $c-button-secondary-border-color: $muted,
+    $c-button-secondary-color-hover: $black,
+    $c-button-secondary-background-hover: $white,
+    $c-button-secondary-border-color-hover: $black,
+    $c-button-secondary-color-active: $black,
+    $c-button-secondary-background-active: $surface,
+    $c-button-secondary-border-color-active: $black,
+    $c-button-secondary-color-disabled: $disabled-text,
+    $c-button-secondary-background-disabled: $white,
+    $c-button-secondary-border-color-disabled: $disabled-border,
+
+    // Ghost: transparent, a light surface on hover
+    $c-button-ghost-color: $text,
+    $c-button-ghost-background: transparent,
+    $c-button-ghost-border-color: transparent,
+    $c-button-ghost-color-hover: $black,
+    $c-button-ghost-background-hover: $surface,
+    $c-button-ghost-border-color-hover: transparent,
+    $c-button-ghost-color-active: $black,
+    $c-button-ghost-background-active: $surface-active,
+    $c-button-ghost-border-color-active: transparent,
+    $c-button-ghost-color-disabled: $disabled-text,
+    $c-button-ghost-background-disabled: transparent,
+    $c-button-ghost-border-color-disabled: transparent,
+
+    // Focus: 1px black ring, offset from the button
+    $c-button-focus-color: $focus-color,
+    $c-button-focus-width: $focus-width,
+    $c-button-focus-offset: 2px
+);
+
+// Checkbox is configured before Switch: Switch's index forwards (and so loads) Checkbox, and Sass only accepts a
+// module's configuration before the module is first loaded.
+@use '@carissa-io/components-checkbox/scss' as checkbox with (
+    // Typography: body text (not the uppercase field-label style), same stack
+    $c-checkbox-font-family: $font-family,
+    $c-checkbox-font-size: 1rem,
+    $c-checkbox-label-color: $text,
+
+    // Row: 44px minimum touch target
+    $c-checkbox-min-height: $min-height,
+    $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
+    $c-checkbox-box-size: 1.25rem,
+    $c-checkbox-border-color: $muted,
+    $c-checkbox-border-color-hover: $black,
+    $c-checkbox-background: $white,
+    $c-checkbox-radius: $radius,
+
+    // Checked: black box, white mark
+    $c-checkbox-checked-background: $black,
+    $c-checkbox-checked-border-color: $black,
+    $c-checkbox-mark-color: $white,
+    $c-checkbox-mark-size: 1rem,
+
+    // Disabled: #a3a3a3 on #f5f5f5
+    $c-checkbox-disabled-color: $disabled-text,
+    $c-checkbox-disabled-background: $surface,
+    $c-checkbox-disabled-border-color: $disabled-border,
+    $c-checkbox-disabled-mark-color: $disabled-text,
+
+    // Focus: 1px black ring, offset from the box
+    $c-checkbox-focus-color: $focus-color,
+    $c-checkbox-focus-width: $focus-width,
+    $c-checkbox-focus-offset: 2px,
+
+    // Error: same red as the input error ring
+    $c-checkbox-error-color: $error,
+    $c-checkbox-error-font-size: 0.8125rem
+);
+
+@use '@carissa-io/components-switch/scss' as switch with (
+    // Track: square, 40 x 20px, white with a 1px #737373 border; black when on
+    $c-switch-track-width: 2.5rem,
+    $c-switch-track-height: 1.25rem,
+    $c-switch-track-radius: $radius,
+    $c-switch-track-background: $white,
+    $c-switch-track-border-color: $muted,
+    $c-switch-track-border-color-hover: $black,
+    $c-switch-track-background-checked: $black,
+    $c-switch-track-border-color-checked: $black,
+    $c-switch-track-border-color-invalid: $error,
+    $c-switch-track-background-disabled: $surface,
+    $c-switch-track-border-color-disabled: $disabled-border,
+
+    // Thumb: square, #737373 when off, white when on
+    $c-switch-thumb-size: 0.875rem,
+    $c-switch-thumb-offset: 0.125rem,
+    $c-switch-thumb-radius: $radius,
+    $c-switch-thumb-color: $muted,
+    $c-switch-thumb-color-checked: $white,
+    $c-switch-thumb-color-disabled: $disabled-text,
+
+    // Motion: subtle, 200ms
+    $c-switch-transition: (background-color $transition-duration ease, border-color $transition-duration ease, transform $transition-duration ease),
+
+    // Focus: 1px black ring, offset from the track
+    $c-switch-focus-color: $focus-color,
+    $c-switch-focus-width: $focus-width,
+    $c-switch-focus-offset: 2px
+);
+
+@use '@carissa-io/components-radio-group/scss' as radio-group with (
+    // Typography: legend = the field-label style, options = body text
+    $c-radio-group-font-family: $font-family,
+    $c-radio-group-legend-font-size: $label-font-size,
+    $c-radio-group-legend-font-weight: $label-font-weight,
+    $c-radio-group-legend-text-transform: uppercase,
+    $c-radio-group-legend-letter-spacing: $label-letter-spacing,
+    $c-radio-group-legend-color: $muted,
+    $c-radio-group-legend-line-height: 1rem,
+    $c-radio-group-label-font-size: 1rem,
+    $c-radio-group-label-color: $text,
+
+    // Rows: 44px minimum touch target
+    $c-radio-group-min-height: $min-height,
+    $c-radio-group-gap: 0,
+    $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
+    $c-radio-group-dot-size: 1.25rem,
+    $c-radio-group-border-color: $muted,
+    $c-radio-group-border-color-hover: $black,
+    $c-radio-group-background: $white,
+
+    // Checked: black border and a 10px black inner dot
+    $c-radio-group-checked-color: $black,
+    $c-radio-group-inner-size: 0.625rem,
+    $c-radio-group-inner-color: $black,
+
+    // Disabled: #a3a3a3 on #f5f5f5
+    $c-radio-group-disabled-color: $disabled-text,
+    $c-radio-group-disabled-background: $surface,
+    $c-radio-group-disabled-border-color: $disabled-border,
+    $c-radio-group-disabled-inner-color: $disabled-text,
+
+    // Focus: the dot's border grows from 1px to 2px, black
+    $c-radio-group-focus-color: $focus-color,
+    $c-radio-group-focus-width: $focus-width,
+
+    // Error: same red as the input error ring
+    $c-radio-group-error-color: $error,
+    $c-radio-group-error-font-size: 0.8125rem
+);
+
+@use '@carissa-io/components-slider/scss' as slider with (
+    // Typography: label = the field-label style, live value = body text
+    $c-slider-font-family: $font-family,
+    $c-slider-font-size: 1rem,
+    $c-slider-color: $text,
+    $c-slider-label-font-size: $label-font-size,
+    $c-slider-label-font-weight: $label-font-weight,
+    $c-slider-label-text-transform: uppercase,
+    $c-slider-label-letter-spacing: $label-letter-spacing,
+    $c-slider-label-color: $muted,
+    $c-slider-value-font-size: 1rem,
+    $c-slider-value-color: $text,
+
+    // Control: 44px minimum touch target, subtle 200ms motion
+    $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
+    $c-slider-track-height: 2px,
+    $c-slider-track-color: $muted,
+    $c-slider-track-fill-color: $black,
+    $c-slider-track-radius: $radius,
+
+    // Thumb: 20px black square with a 1px white border; slightly lighter on hover and active
+    $c-slider-thumb-size: 1.25rem,
+    $c-slider-thumb-color: $black,
+    $c-slider-thumb-color-hover: $primary-hover,
+    $c-slider-thumb-color-active: $primary-active,
+    $c-slider-thumb-border-width: 1px,
+    $c-slider-thumb-border-color: $white,
+    $c-slider-thumb-radius: $radius,
+
+    // Disabled: #a3a3a3 on a #d4d4d4 track
+    $c-slider-disabled-color: $disabled-text,
+    $c-slider-disabled-track-color: $disabled-border,
+    $c-slider-disabled-fill-color: $disabled-text,
+    $c-slider-disabled-thumb-color: $disabled-text,
+
+    // Focus: 1px black ring, offset from the thumb
+    $c-slider-focus-color: $focus-color,
+    $c-slider-focus-width: $focus-width,
+    $c-slider-focus-offset: 2px
+);
+
+@use '@carissa-io/components-popover/scss' as popover with (
+    // Panel: white, 1px #737373 border, square, flat (no shadow), 4px below the anchor
+    $c-popover-background: $white,
+    $c-popover-color: $text,
+    $c-popover-border-width: 1px,
+    $c-popover-border-color: $muted,
+    $c-popover-radius: $radius,
+    $c-popover-shadow: none,
+    $c-popover-offset: 0.5rem, // clears the half of a notched label that overhangs the field
+    $c-popover-fade-duration: $transition-duration
+);
+
+@use '@carissa-io/components-listbox/scss' as listbox with (
+    // Options: body text, 44px minimum touch target
+    $c-listbox-font-family: $font-family,
+    $c-listbox-font-size: 1rem,
+    $c-listbox-max-height: 15rem,
+    $c-listbox-option-color: $text,
+    $c-listbox-option-min-height: $min-height,
+    $c-listbox-option-padding-y: 0,
+    $c-listbox-option-padding-x: 0.75rem,
+    $c-listbox-option-transition: (background-color $transition-duration ease, color $transition-duration ease),
+
+    // Active: the hover surface
+    $c-listbox-option-active-color: $text,
+    $c-listbox-option-active-background: $surface,
+
+    // Selected: bold with a 2px black bar on the inline-start side
+    $c-listbox-option-selected-color: $text,
+    $c-listbox-option-selected-font-weight: 700,
+    $c-listbox-option-selected-marker-width: 2px,
+    $c-listbox-option-selected-marker-color: $black,
+
+    // Disabled and empty
+    $c-listbox-option-disabled-color: $disabled-text,
+    $c-listbox-empty-color: $muted,
+    $c-listbox-empty-padding: 0.75rem
+);
+
+// Select reuses the input look (configured above); it only adds the trigger and the arrow. Its index forwards the
+// input, popover and listbox styles, which are already loaded and configured by the blocks above: keep this block after them.
+@use '@carissa-io/components-select/scss' as select with (
+    // Trigger: body text, placeholder in the same muted tone as the input placeholder
+    $c-select-trigger-color: $text,
+    $c-select-placeholder-color: $muted,
+    $c-select-trigger-min-height: 1.5em,
+
+    // Arrow: shared with the Combobox
+    $c-select-arrow-size: $arrow-size,
+    $c-select-arrow-offset: $arrow-offset,
+    $c-select-arrow-color: $arrow-color,
+    $c-select-arrow-color-hover: $arrow-color-active,
+    $c-select-arrow-color-open: $arrow-color-active,
+    $c-select-arrow-color-disabled: $arrow-color-disabled,
+    $c-select-arrow-transition: $arrow-transition,
+    $c-select-arrow-rotate-open: $arrow-rotate-open,
+
+    // Open: the focused border
+    $c-select-open-border-color: $focus-color
+);
+
+// Combobox: the same field as Select with a text input in place of the button, and the same arrow. Its index forwards
+// the same input, popover and listbox styles, already loaded by the blocks above, so it must come after them (and
+// after Select, which forwards them too).
+@use '@carissa-io/components-combobox/scss' as combobox with (
+    // Text: body text; the placeholder stays the input's muted one
+    $c-combobox-color: $text,
+    $c-combobox-min-height: 1.5em,
+
+    // Arrow: shared with the Select
+    $c-combobox-arrow-size: $arrow-size,
+    $c-combobox-arrow-offset: $arrow-offset,
+    $c-combobox-arrow-color: $arrow-color,
+    $c-combobox-arrow-color-hover: $arrow-color-active,
+    $c-combobox-arrow-color-open: $arrow-color-active,
+    $c-combobox-arrow-color-disabled: $arrow-color-disabled,
+    $c-combobox-arrow-transition: $arrow-transition,
+    $c-combobox-arrow-rotate-open: $arrow-rotate-open
+);
+
+// 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
+    $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: $black,
+    $c-upload-dragging-background: $surface,
+
+    // Zone: a visible target with centered body text
+    $c-upload-zone-min-height: 5.5rem,
+    $c-upload-zone-padding: 0.75rem 0,
+    $c-upload-zone-color: $muted,
+    $c-upload-zone-text-align: center,
+
+    // Files: 44px rows split by a 1px light line
+    $c-upload-file-min-height: $min-height,
+    $c-upload-file-padding: 0,
+    $c-upload-file-separator-color: $surface-active,
+    $c-upload-file-name-font-size: 1rem,
+    $c-upload-file-name-color: $text,
+
+    // Remove button: 44px square, muted icon turning black, 1px black focus ring
+    $c-upload-remove-size: 2.75rem,
+    $c-upload-remove-color: $muted,
+    $c-upload-remove-color-hover: $black,
+    $c-upload-remove-radius: $radius,
+    $c-upload-remove-focus-color: $focus-color,
+    $c-upload-remove-focus-width: $focus-width,
+    $c-upload-remove-focus-offset: -1px
+);
+
+// Calendar: a standalone month grid (the date picker puts it inside the Popover panel, which brings its own border), so
+// it has no outer border. Days are 44px squares; the labels use the uppercase tracked 11px label style.
+@use '@carissa-io/components-calendar/scss' as calendar with (
+    // Typography
+    $c-calendar-font-family: $font-family,
+    $c-calendar-font-size: 1rem,
+    $c-calendar-transition: (background-color $transition-duration ease, color $transition-duration ease, border-color $transition-duration ease),
+
+    // Title: the label style, between the two 44px navigation buttons
+    $c-calendar-title-font-size: $label-font-size,
+    $c-calendar-title-font-weight: $label-font-weight,
+    $c-calendar-title-text-transform: uppercase,
+    $c-calendar-title-letter-spacing: $label-letter-spacing,
+    $c-calendar-title-color: $muted,
+
+    // Navigation: muted icon turning black, 1px black ring drawn inside
+    $c-calendar-nav-size: $min-height,
+    $c-calendar-nav-color: $muted,
+    $c-calendar-nav-color-hover: $black,
+    $c-calendar-nav-background-hover: transparent,
+    $c-calendar-nav-color-disabled: $disabled-text,
+    $c-calendar-nav-radius: $radius,
+    $c-calendar-nav-focus-color: $focus-color,
+    $c-calendar-nav-focus-width: $focus-width,
+    $c-calendar-nav-focus-offset: -1px,
+
+    // Weekday labels
+    $c-calendar-weekday-font-size: $label-font-size,
+    $c-calendar-weekday-font-weight: $label-font-weight,
+    $c-calendar-weekday-text-transform: uppercase,
+    $c-calendar-weekday-letter-spacing: $label-letter-spacing,
+    $c-calendar-weekday-color: $muted,
+
+    // Days: 44px squares in body text, light hover surface
+    $c-calendar-day-width: $min-height,
+    $c-calendar-day-height: $min-height,
+    $c-calendar-day-font-size: 1rem,
+    $c-calendar-day-color: $text,
+    $c-calendar-day-radius: $radius,
+    $c-calendar-day-color-hover: $text,
+    $c-calendar-day-background-hover: $surface,
+    $c-calendar-selected-color: $white,
+    $c-calendar-selected-background: $black,
+    $c-calendar-selected-border-color: $black,
+    $c-calendar-today-border-width: 1px,
+    $c-calendar-today-border-color: $black,
+    $c-calendar-disabled-color: $disabled-text,
+
+    // Focus: 1px black ring drawn inside the day so it is not clipped
+    $c-calendar-focus-color: $focus-color,
+    $c-calendar-focus-width: $focus-width,
+    $c-calendar-focus-offset: -1px
+);
+
+// Date picker: the Select field with a calendar panel and a calendar icon in place of the chevron (same muted icon that
+// turns black on hover and when open). Its index forwards input, popover and calendar, already configured above: keep
+// this block after them. The panel gets a little padding so the calendar does not touch the Popover's border.
+@use '@carissa-io/components-date-picker/scss' as date-picker with (
+    // Trigger: body text, placeholder in the same muted tone as the input placeholder
+    $c-date-picker-trigger-color: $text,
+    $c-date-picker-placeholder-color: $muted,
+    $c-date-picker-trigger-min-height: 1.5em,
+
+    // Panel
+    $c-date-picker-panel-padding: 0.5rem,
+
+    // Icon: the arrow's size, offset and colors, without the rotation
+    $c-date-picker-icon-size: $arrow-size,
+    $c-date-picker-icon-offset: $arrow-offset,
+    $c-date-picker-icon-color: $arrow-color,
+    $c-date-picker-icon-color-hover: $arrow-color-active,
+    $c-date-picker-icon-color-open: $arrow-color-active,
+    $c-date-picker-icon-color-disabled: $arrow-color-disabled,
+    $c-date-picker-icon-transition: color $transition-duration ease,
+
+    // Open: the focused border
+    $c-date-picker-open-border-color: $focus-color
+);
+
+// Search: the Input with a leading icon and a clear button built on the input's start/end slots. Its index forwards the
+// input styles, already configured above: keep this block after them. The icon is 20px muted (black while the field has
+// the focus); the clear icon is 16px muted turning black on hover.
+@use '@carissa-io/components-search/scss' as search with (
+    // Search icon
+    $c-search-icon-size: 1.25rem,
+    $c-search-icon-color: $muted,
+    $c-search-icon-color-focus: $black,
+
+    // Clear button
+    $c-search-clear-icon-size: 1rem,
+    $c-search-clear-color: $muted,
+    $c-search-clear-color-hover: $black,
+
+    // Motion
+    $c-search-transition: color $transition-duration ease
+);