@cosmoops/assets
v1.1.2
Published
Global CSS design tokens, HeroUI theme overrides, and official Logo assets for CosmoOps applications
Readme
@cosmoops/assets
Organization-wide global CSS design tokens, HeroUI theme overrides, and official Logo assets for CosmoOps applications.
This package provides:
- Pure CSS Design Tokens (
global.css): Zero-dependency stylesheet containing all CosmoOps brand design tokens (Cosmic Green primary scale, Deep-Space Ink surface/background scale, semantic state colors, Google Fonts imports) formatted explicitly for the HeroUI Theme Customization specification. - React Logo Components (
@cosmoops/assets/react): Ready-to-use vector components (<CosmoLogo />,<CosmoWordmark />,<CosmoIcon />). - Raw SVG Assets (
@cosmoops/assets/svg/*): Vector.svgfiles for brand lockups and icons.
📦 Installation
npm install @cosmoops/assets🚀 Usage
Option A: Standard Root CSS Import
Import CSS directly in your application entry point (_app.tsx, layout.tsx, main.tsx, or index.js):
import "@cosmoops/assets";Option B: React Logo Components
Import official CosmoOps logo components in your React / Next.js app:
import { CosmoLogo, CosmoWordmark, CosmoIcon } from "@cosmoops/assets/react";
// Navbar Full Logo (Dark & Light Mode)
<CosmoLogo theme="dark" size={24} />
<CosmoLogo theme="light" size={24} />
// Text-Only Wordmark (Dark & Light Mode)
<CosmoWordmark theme="dark" size={32} />
<CosmoWordmark theme="light" size={32} />
// Standalone Brand Icon Mark
<CosmoIcon size={24} color="var(--accent)" />
<CosmoIcon size={16} color="var(--foreground)" />Option C: Raw SVG Imports
import logoDarkSvg from "@cosmoops/assets/svg/logo-full-dark.svg";
import logoLightSvg from "@cosmoops/assets/svg/logo-full-light.svg";
import wordmarkDarkSvg from "@cosmoops/assets/svg/logo-wordmark-dark.svg";
import iconGreenSvg from "@cosmoops/assets/svg/logo-icon-green.svg";
import iconWhiteSvg from "@cosmoops/assets/svg/logo-icon-white.svg";🧩 Component API Reference
<CosmoLogo />
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| theme | 'dark' \| 'light' | 'dark' | Switches logo text color for dark (#ffffff) or light (#08090a) backgrounds |
| size | number | 22 | Logo height in pixels (width calculates automatically) |
<CosmoWordmark />
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| theme | 'dark' \| 'light' | 'dark' | Switches text color for dark (#ffffff) or light (#08090a) backgrounds |
| size | number | 28 | Wordmark height in pixels (width calculates automatically) |
<CosmoIcon />
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| size | number | 24 | Icon width and height in pixels (1:1 square ratio) |
| color | string | 'var(--accent)' | Stroke color (supports CSS variables like var(--foreground)) |
🎨 HeroUI Theme Integration
Theme modes are controlled natively via HTML data-theme attributes or .dark/.light classes:
Dark Theme (Space Dark Default - #08090a)
<html class="dark" data-theme="dark">
<body>
<!-- HeroUI components automatically use CosmoOps Dark Theme -->
</body>
</html>Light Theme (#f4f6f6)
<html class="light" data-theme="light">
<body>
<!-- HeroUI components automatically use CosmoOps Light Theme -->
</body>
</html>📄 License
MIT © CosmoOps