Skip to content
LuoForge/Tungsten
Components/LMark·

LMark

since v0.2.0

LMark — the LuoForge identity mark.

A filled rounded square with a negative-space "L" cutout via SVG mask.

Inherits currentColor so the surface behind shows through the L —

pair with text-ink-1 on cream surfaces, text-on-ink on dark spotlight

surfaces, text-white on brand fills.

Compose with a wordmark or BrandLockup text in the consumer; this

component is pure SVG and stays brand-text-free so the library doesn't

bake "Tungsten" / "LuoForge" into anything reusable.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { LMark } from '@hey-mike/tungsten';
import { LMark } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/l-mark/page.tsx

import { LMark } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function LMarkSnapshot() {
  return (
    <VariantGrid
      title="LMark"
      variants={[
        {
          label: 'xs-16',
          node: <LMark size={16} className="text-ink-1" />,
        },
        {
          label: 'sm-24',
          node: <LMark size={24} className="text-ink-1" />,
        },
        {
          label: 'md-32',
          node: <LMark size={32} className="text-ink-1" />,
        },
        {
          label: 'lg-48',
          node: <LMark size={48} className="text-ink-1" />,
        },
        {
          label: 'brand-accent',
          node: <LMark size={32} className="text-brand" />,
        },
        {
          label: 'on-dark',
          node: (
            <div className="rounded-lg bg-ink-1 p-3">
              <LMark size={32} className="text-on-ink" />
            </div>
          ),
        },
      ]}
    />
  );
}

import { LMark } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function LMarkSnapshot() {
  return (
    <VariantGrid
      title="LMark"
      variants={[
        {
          label: 'xs-16',
          node: <LMark size={16} className="text-ink-1" />,
        },
        {
          label: 'sm-24',
          node: <LMark size={24} className="text-ink-1" />,
        },
        {
          label: 'md-32',
          node: <LMark size={32} className="text-ink-1" />,
        },
        {
          label: 'lg-48',
          node: <LMark size={48} className="text-ink-1" />,
        },
        {
          label: 'brand-accent',
          node: <LMark size={32} className="text-brand" />,
        },
        {
          label: 'on-dark',
          node: (
            <div className="rounded-lg bg-ink-1 p-3">
              <LMark size={32} className="text-on-ink" />
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <LMark />.

PropTypeDefaultDescription
sizenumber24—

Source