Theme

Sound

Jump to a component

AniCanonKit · Writing

Mention

Mention is a reference inside prose: @ a character (filled), # a place (underlined). active rings the one whose card is open.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Mention for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Mention for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for: A reference inside prose or a prompt: @ a character, # a place, $ a reference the creator added, ringed while its card is open.
Not for: Who or what a panel or a prompt binds, with its picture and noteMentionChip
A quiet action inside a line of textTextLink
Words a check flagged inside a sentenceText

Guidelines

$ a reference the creator added (kind="reference").

MentionExample.jsxReact

import { Mention } from '@anicanon/sakuga/anicanonkit';

export default function MentionExample() {
  return (
    <p>
      {'After the fire, '}
      <Mention>Toddy</Mention>
      {' wires a watch in '}
      <Mention kind="place">Toddy’s bedroom</Mention>.
    </p>
  );
}

Props`MentionProps`

childrenrequired

string

kind

'character' | 'place' | 'reference'

active

boolean

MentionExample.swiftiOS · coming soon

MentionExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

mention-character-bgMention: @character fill.

accent-subtlecamellia-600-a10rgba(194,51,95,0.1)

accent-subtlecamellia-400-a14rgba(244,119,159,0.14)

mention-character-fgMention: @character text.

text-accentcamellia-700#b42354

text-accentcamellia-400#f4779f

mention-place-fgMention: #place text.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

mention-place-ruleMention: #place underline.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

mention-active-ringMention: the mention whose card is open.

accentcamellia-600#c2335f

accentcamellia-400#f4779f

Space and shape

mention-radius

radius-xs

4px

mention-padding-x

inset-2xs

2px

mention-place-border-bottom-width

line-hairline

1px

mention-active-ring-width

line-strong

2px

mention-reference-border-bottom-width

line-hairline

1px

mention-forced-active-width

line-strong

2px

Type

mention-font-weight

weight-strong

600

Motion

mention-duration

motion-fast

160ms

mention-easing

ease-standard

cubic-bezier(0.2, 0, 0, 1)