@teasim/brands

Installation

Version 0.2.1 ships typed React components, native Astro components and downloadable SVG and PNG resources. Configure the @teasim scope for GitHub Packages with a token that can read the package, then install:

bun add @teasim/[email protected]

The package has no runtime dependency on TeaCSS or Classes. Its React and React DOM peers are optional when using the native Astro entry.

Choose an asset

Use Logo for the full signature, Word for lettering and Mark for compact placements. Avatar and Mascot are separate compositions. Import only implemented assets; availability varies by brand.

Set one sizing dimension and preserve the SVG’s natural aspect ratio. A parent width constraint can make the visible artwork smaller than the requested height. The 0.2.0 artwork changes include the Teasim cube, the complete REITskit name, and the new Teakit signature; old width/height pairs need another visual check.

In 0.2.1, Teakit uses filled modules with transparent gaps on a 255×68 Logo canvas. Its color artwork uses yellow, blue, orange and green; monochrome uses a single ink. The former --brand-teakit-frame outline control no longer applies. Preserve the current proportions when sizing the new artwork.

BillgoAvatar has been removed. Use BillgoLogo or BillgoWord for the signature on its 1130×530 canvas, and set one dimension to preserve its ratio.

Astro

---
import { TeasimLogo } from "@teasim/brands/astro";
---
<TeasimLogo height={48} role="img" aria-label="Teasim" />

Ordinary SVG attributes and class are forwarded. For a decorative logo beside an existing text label, use aria-hidden="true" instead of announcing it twice.

React

import { TeasimLogo } from "@teasim/brands";

export function Brand() {
  return <TeasimLogo height={48} role="img" aria-label="Teasim" />;
}

React uses className; the component contract excludes children and React refs.

Color and appearance

The current source artwork supports variant="color" | "monochrome" and theme="light" | "dark" for covered brands. These select actual SVG artwork; use the monochrome variant rather than applying a grayscale filter. Legacy brands outside that set retain their existing props.

---
import { AmkitLogo, HeydayupLogo } from "@teasim/brands/astro";
---
<AmkitLogo variant="monochrome" color="currentColor" height={48}
  role="img" aria-label="Amkit" />
<HeydayupLogo variant="monochrome" theme="dark" height={48}
  role="img" aria-label="Heydayup" />

color selects common ink; --color-brand-logo can override it from a parent or the SVG itself. Fixed illustration regions and transparent cutouts follow their source artwork. Choose the correct theme for illustrated monochrome assets rather than inverting the entire SVG.

The optional brandTheme helper from @teasim/brands/theme returns TeaCSS tokens for light, dark, system or a reset-only theme: null scope. It ships no CSS and does not manage the site’s appearance state. Ensure the returned tokens are visible to the host’s compiler; this site verifies a literal light/dark snapshot so a changed helper cannot silently produce unstyled theme classes. The helper is not a recipe and does not normalize array or object classes.

Downloadable resources

Resources are package files, without JavaScript asset subpaths. For example, copy assets/teasim/TeasimLogoColorLight.svg from the installed package into your public directory. An external image does not inherit CSS variables; choose its fixed color/monochrome and light/dark resource explicitly.

Continue exploring

See the React product overview for the package family and Style for the shared styling foundation.