EventGlyph

EventGlyph is the shape of an event type, the same everywhere a story event appears: map, scrubber, rows, pickers.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

EventGlyph is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

EventGlyph is made for the web, and isn’t part of Sakuga for Android yet.

Use it for: The shape of a story event's type wherever one appears (map, scrubber, rows, pickers): event, twist, revelation, clue or goal.
Not for: A glyph from the outline setIcon
An event as a row with its stateEntityRow

Guidelines

event (filled circle), twist (diamond), revelation (ring), clue (rounded square), goal (triangle).
tone="auto" paints a plain event in the text colour and the other four in the accent. muted is for events outside the moment.

EventGlyphExample.jsxReact

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

export default function EventGlyphExample() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      {['event', 'twist', 'revelation', 'clue', 'goal'].map((t) => (
        <EventGlyph key={t} type={t} size={16} />
      ))}
    </div>
  );
}

Props`EventGlyphProps`

typerequired

EventType

size

number

tone

'auto' | 'primary' | 'accent' | 'muted'Default 'auto'

className

string

Types

type EventType = 'event' | 'twist' | 'revelation' | 'clue' | 'goal';

EventGlyphExample.swiftiOS · coming soon

EventGlyphExample.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

glyph-eventEventGlyph: an event, a plain happening.

text-primaryneutral-925#0b0a10

text-primaryneutral-0#ffffff

glyph-mutedEventGlyph: an event outside the current moment.

text-mutedneutral-600#5c5b67

text-mutedneutral-400#a3a3a7

Space and shape

glyph-ring-stroke-width

its own value