@charcuterie/ui 2.1.0 → 2.2.0

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts

@@ -1,7 +1,7 @@
 import type { ColorSchemeApplier, ColorSchemePersistence, ColorSchemeResolver } from "@charcuterie/logic";
 import type { ReactNode } from "react";
 import type { ColorSchemeIcons, ColorSchemeToggleProps } from "../ColorSchemeToggle/ColorSchemeToggle.tsx";
-export type ColorSchemeSwitcherProps = Pick<ColorSchemeToggleProps, "appearance" | "className" | "isDisabled" | "label" | "order" | "size"> & {
+export type ColorSchemeSwitcherProps = Pick<ColorSchemeToggleProps, "appearance" | "className" | "intent" | "isDisabled" | "label" | "order" | "size"> & {
     /** Override where the resolved scheme is written. Default `<html>`. */
     apply?: ColorSchemeApplier;
     icons: ColorSchemeIcons;

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,4CAA4C,CAAA;AAGnD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACpB,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,CACT,GAAG;IACF,uEAAuE;IACvE,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,gBAAgB,CAAA;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,4EAQjC,wBAAwB,KAAG,SAsB7B,CAAA"}
+{"version":3,"file":"ColorSchemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,4CAA4C,CAAA;AAGnD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACpB,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,CACT,GAAG;IACF,uEAAuE;IACvE,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,gBAAgB,CAAA;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,4EAQjC,wBAAwB,KAAG,SAsB7B,CAAA"}

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeSwitcher.js","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA4C,CAAA;AA0B9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,GAAG,WAAW,EACW,EAAa,EAAE;IACxC,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,KAAK,IAAI,iBAAiB,EAAE;QACnC,WAAW,EACT,WAAW,IAAI,uBAAuB,CAAC,UAAU,CAAC;QACpD,QAAQ,EAAE,QAAQ,IAAI,kBAAkB,EAAE;KAC3C,CAAC,CAAC,CAAA;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC;QACrC,GAAG,KAAK;QACR,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,iBAAiB,OACZ,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ColorSchemeSwitcher.js","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA4C,CAAA;AA2B9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,GAAG,WAAW,EACW,EAAa,EAAE;IACxC,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,KAAK,IAAI,iBAAiB,EAAE;QACnC,WAAW,EACT,WAAW,IAAI,uBAAuB,CAAC,UAAU,CAAC;QACpD,QAAQ,EAAE,QAAQ,IAAI,kBAAkB,EAAE;KAC3C,CAAC,CAAC,CAAA;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC;QACrC,GAAG,KAAK;QACR,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,iBAAiB,OACZ,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts

@@ -1,5 +1,5 @@
 import type { ColorSchemeMode } from "@charcuterie/logic";
-import type { ControlSize } from "@charcuterie/tokens";
+import type { ControlSize, IntentName } from "@charcuterie/tokens";
 import type { ReactNode } from "react";
 import type { IntentAppearance } from "../intentStyles.ts";
 /**
@@ -14,6 +14,15 @@ export type ColorSchemeToggleProps = {
     appearance?: IntentAppearance;
     className?: string;
     icons: ColorSchemeIcons;
+    /**
+     * The intent (tone) forwarded to the underlying `IconButton` — the
+     * same union `Button`/`IconButton` accept. **Defaults to `neutral`**,
+     * not `accent`: a scheme switcher is toolbar chrome, so its ghost
+     * hover reads as `hover:bg-intent-neutral-surface` and its icon as
+     * `text-intent-neutral-content` rather than accent-violet. Pass
+     * `intent="accent"` (or any tone) to make it an accent action.
+     */
+    intent?: IntentName;
     isDisabled?: boolean;
     /**
      * Builds the accessible name from the current and next mode.
@@ -50,5 +59,5 @@ export type ColorSchemeToggleProps = {
  * shaped so a `ColorSchemePicker` could join later without changing
  * this API.
  */
-export declare const ColorSchemeToggle: ({ appearance, className, icons, isDisabled, label, mode, onCycle, order, size, }: ColorSchemeToggleProps) => ReactNode;
+export declare const ColorSchemeToggle: ({ appearance, className, icons, intent, isDisabled, label, mode, onCycle, order, size, }: ColorSchemeToggleProps) => ReactNode;
 //# sourceMappingURL=ColorSchemeToggle.d.ts.map

package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAKzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CACnC,eAAe,EACf,SAAS,CACV,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,gBAAgB,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,CACN,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,eAAe,KACtB,MAAM,CAAA;IACX,IAAI,EAAE,eAAe,CAAA;IACrB;;;;;;;OAOG;IACH,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,kFAU/B,sBAAsB,KAAG,SAiB3B,CAAA"}
+{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAKzD,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CACnC,eAAe,EACf,SAAS,CACV,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,gBAAgB,CAAA;IACvB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,CACN,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,eAAe,KACtB,MAAM,CAAA;IACX,IAAI,EAAE,eAAe,CAAA;IACrB;;;;;;;OAOG;IACH,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,0FAW/B,sBAAsB,KAAG,SAkB3B,CAAA"}

package/dist/ColorSchemeToggle/ColorSchemeToggle.js

@@ -21,9 +21,9 @@ const defaultLabel = (mode, nextMode) => `Colour scheme: ${MODE_LABEL[mode]}. Ac
  * shaped so a `ColorSchemePicker` could join later without changing
  * this API.
  */
-export const ColorSchemeToggle = ({ appearance = "ghost", className, icons, isDisabled = false, label = defaultLabel, mode, onCycle, order = DEFAULT_COLOR_SCHEME_ORDER, size = "md", }) => {
+export const ColorSchemeToggle = ({ appearance = "ghost", className, icons, intent = "neutral", isDisabled = false, label = defaultLabel, mode, onCycle, order = DEFAULT_COLOR_SCHEME_ORDER, size = "md", }) => {
     const nextMode = nextColorSchemeMode(mode, order);
-    return (_jsx(IconButton, { appearance: appearance, className: className, isDisabled: isDisabled, label: label(mode, nextMode), onClick: () => {
+    return (_jsx(IconButton, { appearance: appearance, className: className, intent: intent, isDisabled: isDisabled, label: label(mode, nextMode), onClick: () => {
             onCycle(nextMode);
         }, size: size, children: icons[mode] }));
 };

package/dist/ColorSchemeToggle/ColorSchemeToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeToggle.js","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AA6CzD,MAAM,UAAU,GAAoC;IAClD,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,YAAY,GAAG,CACnB,IAAqB,EACrB,QAAyB,EACzB,EAAE,CACF,kBAAkB,UAAU,CAAC,IAAI,CAAC,2BAA2B,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAA;AAEtF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,UAAU,GAAG,OAAO,EACpB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,YAAY,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,0BAA0B,EAClC,IAAI,GAAG,IAAI,GACY,EAAa,EAAE;IACtC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,KAAC,UAAU,IACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,QAAQ,CAAC,CAAA;QACnB,CAAC,EACD,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,IAAI,CAAC,GACD,CACd,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ColorSchemeToggle.js","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AAsDzD,MAAM,UAAU,GAAoC;IAClD,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,YAAY,GAAG,CACnB,IAAqB,EACrB,QAAyB,EACzB,EAAE,CACF,kBAAkB,UAAU,CAAC,IAAI,CAAC,2BAA2B,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAA;AAEtF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,UAAU,GAAG,OAAO,EACpB,SAAS,EACT,KAAK,EACL,MAAM,GAAG,SAAS,EAClB,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,YAAY,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,0BAA0B,EAClC,IAAI,GAAG,IAAI,GACY,EAAa,EAAE;IACtC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,KAAC,UAAU,IACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,QAAQ,CAAC,CAAA;QACnB,CAAC,EACD,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,IAAI,CAAC,GACD,CACd,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx

@@ -18,6 +18,12 @@ follows the OS, remembers the user's choice, and re-themes with zero React re-re
 
 <Controls />
 
+## Tone is neutral chrome
+
+Like `ColorSchemeToggle`, this forwards `intent="neutral"` to the button by default — a
+scheme switcher is chrome, not an accent action, so its ghost hover is the neutral surface
+rather than accent-violet. Pass `intent` (any tone `Button` accepts) to change it.
+
 ## Every seam is overridable — that is the point
 
 `resolver`, `persistence`, and `apply` all default to the browser implementations but can be

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx

@@ -51,3 +51,15 @@ test("cycling to a concrete mode re-applies the scheme", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("the connected switcher forwards the neutral intent by default", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const button = canvasElement.querySelector("button")
+
+  // Chrome, not an accent action — the hover is the neutral surface.
+  expect(button?.className).toContain(
+    "hover:bg-intent-neutral-surface",
+  )
+  expect(button?.className).not.toContain("intent-accent")
+})

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx

@@ -22,6 +22,7 @@ export type ColorSchemeSwitcherProps = Pick<
   ColorSchemeToggleProps,
   | "appearance"
   | "className"
+  | "intent"
   | "isDisabled"
   | "label"
   | "order"

package/src/ColorSchemeToggle/ColorSchemeToggle.mdx

@@ -39,6 +39,18 @@ rather than a nameless button.
 
 <Canvas of={ColorSchemeToggleStories.AllModes} />
 
+## Intent is `neutral`, not accent
+
+`intent` is the same tone union `Button`/`IconButton` accept, and it **defaults to
+`neutral`** here on purpose. A scheme switcher is toolbar chrome, so its ghost hover reads
+as `hover:bg-intent-neutral-surface` and its icon as `text-intent-neutral-content` —
+chrome, not a violet accent action. `IconButton`'s own default is `accent`, which on real
+app chrome made this control look like a call-to-action; forwarding `neutral` is the fix,
+and it means a consumer no longer needs an `!important` className to tone it down. Pass
+`intent="accent"` (or any tone) to opt back in.
+
+<Canvas of={ColorSchemeToggleStories.Intents} />
+
 ## Cycling is the only form, for now
 
 A segmented, all-three-visible `ColorSchemePicker` was considered and deferred (owner chose

package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx

@@ -2,7 +2,10 @@ import type { ColorSchemeMode } from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
-import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
+import {
+  controlSizeArgType,
+  intentArgType,
+} from "../argTypes.storyHelpers.ts"
 import {
   ContainerBoard,
   StoryCell,
@@ -34,6 +37,7 @@ const meta = {
   component: ColorSchemeToggle,
   parameters: { layout: "padded" },
   argTypes: {
+    intent: intentArgType,
     // `mode` is `ColorSchemeMode` from @charcuterie/logic — a bare
     // specifier docgen cannot enumerate, so it gets an explicit
     // radio rather than falling through to the object control.
@@ -46,6 +50,7 @@ const meta = {
   args: {
     appearance: "ghost",
     icons: ICONS,
+    intent: "neutral",
     isDisabled: false,
     mode: "system",
     onCycle: () => {},
@@ -117,6 +122,39 @@ export const AllModes: Story = {
   ),
 }
 
+/**
+ * The tone is **neutral by default** — a scheme switcher is toolbar
+ * chrome, so its ghost hover is `hover:bg-intent-neutral-surface` and
+ * its icon `text-intent-neutral-content`, which read as chrome on a
+ * normal surface rather than as an accent action. A consumer that
+ * wants it to draw attention passes `intent="accent"` (or any tone).
+ */
+export const Intents: Story = {
+  render: (toggleProps) => (
+    <StorySection title="neutral (default) vs an explicit accent override.">
+      <StoryGrid columns={2}>
+        <StoryCell label="intent=neutral (default)">
+          <ColorSchemeToggle
+            {...toggleProps}
+            intent="neutral"
+            mode="system"
+            onCycle={() => {}}
+          />
+        </StoryCell>
+
+        <StoryCell label="intent=accent">
+          <ColorSchemeToggle
+            {...toggleProps}
+            intent="accent"
+            mode="system"
+            onCycle={() => {}}
+          />
+        </StoryCell>
+      </StoryGrid>
+    </StorySection>
+  ),
+}
+
 export const Sizes: Story = {
   render: (toggleProps) => (
     <StorySection title="Square on the control height, so it lines up with the buttons beside it in a toolbar.">

package/src/ColorSchemeToggle/ColorSchemeToggle.test.tsx

@@ -1,11 +1,14 @@
-import { composeStories } from "@storybook/react"
-import { userEvent } from "storybook/test"
+import {
+  composeStories,
+  composeStory,
+} from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
 import { test } from "vitest"
 
 import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
-import * as stories from "./ColorSchemeToggle.stories.tsx"
+import meta, * as stories from "./ColorSchemeToggle.stories.tsx"
 
 const { AllModes, Default } = composeStories(stories)
 
@@ -78,3 +81,36 @@ test("each mode renders its own control", async () => {
     role: "button",
   })
 })
+
+/**
+ * The fix: the switcher is chrome, so it forwards `neutral` to the
+ * button by default — a neutral ghost hover
+ * (`hover:bg-intent-neutral-surface`) and a neutral icon colour,
+ * rather than `IconButton`'s accent default that read as a violet
+ * action on real app chrome.
+ */
+test("defaults to the neutral intent, not accent", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const button = canvasElement.querySelector("button")
+
+  expect(button?.className).toContain(
+    "hover:bg-intent-neutral-surface",
+  )
+  expect(button?.className).not.toContain("intent-accent")
+})
+
+test("an explicit intent overrides the default", async () => {
+  const AccentToggle = composeStory(
+    { args: { intent: "accent" } },
+    meta,
+  )
+
+  const { canvasElement } = await mountStory(AccentToggle)
+
+  const button = canvasElement.querySelector("button")
+
+  expect(button?.className).toContain(
+    "hover:bg-intent-accent-surface",
+  )
+})

package/src/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -3,7 +3,10 @@ import {
   DEFAULT_COLOR_SCHEME_ORDER,
   nextColorSchemeMode,
 } from "@charcuterie/logic"
-import type { ControlSize } from "@charcuterie/tokens"
+import type {
+  ControlSize,
+  IntentName,
+} from "@charcuterie/tokens"
 import type { ReactNode } from "react"
 
 import { IconButton } from "../IconButton/IconButton.tsx"
@@ -25,6 +28,15 @@ export type ColorSchemeToggleProps = {
   appearance?: IntentAppearance
   className?: string
   icons: ColorSchemeIcons
+  /**
+   * The intent (tone) forwarded to the underlying `IconButton` — the
+   * same union `Button`/`IconButton` accept. **Defaults to `neutral`**,
+   * not `accent`: a scheme switcher is toolbar chrome, so its ghost
+   * hover reads as `hover:bg-intent-neutral-surface` and its icon as
+   * `text-intent-neutral-content` rather than accent-violet. Pass
+   * `intent="accent"` (or any tone) to make it an accent action.
+   */
+  intent?: IntentName
   isDisabled?: boolean
   /**
    * Builds the accessible name from the current and next mode.
@@ -81,6 +93,7 @@ export const ColorSchemeToggle = ({
   appearance = "ghost",
   className,
   icons,
+  intent = "neutral",
   isDisabled = false,
   label = defaultLabel,
   mode,
@@ -94,6 +107,7 @@ export const ColorSchemeToggle = ({
     <IconButton
       appearance={appearance}
       className={className}
+      intent={intent}
       isDisabled={isDisabled}
       label={label(mode, nextMode)}
       onClick={() => {