@lindle/linoardo

v1.0.60

Published

16 days ago

All components are server components, if possible. If not, mark file as "use client" Components working with forms must be compatible with react-hook-form.

0High
0Medium
0Low

lindle

instructions for codex

All components are server components, if possible. If not, mark file as "use client" Components working with forms must be compatible with react-hook-form.

Linoardo

Linoardo is a React UI component library. It is built on Tailwind CSS, includes core building blocks (Button, Input, Menu, Dialog, etc.), and lets you easily override the color palette via CSS variables.

Installation

npm i @lindle/linoardo
# or
pnpm add @lindle/linoardo
# or
yarn add @lindle/linoardo

Usage

Import the library styles.
Import the components you want to use.

import '@lindle/linoardo/styles.css';
import { Button } from '@lindle/linoardo';

export default function App() {
  return <Button color='primary'>Action</Button>;
}

Dark mode

Linoardo respects the user's system preference (prefers-color-scheme) by default — no configuration needed.

Behaviour overview

| Situation | Result | |---|---| | No class set, system is light | light mode | | No class set, system is dark | dark mode (automatic) | | .dark on any ancestor | force dark, regardless of system setting | | .light on any ancestor | force light, regardless of system setting |

Forcing a specific theme

Add .dark or .light to the <html> element (or any wrapper that contains Linoardo components):

<!-- force dark -->
<html class="dark">

<!-- force light -->
<html class="light">

In React you can toggle it programmatically:

function setTheme(theme: 'dark' | 'light' | 'system') {
  const root = document.documentElement;
  root.classList.remove('dark', 'light');
  if (theme !== 'system') root.classList.add(theme);
}

Persisting the user's choice

// read saved preference on mount
const saved = localStorage.getItem('theme') as 'dark' | 'light' | 'system' | null;
if (saved && saved !== 'system') {
  document.documentElement.classList.add(saved);
}

// save on change
function handleThemeChange(theme: 'dark' | 'light' | 'system') {
  localStorage.setItem('theme', theme);
  setTheme(theme);
}

Reacting to system changes at runtime

const mq = window.matchMedia('(prefers-color-scheme: dark)');

mq.addEventListener('change', (e) => {
  const saved = localStorage.getItem('theme');
  // only follow system if the user hasn't pinned a theme
  if (!saved || saved === 'system') {
    document.documentElement.classList.toggle('dark', e.matches);
  }
});

Color palette (CSS variables)

Palette colors are controlled by CSS variables. Default values:

--color-primary
--color-neutral
--color-info
--color-success
--color-warning
--color-danger
--color-surface
--color-bw

You can override them globally:

:root {
  --color-primary: #0ea5e9;
  --color-neutral: #4b5563;
  --color-info: #0ea5e9;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-surface: #ffffff;
  --color-bw: #000000;
}

If you want to scope the color locally, set it on a wrapper element:

.app-theme {
  --color-primary: #22c55e;
  --color-info: #38bdf8;
  --color-danger: #f97316;
}

Development

npm run dev        # Storybook on port 6006
npm run build      # JS + CSS production build
npm run lint       # ESLint
npx vitest         # Storybook interaction tests (headless Chromium)

docker build --no-cache -t linoardo-storybook:latest .