@r3-dev/brand
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

R3Dev Brand

Npm Version GitHub Workflow Status (with event)

Install

npm install @r3-dev/brand
yarn add @r3-dev/brand
pnpm add @r3-dev/brand

Usage

Edit @r3-dev/brand

import '@r3-dev/brand'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'r3-badge': React.DetailedHTMLProps<
        React.AnchorHTMLAttributes<HTMLAnchorElement>,
        HTMLAnchorElement
      >;
    }
  }
}

export function App() {
  return (
    <r3-badge
      href="https://example.com"
      style={{ position: 'fixed', top: '1rem', right: '1rem' }}
    />
  )
}

Overriding styles

r3-badge {
  /* default colors */
  /* --bg-badge: #000; */
  --text-badge: #fff;
  --bg-logo: #00a621;
  --text-logo: #fff;

  /* override */
  --bg-badge: darkblue;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  r3-badge {
    --bg-badge: #fff;
    --text-badge: #000;
  }
}

/* light mode */
@media (prefers-color-scheme: light) {
  r3-badge {
    --bg-badge: #000;
    --text-badge: #fff;
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @r3-dev/brand

Weekly Downloads

1

Version

1.2.0

License

none

Unpacked Size

22.1 kB

Total Files

8

Last publish

Collaborators

  • milanjrodd
  • crashmax