@carissa-io/theme-default 0.3.12 → 0.3.14

package/DESIGN.md

@@ -270,6 +270,16 @@ The close button is a plain "x" in `--c-muted`, `--c-text` on hover, with the us
 components, and it is the same in both modes (it dims whatever mode the page is in). The box fades in and rises 0.5rem in `$transition-duration`; with reduced motion it
 just appears.
 
+**Scroll edges (Modal and Drawer).** The body scrolls between the header and the footer, so a long body used to be cut flush against the title and the buttons with nothing
+to show where the scroll area ends. The theme draws that edge: a **1px `--c-disabled-border` line** under the header and over the footer (the footer line exists only
+when there is a footer), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
+neutral border, not `--c-muted` (the Divider's 5.74:1 line would compete with the content and with the box border): on `--c-background` it is **1.48:1 in light**
+(`#d4d4d4` on `#fff`) and **1.91:1 in dark** (`#404040` on `#0a0a0a`). It is a decorative separator (the scroll position and the content are exposed by the scrollable region
+itself), so the 3:1 non-text minimum does not apply; the test only requires it to be distinguishable from the background (above 1.1:1) and records the two ratios,
+in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The unscrolled layout is the same as before:
+the header keeps 1.25rem above and 0.5rem below its content, and the body keeps the remaining 0.75rem (1.25rem less the 0.5rem gap) on each side, so the distance
+between the title and the content is still 1.25rem, now with the line inside it; a body without a header or without a footer keeps the whole 1.25rem on that side.
+
 ## Toast
 From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
 placements. The look of each toast is the Alert's (see above), so its colors, roles and contrast are the Alert's in both modes. The action is a bold, underlined
@@ -359,6 +369,7 @@ and `--c-text` for the current page (`aria-current="page"`). The content collaps
 From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
 (the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
 The panel slides in over `$transition-duration`; with reduced motion it just appears.
+The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, 1.48:1 light and 1.91:1 dark on `--c-background`.
 
 ## Menu
 From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`
@@ -428,6 +439,18 @@ 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

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`, `-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.

package/dist/index.css

@@ -1651,7 +1651,8 @@
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-modal__heading {
@@ -1692,9 +1693,17 @@
 .c-modal__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-modal__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-modal__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-modal__footer {
   display: flex;
@@ -1702,7 +1711,8 @@
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 @keyframes c-toast-enter {
@@ -3563,7 +3573,8 @@ hr.c-divider {
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-drawer__heading {
@@ -3604,9 +3615,17 @@ hr.c-divider {
 .c-drawer__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-drawer__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-drawer__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-drawer__footer {
   display: flex;
@@ -3614,7 +3633,8 @@ hr.c-divider {
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 .c-menu {
@@ -5282,3 +5302,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.12",
+  "version": "0.3.14",
   "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",
@@ -56,7 +56,7 @@
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-spinner": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-modal": "^0.1.2",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
@@ -74,7 +74,7 @@
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-list": "^0.1.0",
@@ -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": {
@@ -308,16 +324,18 @@
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@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-modal": "^0.1.2",
     "@carissa-io/components-navbar": "^0.1.0",
     "@carissa-io/components-number-input": "^0.1.0",
     "@carissa-io/components-otp-input": "^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

@@ -655,7 +655,8 @@
 // Modal: a box on the page background with a 1px muted border (the edge that still reads in dark, where a shadow is almost
 // invisible), the theme radius, and the same 1.5rem / 1.25rem padding as Card. The backdrop is the one literal color: black
 // at 50%, the same in both modes. Its index forwards the typography styles, already loaded and configured above, so this
-// block goes after the Typography one (and after Card, which forwards it too).
+// block goes after the Typography one (and after Card, which forwards it too). The scroll edges: a 1px --c-disabled-border line
+// under the header and over the footer (the clip edge of the scrolling body), with the component's default 0.5rem gaps.
 @use '@carissa-io/components-modal/scss' as modal with (
     $c-modal-background: $var-background,
     $c-modal-color: $var-text,
@@ -666,6 +667,10 @@
     $c-modal-padding-x: 1.5rem,
     $c-modal-padding-y: 1.25rem,
     $c-modal-gap: 1rem,
+    $c-modal-header-divider-width: 1px,
+    $c-modal-header-divider-color: $var-disabled-border,
+    $c-modal-footer-divider-width: 1px,
+    $c-modal-footer-divider-color: $var-disabled-border,
     $c-modal-margin: 1rem,
     $c-modal-width-sm: 24rem,
     $c-modal-width-md: 32rem,
@@ -1141,7 +1146,7 @@
 // Drawer: the Modal's box as a panel on the edge: --c-background with --c-text, a 1px --c-muted border (the edge that still
 // reads in dark), the same padding and the same close button. The backdrop is the one literal color, black at 50% in both
 // modes, and so is the shadow. Its index forwards the typography styles, already loaded and configured above: this block
-// goes after the Typography one.
+// goes after the Typography one. The scroll edges are the Modal's: 1px --c-disabled-border lines, default 0.5rem gaps.
 @use '@carissa-io/components-drawer/scss' as drawer with (
     $c-drawer-background: $var-background,
     $c-drawer-color: $var-text,
@@ -1152,6 +1157,10 @@
     $c-drawer-padding-x: 1.5rem,
     $c-drawer-padding-y: 1.25rem,
     $c-drawer-gap: 1rem,
+    $c-drawer-header-divider-width: 1px,
+    $c-drawer-header-divider-color: $var-disabled-border,
+    $c-drawer-footer-divider-width: 1px,
+    $c-drawer-footer-divider-color: $var-disabled-border,
     $c-drawer-size-sm: 20rem,
     $c-drawer-size-md: 28rem,
     $c-drawer-size-lg: 40rem,
@@ -1660,3 +1669,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
+);