@lmsomeco/toyota-framework-css

Toyota Design System CSS Component Library — Pure CSS components with Toyota brand styling.

Features

• ✅ Framework-agnostic — Works with any JavaScript framework or plain HTML
• ✅ Toyota brand styling — Official colors, typography, and design language
• ✅ Zero runtime dependencies — Pure CSS, no JavaScript required
• ✅ Predictable class names — All classes prefixed with t-
• ✅ Accessible — WCAG 2.1 AA compliant components

Installation

npm install @lmsomeco/toyota-framework-css

Or with pnpm:

pnpm add @lmsomeco/toyota-framework-css

Usage

Import the CSS in your application entry point:

// main.js or main.ts
import '@lmsomeco/toyota-framework-css'

Then use the classes in your HTML:

<button class="t-button t-button--primary">Click me</button>

<input class="t-input" type="text" placeholder="Enter text" />

<div class="t-card">
  <div class="t-card__header">Card Title</div>
  <div class="t-card__body">Card content goes here</div>
</div>

Available Components

• Button — t-button, t-button--primary, t-button--secondary, t-button--function
• Input — t-input, t-input--error
• Textarea — t-textarea
• Select — t-select
• Checkbox — t-checkbox
• Radio — t-radio
• File Upload — t-file
• Combobox — t-combobox
• Datepicker — t-datepicker
• Tabs — t-tabs, t-tab, t-tab--active
• Loading — t-loading
• Dialog — t-dialog, t-dialog__panel, t-dialog__close
• Tooltip — t-tooltip
• Alert — t-alert, t-alert--default, t-alert--success, t-alert--warning, t-alert--error,

Class Naming Convention

All classes follow the BEM-inspired pattern with the t- prefix:

• Component: t-{component} (e.g., t-button)
• Variant: t-{component}--{variant} (e.g., t-button--primary)
• State: t-{component}--{state} (e.g., t-button--disabled)
• Element: t-{component}__{element} (e.g., t-card__header)

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

License

MIT © LM Someco

Repository

https://github.com/lmandcreative/toyota-framework