> ## Documentation Index > Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt > Use this file to discover all available pages before exploring further. # @servicetitan/carto-tokens > Release notes for @servicetitan/carto-tokens, newest first. Current version: **0.4.7**. Source: [`packages/carto-tokens/CHANGELOG.md`](https://github.com/servicetitan/hammer/blob/main/packages/carto-tokens/CHANGELOG.md). ## 0.4.7 ### Patch Changes * [#3064](https://github.com/servicetitan/hammer/pull/3064) [`3e36538`](https://github.com/servicetitan/hammer/commit/3e36538671898869a4298df2fd7563490338dcd2) Thanks [@rollsroyc3](https://github.com/rollsroyc3)! - \[Tokens] Add `text.highlight.backgroundFallback`, a solid stand-in for `text.highlight.background` (web's gradient) on React Native, Swift, and Kotlin, which cannot render it. \[Text] Consume `backgroundFallback` for the `highlighted` prop's background instead of a hardcoded `rgba(188, 226, 234, 0.4)` literal. ## 0.4.6 ### Minor Changes * [#2932](https://github.com/servicetitan/hammer/pull/2932) [`5a21d98`](https://github.com/servicetitan/hammer/commit/5a21d983676ac8686b864917484bc4267a6533b8) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - \[Tokens] Add a web-only `gradient` `$type` for linear gradient tokens * [#2932](https://github.com/servicetitan/hammer/pull/2932) [`5a21d98`](https://github.com/servicetitan/hammer/commit/5a21d983676ac8686b864917484bc4267a6533b8) Thanks [@pbuckingham-st](https://github.com/pbuckingham-st)! - \[DiffValue, Text, TruncatedText] Change the suggested-change highlight fill to a blue-to-cyan gradient ### Patch Changes * [#2922](https://github.com/servicetitan/hammer/pull/2922) [`65336ab`](https://github.com/servicetitan/hammer/commit/65336abcfa13379fa8d16c4708fdc645b41cf1da) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Remove unused Button elevation and zero-width border tokens now that both kits are flat and borderless ## 0.4.5 ### Minor Changes * [#2862](https://github.com/servicetitan/hammer/pull/2862) [`dc20f1d`](https://github.com/servicetitan/hammer/commit/dc20f1d557528a5a7febff5925de6cdedbef41bc) Thanks [@rollsroyc3](https://github.com/rollsroyc3)! - \[Button] Add the `large` size and the `danger-secondary` variant to the React Native kit, with the `critical-subdued` semantic intents behind them. ## 0.4.4 ### Minor Changes * [#2828](https://github.com/servicetitan/hammer/pull/2828) [`24c1d47`](https://github.com/servicetitan/hammer/commit/24c1d470bb1d840a8e6e10bdf9ec7c2d02c47358) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Add a mobile theme overlay so React Native, Swift, and Kotlin can override token values independently of web, fully round `button.radius`, and emit `radius.contained` on Swift and Kotlin. ## 0.4.3 ### Patch Changes * [#2799](https://github.com/servicetitan/hammer/pull/2799) [`64cea5c`](https://github.com/servicetitan/hammer/commit/64cea5cc6bae3750031164190fff1f38d07ba513) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Align checkbox selected fill with primary button blue (`color.blue.600`) ## 0.4.2 ### Minor Changes * [#2729](https://github.com/servicetitan/hammer/pull/2729) [`84ff49a`](https://github.com/servicetitan/hammer/commit/84ff49a85f39dfb2c43219a1d67eae5e16078a02) Thanks [@jpex](https://github.com/jpex)! - \[Suggestion] Restyle the chip surface to match Card — standard fill, 1px standard border, and hover-only ambient elevation ## 0.4.1 ### Patch Changes * [#2669](https://github.com/servicetitan/hammer/pull/2669) [`21efe99`](https://github.com/servicetitan/hammer/commit/21efe990377cc5b6f154d2e37286374995b71aa4) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Fix two latent build-pipeline bugs found during review. `normalizeFlatTokens`'s `chainsAppearance` propagation was a single forward sweep over the token array instead of a fixed point, so a same-tier transitive alias chain of three or more hops could fail to propagate depending on declaration order. The only consumer, the Kotlin emitter, uses this flag to pick a token's declared type — a false negative would emit a `val` whose declared type doesn't match the value it points to, which doesn't compile. Separately, `emitReactNativeFile` inlined semantic-to-semantic self-referencing aliases to avoid a self-referential `const` initializer, but never applied the same guard to component-to-component aliases — an alias between two component tokens would generate a `const` that references itself inside its own initializer, throwing a `ReferenceError` at module load. Neither bug is triggered by any token currently in `src/`, so this release's generated output is unchanged. Both are correctness fixes to the pipeline itself, each covered by a new regression test. * [#2669](https://github.com/servicetitan/hammer/pull/2669) [`21efe99`](https://github.com/servicetitan/hammer/commit/21efe990377cc5b6f154d2e37286374995b71aa4) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - Publish `@servicetitan/carto-tokens` from the Hammer monorepo. The package moved here as a fresh import from the carto repo at `8dc7f861`, at the same 0.4.0 it was last published from carto. Token values, exports, and the `--carto-*` variable namespace are all unchanged — this is a change of publishing origin, not of anything a consumer imports. A patch is therefore the honest bump: the next release exists only so Hammer's pipeline can take over from carto's, and consumers upgrading from 0.4.0 get identical output. ## 0.4.0 ### Major Changes * [#288](https://github.com/servicetitan/carto/pull/288) [`aa78524`](https://github.com/servicetitan/carto/commit/aa78524fdf7519c8b290feb226afd99753993bed) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - **Do not use the previous version in this package’s changelog.** For packages versioned in [#287](https://github.com/servicetitan/carto/pull/287), that entry was merged to `main` but never successfully published (`@servicetitan/anvil2-charts-kit@0.0.2`, `@servicetitan/anvil2-rn-charts-kit@0.1.0`, `@servicetitan/anvil2-ai-kit@0.8.4`, `@servicetitan/anvil2-rn@0.0.10`). Several of those numbers (and other unpublished builds) are permanently reserved after a security-related npm unpublish and cannot be republished. Bump package versions past the reserved numbers. Upgrade to the versions from this release; do not pin to the removed or unpublished ones. ### Minor Changes * [#283](https://github.com/servicetitan/carto/pull/283) [`debb29f`](https://github.com/servicetitan/carto/commit/debb29f5f711570b9666d937c523924f026f47ef) Thanks [@ericag1985](https://github.com/ericag1985)! - \[tooltip] Restyle the tooltip surface to the new Carto design — a blue 900 background and an 8px corner radius ## 0.3.0 ### Major Changes * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Rename `font.family.satoshi` primitive to `font.family.sofia` (now `["Sofia Pro", "system-ui", "sans-serif"]`); consumers referencing `primitive.font.family.satoshi` directly must switch to `primitive.font.family.sofia` ### Minor Changes * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Add `component.suggestion.background` and `component.tabbedLayout.tab.background` (resting/hover, aliasing the same subtle wash as `button.secondary`); repoint `component.userMessage.bubble.background` to the same wash ### Patch Changes * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Button] Update `button.primary` and `button.secondary` component tokens for new visual treatment * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Remove unused `card.elevation.resting`; add `card.border.color` and `card.border.width` * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Update `typography.fontFamily.expressive` to resolve to Sofia Pro and consolidate all `text.headline.*` (regular/substantial/major/hero) `fontWeight` aliases to `typography.weight.emphatic` (Bold), matching the Sofia Pro Bold-only headline treatment * [#246](https://github.com/servicetitan/carto/pull/246) [`ced2173`](https://github.com/servicetitan/carto/commit/ced2173c1cf6231d1de1c50032f40775e147eb6a) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Add `text.highlight.background` component token, aliasing `background.color.informative-subdued.resting` ## 0.2.4 ### Minor Changes * [#236](https://github.com/servicetitan/carto/pull/236) [`15a46a4`](https://github.com/servicetitan/carto/commit/15a46a4b9aa6cb1c0bccd64c478b66da53d59e45) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Tokens] Add `component.button.toggle.selected` tokens for ButtonToggle's resting, hover, and pressed selected state ## 0.2.3 ### Minor Changes * [#174](https://github.com/servicetitan/carto/pull/174) [`78d6ae5`](https://github.com/servicetitan/carto/commit/78d6ae5f758a8f9b86bf272e5b7d64cde62dd745) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Add semantic component tokens for GuidanceCard spacing, reason callout, and actions * [#171](https://github.com/servicetitan/carto/pull/171) [`6c6b726`](https://github.com/servicetitan/carto/commit/6c6b726c5e0bfab02407256bb0663946300accc2) Thanks [@tounsoo](https://github.com/tounsoo)! - Add a React Native token output target. `@servicetitan/carto-tokens/react-native` exports `light` and `dark` theme bundles (each with `primitive`/`semantic`/`component` tiers) as plain `as const` objects, plus a `CartoTheme` type. Dimensions are unitless numbers, alpha is baked into `#rrggbbaa`, shadows are `boxShadow` strings, and appearance is pre-resolved into the two bundles — select via `useColorScheme()`. ### Patch Changes * [#174](https://github.com/servicetitan/carto/pull/174) [`78d6ae5`](https://github.com/servicetitan/carto/commit/78d6ae5f758a8f9b86bf272e5b7d64cde62dd745) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Add semantic tokens for presentational table surfaces, borders, and cell spacing ## 0.2.2 ### Minor Changes * [#180](https://github.com/servicetitan/carto/pull/180) [`4ef1ee7`](https://github.com/servicetitan/carto/commit/4ef1ee7fa95ce6107f0a9cbed777c30acca76777) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Checkbox] Add component tokens * [#181](https://github.com/servicetitan/carto/pull/181) [`49af511`](https://github.com/servicetitan/carto/commit/49af5112602a581fd5cbc2f3c5ec1a367f0a4596) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Add `diffValue` component tokens. * [#179](https://github.com/servicetitan/carto/pull/179) [`6a85b82`](https://github.com/servicetitan/carto/commit/6a85b8293d826f25f7023b2daf92188067f9cc50) Thanks [@w-a-t-s-o-n](https://github.com/w-a-t-s-o-n)! - \[Tokens] Add `text.highlight` component tokens for suggested-change surface styling. ### Patch Changes * [#145](https://github.com/servicetitan/carto/pull/145) [`4fc2468`](https://github.com/servicetitan/carto/commit/4fc2468112962b2afe481f8c4d2f33764322a490) Thanks [@tounsoo](https://github.com/tounsoo)! - \[AppShell, BottomSheet, Button, Card, Citation, Dialog, Link, Menu, PromptBar, TabbedLayout, UserMessage, Window] Drive motion from semantic motion tokens instead of inlined curves. Hover/press/focus acknowledgments now use the faster `feedback` duration (100ms, down from 200ms), panel and overlay transitions use the `emphasis` duration with directional `enter`/`exit` easing, and easing curves shift to the semantic motion values. Animation timings and curves change as a result. \[Tokens] Retarget the `bottom-sheet` and `dialog` focus-ring `transition.duration` from `motion.duration.transition` to `motion.duration.feedback` (200ms to 100ms). * [#185](https://github.com/servicetitan/carto/pull/185) [`b9aed02`](https://github.com/servicetitan/carto/commit/b9aed02263db7868f8bec1a2a7b59ac582368f43) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `agentThinking.gap` and `agentThinking.foreground` component tokens * [#190](https://github.com/servicetitan/carto/pull/190) [`ab27e8c`](https://github.com/servicetitan/carto/commit/ab27e8c80431cadb0b1c1f42c17eaebf5fe88fa6) Thanks [@ericag1985](https://github.com/ericag1985)! - \[Button] Button label text now renders in medium weight (Inter Medium). ## 0.2.1 ### Minor Changes * [#160](https://github.com/servicetitan/carto/pull/160) [`8d837f1`](https://github.com/servicetitan/carto/commit/8d837f16e01a56166a47db15811d0325a28e8651) Thanks [@tounsoo](https://github.com/tounsoo)! - Citation now renders a 1px solid white hairline border. Adds a new `citation.border.color` component token that aliases primitive neutral 0 (white) directly, so the border stays white in both light and dark appearances. * [#162](https://github.com/servicetitan/carto/pull/162) [`d6044e5`](https://github.com/servicetitan/carto/commit/d6044e5282c708b8065020f22779eabcd72c133e) Thanks [@tounsoo](https://github.com/tounsoo)! - Tokenize PromptInput and the AgentPrompt header foreground. * **carto-tokens** — adds `agentPrompt.header.foreground` (aliases `foreground.color.standard`) and a new `prompt-input.tokens.json` with `promptInput.font` (composite typography), `promptInput.foreground`, `promptInput.placeholder.foreground`, and `promptInput.disabled.foreground`. * **carto-react-kit** — wires the AgentPrompt question heading to the new header token, and routes PromptInput's text, placeholder, disabled, and typography through the new component tokens (previously raw `primitive.font.*` and direct `semantic.*` references). All values are unchanged, so there is no visual change. ### Patch Changes * [#138](https://github.com/servicetitan/carto/pull/138) [`cb8458d`](https://github.com/servicetitan/carto/commit/cb8458ddfc8d297bf151bf5e4738933a08a74627) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Replace Style Dictionary with a native build pipeline. Token output is byte-for-byte identical, so there is no consumer-facing change. * [#163](https://github.com/servicetitan/carto/pull/163) [`fd6c97e`](https://github.com/servicetitan/carto/commit/fd6c97e6a8658c40ee63ce89d11ec6fc302c7208) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Author `font.family.*` as ordered DTCG font stacks (arrays). Web joins the stack into a CSS `font-family` list (output unchanged), while Figma, Swift, and Kotlin now take the primary family only instead of the full comma-separated string. ## 0.2.0 ### Major Changes * [#125](https://github.com/servicetitan/carto/pull/125) [`42b5ac6`](https://github.com/servicetitan/carto/commit/42b5ac60887062a7a724858472e62d2defbc060e) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Group the semantic motion tokens under a single `motion` namespace. The `duration`, `scale`, and `easing` semantic groups are consolidated into one `motion.tokens.json` and nested as `motion.duration.*`, `motion.scale.*`, and `motion.easing.*`. Their previous top-level names collided conceptually with the primitive `duration`/`scale` ramps and implied generic, non-motion use; grouping them under `motion` matches the existing semantic-naming convention (`size` → `spacing`, `color` → `background`) and frees the top-level `duration`/`scale` namespaces for future non-motion intents. BREAKING: consumers must migrate `duration.*` → `motion.duration.*`, `scale.*` → `motion.scale.*`, and `easing.*` → `motion.easing.*`. Web: `--ct-duration-*`/`--ct-scale-*`/`--ct-easing-*` become `--ct-motion-duration-*`/`--ct-motion-scale-*`/`--ct-motion-easing-*`. Swift/Kotlin: `Semantic.{Duration,Scale,Easing}` move under `Semantic.Motion.{Duration,Scale,Easing}`. The primitive `duration`/`scale` ramps are unchanged. ### Minor Changes * [#123](https://github.com/servicetitan/carto/pull/123) [`c8b8b28`](https://github.com/servicetitan/carto/commit/c8b8b28b7d8e731547aad8f588c73090975f1d9a) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `agentPrompt.*` component tokens for the AgentPrompt surface — the card (`background`, `border.color`, `radius`, `elevation`, `padding`, `gap`), region spacing (`header.gap`, `options.gap`, `actions.gap`), the option rows (`option.background.{resting,hover,pressed}`, `option.foreground`, `option.padding`, `option.radius`, `option.selected.border.color`), the multi-select checkbox indicator (`checkbox.border.color`, `checkbox.foreground`, `checkbox.selected.background`), the step counter (`stepCount.foreground`), and the empty-answer error (`error.foreground`, `error.gap`), each aliasing the semantic tier. Also adds a semantic `opacity.disabled` (0.6) token. `AgentPrompt` now consumes these via the `component.agentPrompt.*` proxy instead of reaching into `semantic.*` directly. As part of this: * Option rows are now proper interactive surfaces: their background uses `background.color.subtle.{resting,hover,pressed}` (replacing the prior translucent `rgba(4,4,4,…)` fills) with the paired `foreground.color.on.subtle` text color. * The disabled-dim opacity is now the shared `opacity.disabled` token; the option rows shift from `0.5` to the system `0.6`. * The focus ring adopts the semantic focus tier (`focus.width` / `focus.color` / `focus.offset`), shifting the ring thickness from a hard-coded 2px to the system 3px. * [#139](https://github.com/servicetitan/carto/pull/139) [`ca506f0`](https://github.com/servicetitan/carto/commit/ca506f07d577bceb3e2d813d2040672b9a01eadd) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `artifactCard.*` component tokens for the ArtifactCard surface — `foreground` (the title/description/arrow color, aliasing `foreground.color.standard`), `gap` (the horizontal rhythm between the lead cluster and the trailing arrow, and between the icon and text, aliasing `spacing.base`), and `text.gap` (the title↔description lockup, aliasing `spacing.micro`). `ArtifactCard` now consumes these via the `component.artifactCard.*` proxy instead of reaching into `semantic.*`/`primitive.*` directly. No visual change: the title↔description gap was already 4px (`primitive.size["100"]`), now expressed as the matching `spacing.micro` intent. * [#126](https://github.com/servicetitan/carto/pull/126) [`d5c6c81`](https://github.com/servicetitan/carto/commit/d5c6c8177f418350ac7a720694065724fc255f24) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add the `bottomSheet` component token set, aliasing the semantic tier: `surface.{background,foreground,radius,elevation}`, `padding.{inline,block.end}`, `gap`, `header.{gap,padding.inline}`, `subheader.foreground`, `handle.padding.block.{start,end}`, `handle.grip.{width,height,radius,background}`, `focus.ring.{color,width,offset}`, and `focus.ring.transition.{duration,easing}` (aliasing `motion.duration.transition` / `motion.easing.transition` — the everyday color-shift motion intent; `excludePlatforms: figma`). `handle.grip.background` is a provisional gap (primitive `{color.neutral.400}` — no foreground/handle intent matches it yet); `handle.grip.{width,height}` are intentional primitives (`{size.900}` / `{size.100}`). \[React Kit] `BottomSheet` now consumes its `component.bottomSheet.*` tokens instead of inline semantic/primitive literals. Visual changes adopted from the token mappings: top corners use the large-container `radius.generous` (24px, up from 12px); the surface elevation and text pair with the standard surface; the drag-handle focus-ring offset normalizes to the system 2px (was 4px); and the now-shipped `focus.*` tokens back both the grip and body focus rings. The vestigial 1px top hairline (not in the Figma spec) is removed — the drop shadow alone separates the sheet from the backdrop. The shared modal backdrop now consumes `semantic.scrim.color` (no visual change). The body focus-ring fade now consumes `focus.ring.transition.{duration,easing}` (`200ms` / `cubic-bezier(0.4, 0, 0.2, 1)`); its easing adopts the `motion.easing.transition` curve, shifting from the kit's inline `[0,0,0.4,1]` — making BottomSheet the first consumer of the motion tokens. * [#108](https://github.com/servicetitan/carto/pull/108) [`011c6ea`](https://github.com/servicetitan/carto/commit/011c6ea4db1eda1369ddca954ff248919790f9a7) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add per-variant `button..border.width` tokens (`secondary` → `size.25` / 1px, `primary` / `ghost` / `danger` → `size.0`) so the borderless variants gain border capability without changing their current footprint. `Button`'s `secondary` variant now consumes its width token directly — replacing the prior hard-coded `1px` literal — and subtracts it from the padding so the bordered variant keeps the same outer size as the borderless ones (which stay at `border-width: 0`). * [#135](https://github.com/servicetitan/carto/pull/135) [`c00c7d5`](https://github.com/servicetitan/carto/commit/c00c7d50dcb0e75dfb57029c326d5ebc6f1368f4) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add the `card` component token set, aliasing the semantic tier: `card.background.{resting,hover}` (`{background.color.standard.*}`), `card.radius` (`{radius.moderate}`), `card.elevation.{resting,hover}` (`{shadow.ambient.resting}` / `{shadow.ambient.hover}`), `card.padding.{snug,base,relaxed}` (`{spacing.*}`), and `card.focus.ring.{color,width,offset}` (`{focus.*}`). No visual change — these formalize the values `Card` already uses (resting + hover elevation now route through the `shadow.ambient` family). \[React Kit] `Card.css.ts` now consumes `component.card.*` instead of reaching into `semantic.*` directly. The disabled state consumes `semantic.opacity.disabled`, and the in-place transition consumes `semantic.motion.duration.transition` + `semantic.motion.easing.transition` — adopting the semantic ease-in-out curve (`cubic-bezier(0.4, 0, 0.2, 1)`) in place of the prior inlined `cubic-bezier(0, 0, 0.4, 1)` (duration unchanged at 200ms). Only the highlight gradient remains inline as a flagged gap (gradients have no DTCG representation). * [#128](https://github.com/servicetitan/carto/pull/128) [`df50037`](https://github.com/servicetitan/carto/commit/df50037811be0b22413aa28f9b608fae091d2e1f) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Citation] Add `citation` component tokens aliasing the semantic tier: background (resting `subtle`, hover `informative-subdued`), foreground (resting `standard`, hover `informative`), composite `font` typography, `gap`, inline `padding`, `radius`, and the `focus.ring` (color/width/offset). Light/dark inherits from the semantic aliases. * [#137](https://github.com/servicetitan/carto/pull/137) [`ec0c239`](https://github.com/servicetitan/carto/commit/ec0c23959e3457677c93465f7e249f3d70c8d1eb) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add the `dialog` component token set, aliasing the semantic tier: `overlay.padding`, `surface.{background,foreground,border.color,border.width,radius,elevation}`, `padding`, `gap`, `header.gap`, `footer.gap`, `focus.ring.{color,width,offset}`, and `focus.ring.transition.{duration,easing}` (aliasing `motion.duration.transition` / `motion.easing.transition` — the everyday color-shift motion intent; `excludePlatforms: figma`). Values cross-checked against Figma (Carto Web Components, node 787:3308): width 360px, padding/gap 24px, header gap 8px, footer gap 12px, background white all match. Adopted value shifts (semantic intent over the Figma literal): `surface.border.color` aliases `{border.color.subtle}` (neutral.30, #f6f6f6, from Figma's #e6e6e6); `surface.radius` aliases `{radius.generous}` (24px, from Figma's 12px) to match BottomSheet's panel radius. `surface.elevation` aliases `{shadow.floating.resting}` (the shared transient-surface intent; blur follows the semantic token). `surface.border.width` is `{size.25}` (1px). \[React Kit] `Dialog` now consumes its `component.dialog.*` tokens instead of inline semantic/primitive literals. The surface foreground pairs with the standard surface (`foreground.color.on.standard`, same neutral.800 value — no visual change). The body focus-ring fade now consumes `focus.ring.transition.{duration,easing}` (`200ms` / `cubic-bezier(0.4, 0, 0.2, 1)`); its easing adopts the `motion.easing.transition` curve, shifting from the prior inline `[0,0,0.4,1]` to match BottomSheet + Button. The fixed `360px` surface width stays an intentional raw literal (no semantic intent, no matching size primitive); `zIndex: 1000` is kept raw on purpose (Carto has no layering token scale yet); the shared modal backdrop continues to consume `semantic.scrim.color`. * [#110](https://github.com/servicetitan/carto/pull/110) [`71b7210`](https://github.com/servicetitan/carto/commit/71b72107f82dfe67800705ef589ab6ee3ad79fe2) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add a global `focus` semantic category — `focus.width` (`{size.75}`, the new 3px primitive rung), `focus.offset` (`{size.50}`, 2px), and `focus.color` (`{border.color.accent}`) — so every focus ring shares one system-wide treatment. `button.focus.ring.{color,width,offset}` now alias `focus.*` (no visual change: still `#0265dc`, 3px, 2px offset), and the new `size.75` = 3px primitive backs the ring width. \[React Kit] `Dialog` (body scroll region) and `PromptBar` (disclaimer link) now consume the global `semantic.focus.*` tokens instead of inline outline literals. The Dialog ring is unchanged (3px / 2px / accent); the PromptBar disclaimer-link ring grows from 2px to the global 3px width so it matches every other focus ring. * [#129](https://github.com/servicetitan/carto/pull/129) [`b1a78a4`](https://github.com/servicetitan/carto/commit/b1a78a4f304e6e961610fd66359c9120a469aca8) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `link` component tokens that alias the semantic tier: `link.foreground.resting` (`{foreground.color.standard}`) and `link.foreground.hover` (`{foreground.color.informative}`) for the link's text color, `link.radius` (`{radius.trim}`) for the focus-ring corner, and `link.icon.gap` (`{spacing.micro}`) for the trailing external-link icon's lockup. `Link`'s recipe now consumes these tokens in place of the raw `semantic.*` / `primitive.*` references it used before — all value-preserving, no rendered change. The shared focus-ring (`component.button.focus.ring.*`) and the inline transition curve are unchanged: the ring is still the kit's single button-owned definition consumed directly, and motion adoption stays deferred pending the curve-shift decision (matching `Button`). * [#134](https://github.com/servicetitan/carto/pull/134) [`c083c3c`](https://github.com/servicetitan/carto/commit/c083c3c75a1ee118b830d2fab8fcbd708aaebad7) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `menu.*` component tokens for the Menu surface and options — the popover (`surface.background`, `surface.radius`, `surface.elevation`), the option list (`list.gap`, `list.padding`), the option rows (`option.background.{resting,hover,pressed}`, `option.foreground.resting`, `option.gap`, `option.radius`, `option.padding.{inline,block}`, `option.opacity.disabled`), the selected option (`option.selected.background.{resting,hover,pressed}`, `option.selected.foreground.{resting,hover,pressed}`), and the focus ring (`focus.ring.color`, `focus.ring.width`), each aliasing the semantic tier. \[Tokens] Extend the semantic tier so the Menu's selected states alias real intents instead of raw primitives: * `background.color.informative-subdued` is promoted from a scalar to a stateful group — `resting` (blue.50), `hover` (blue.100), `pressed` (blue.200). * `foreground.color.on.informative-subdued` is added — `resting` (blue.600), `hover` (blue.700), `pressed` (blue.800) — the on-color paired with the informative-subdued surface. `Citation`'s hover surface moves to the `.resting` leaf with no value change (`background.color.informative-subdued` → `.resting`). `Menu` now consumes these via the `component.menu.*` proxy instead of reaching into `semantic.*` / `primitive.*` directly. As part of this: * The popover surface uses `radius.moderate` (16px) and the option rows use `radius.trim` (12px), matching the Figma bindings (`semantic/radius/moderate` on the container, `semantic/radius/trim` on the options). * The disabled-dim opacity is now the shared `opacity.disabled` token (replacing a hard-coded `0.6`). * The selected option surfaces/text alias `background.color.informative-subdued.{resting,hover,pressed}` and `foreground.color.on.informative-subdued.{resting,hover,pressed}` (no more `color.blue.*` primitive interims). * The unselected option uses the `ghost` surface intent — `background.color.ghost.{resting,hover,pressed}` — paired with `foreground.color.on.ghost` text (neutral.800, a deliberate shift from Figma's `foreground/color/default` #040404, which has no carto equivalent). Cross-checked against Figma (node `43:290`): popover background/elevation/radius, option spacing/typography, the selected-state surfaces/text, and the 180/360px width mechanics all match. The new `informative-subdued` / `on.informative-subdued` hover values (blue.100 #cce3ff, blue.700 #1d4ca3) equal Figma's `primary-subdued-hover` / `primary-hover`. The unselected option's hover/press tints intentionally use the translucent `ghost` intent (neutral.400 @ 0.08/0.16) rather than Figma's opaque `standard.hover` (#f9f9f9). The option pressed/active states are kept from the RAC/anvil2 interaction model but are beyond the Figma spec, which defines only default/hover/disabled. Remaining gap: the popover min/max width (180/360px) stay raw literals in the recipe as no width scale exists at any tier. * [#127](https://github.com/servicetitan/carto/pull/127) [`07e28ca`](https://github.com/servicetitan/carto/commit/07e28cab5e6c5809319e92fae6d3cbc2b2a57526) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add a `@servicetitan/carto-tokens/motion` export: raw, JS-native values for the `motion.*` token namespace, intended for Framer Motion (`motion`) and other JS consumers that can't use CSS custom properties. The vanilla-extract output exposes motion tokens only as CSS variables (`cubic-bezier(...)` strings, `ms` time literals), which Motion's JS API rejects — its `ease` prop wants a `[x1, y1, x2, y2]` tuple and its `duration` prop wants a unitless number in seconds. The new module exports `easing` (cubic-bezier control-point tuples, typed as `CubicBezier`), `duration` (numbers in **seconds**, e.g. `200ms` → `0.2`), and `scale` (unitless multipliers), plus a combined `motion` object. Values are generated from the same token source as the CSS variables, so the two surfaces stay in sync. ```ts theme={null} import { easing, duration, scale } from "@servicetitan/carto-tokens/motion"; // transition: { duration: duration.transition, ease: easing.enter } ``` * [#136](https://github.com/servicetitan/carto/pull/136) [`5bf6962`](https://github.com/servicetitan/carto/commit/5bf69621e64469542f70b2cb535390f8c83cfca0) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `shadow.ambient` — a new low rung on the elevation scale for a subtle interactive affordance. Unlike the directional `raised`/`floating` shadows, `ambient` is a soft, diffuse shadow that sits flush to the surface with no offset (neutral.800 @ 4% resting / 8% hover, blur `{size.400}`), signalling an element is interactive without pronounced elevation. New ladder: `flush (0) → ambient (4%) → raised (12%) → floating (24%)`. `flush`, `raised`, and `floating` are unchanged (same values and Figma variable IDs), so existing consumers are unaffected. \[React Kit] `Card` now consumes `semantic.shadow.ambient.{resting,hover}` for its resting and hover elevation, replacing the inline custom ambient shadow (the resting value is identical, resolving the long-standing `TODO(carto-tokens)`) and the prior `raised.resting` hover (12% → ambient 8%, a softer hover lift). * [#104](https://github.com/servicetitan/carto/pull/104) [`11a4c84`](https://github.com/servicetitan/carto/commit/11a4c84492cbfb35c8730387fbef74dff1328cf9) Thanks [@AdamLantz](https://github.com/AdamLantz)! - \[Tokens] Add `appShell` component tokens: `appShell.region.background` and `appShell.handle.background.hover`/`appShell.handle.background.pressed` for the resize handle. ### Patch Changes * [#112](https://github.com/servicetitan/carto/pull/112) [`5604d96`](https://github.com/servicetitan/carto/commit/5604d969a2d502d40911c7aacc3cf013001e298a) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Fix the Android (Compose) build failing to compile the generated `CartoTokens.kt`. The `easing` category emits an enclosing `object Easing` whose name shadowed the unqualified `Easing` type annotation, so every `cubicBezier` leaf failed with `Initializer type mismatch: expected 'Easing', actual 'CubicBezierEasing'`. The Kotlin generator now imports the Compose type aliased as `ComposeEasing` (mirroring the existing `ComposeColor` pattern) and uses it for `cubicBezier` leaf types. ## 0.1.2 ### Minor Changes * [#59](https://github.com/servicetitan/carto/pull/59) [`2b25a96`](https://github.com/servicetitan/carto/commit/2b25a96b0b87e630b4ab39337e578d2d421e3548) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `button` component tokens (`primary` / `secondary` / `ghost` backgrounds, foregrounds, elevation; `font`, `gap`, `padding`, `radius`, and `focus`) and wire `Button` to consume them via the `component` proxy instead of hard-coded primitives. The button's icon size consumes the existing `icon.size.large` token directly (no redundant `button.icon` alias) * [#85](https://github.com/servicetitan/carto/pull/85) [`69c049c`](https://github.com/servicetitan/carto/commit/69c049c89d2c8c1adafc865a534e46c3273dee9c) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `button.danger` component tokens (`background`, `foreground`, `elevation`) aliasing the critical semantic surface, and wire the `Button` `danger` variant to consume them via the `component` proxy instead of reading `semantic.*` critical tokens directly * [#77](https://github.com/servicetitan/carto/pull/77) [`987b206`](https://github.com/servicetitan/carto/commit/987b206115a35dcc97f15c13c8bce6c4f232fc21) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add the `border.color.accent` semantic intent (brand-interactive outline for focus rings, active navigation, and selected controls) and restructure the button's focus tokens into a `button.focus.ring` group (`color` → `border.color.accent`, plus `width` and `offset`). `Button` now consumes `button.focus.ring.{color,width,offset}` for its focus ring instead of a primitive color alias and an inline outline width. No visual change — the ring stays `#0265dc`, 3px thick, 2px offset. * [#83](https://github.com/servicetitan/carto/pull/83) [`fdcc420`](https://github.com/servicetitan/carto/commit/fdcc420d5336e0675ca2ec7d524f45e3c50d0970) Thanks [@tounsoo](https://github.com/tounsoo)! - \[PromptBar] Add `promptBar` component tokens and wire the recipe to consume them New semantic-aliasing component tokens (`promptBar.*`) cover the bar surface (background, border, radius, elevation, gap, padding), the attachment tile, the disclaimer, and the error foreground. The PromptBar recipe now consumes `component.promptBar.*` instead of referencing `semantic`/`primitive` directly. Values map 1:1 from the prior references except the attachment-tile background, which adopts `background.color.subtle.resting` (neutral.30 → neutral.50) and now follows light/dark. * [#102](https://github.com/servicetitan/carto/pull/102) [`3bcff52`](https://github.com/servicetitan/carto/commit/3bcff52f7880a9eb7b6e438b1e68dad893f351cc) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `duration` semantic category — motion durations chosen by the significance of the moment. Five static leaves aliasing the duration primitives: `duration.instant` (`{duration.0}`), `duration.feedback` (`{duration.100}`), `duration.transition` (`{duration.200}`), `duration.emphasis` (`{duration.300}`), `duration.cinematic` (`{duration.400}`). Mode-agnostic (no light/dark) and `excludePlatforms: ["figma"]`, mirroring the primitive tier. * [#106](https://github.com/servicetitan/carto/pull/106) [`8cad2e0`](https://github.com/servicetitan/carto/commit/8cad2e0f50d91a79f1ef053f2815dcb5f4fb4914) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `easing` semantic category — five intent-named cubic-bezier curves (`enter`, `exit`, `transition`, `loop`, `emphasis`) that name the character of acceleration across a motion, chosen by behavior rather than a hardcoded bezier. Introduces a new `cubicBezier` `$type` with web (`cubic-bezier(...)`), Swift (`(CGFloat, CGFloat, CGFloat, CGFloat)` tuple), and Kotlin (Compose `CubicBezierEasing`) transforms. Static, no light/dark, `excludePlatforms: ["figma"]` (Figma has no easing variable type). * [#82](https://github.com/servicetitan/carto/pull/82) [`7d8d6b3`](https://github.com/servicetitan/carto/commit/7d8d6b3504c4d03734e6bdae5098d0f3d54580f6) Thanks [@tounsoo](https://github.com/tounsoo)! - \[Tokens] Add `duration` primitive tokens (`0`, `100`, `200`, `300`, `400` ms) for motion timing. Each platform emits its idiomatic form: web emits a CSS `