Skip to content

Commit cfee85f

Browse files
hybridxhybridx
committed
feat: redesign as neumorphic design system with Tailwind CSS preset
- Replace Inter with Red Hat Text/Mono typography - Implement clean neumorphic shadows (extruded/recessed) across all 11 components with theme-aware --tx-neu-dark/--tx-neu-light tokens - Add Tailwind CSS preset (tailwind-preset.js) mapping all design tokens to utility classes: colors, shadows, radius, spacing, type - Rebuild docs page as full design system with Typography, Colors, Spacing, Radius, Shadow System, and Tailwind class reference sections - Add comprehensive README with Tailwind integration guide - Lighten base surface to #E8ECF0 for cleaner soft UI aesthetic - Add spacing scale (--tx-space-1..16) and type scale (--tx-text-xs..4xl) - Rename all components from neu-* to tx-*, add 5 new components (Badge, Avatar, Progress, Tag, Divider) - 3 built-in themes: light, dark (pure black), ocean - WCAG AA contrast preserved across all themes Made-with: Cursor
1 parent cc92ad2 commit cfee85f

24 files changed

Lines changed: 2612 additions & 823 deletions

‎.cursor/rules/git-safety.mdc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
description: Never touch git auth, SSH keys, or push code without explicit user request
3+
alwaysApply: true
4+
---
5+
6+
# Git & Auth Safety
7+
8+
- **NEVER** run `git push`, `git push -u`, or any push command unless the user explicitly asks to push
9+
- **NEVER** run `gh auth login`, `gh auth`, or any authentication commands
10+
- **NEVER** touch SSH keys, git credentials, or any auth-related configuration
11+
- **NEVER** modify `.gitconfig` or any git/SSH config files
12+
- Only make local changes: edits, local commits (when asked), and builds
13+
- Pushing and authentication are always the user's responsibility

‎.github/workflows/deploy.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Deploy ThunderX docs to Pages
1+
name: Deploy Thundrex docs to Pages
22

33
on:
44
push:
@@ -38,9 +38,9 @@ jobs:
3838
path: |
3939
node_modules
4040
dist
41-
key: ${{ runner.os }}-thunderx-build-${{ hashFiles('dist') }}
41+
key: ${{ runner.os }}-thundrex-build-${{ hashFiles('dist') }}
4242
restore-keys: |
43-
${{ runner.os }}-thunderx-build-
43+
${{ runner.os }}-thundrex-build-
4444
4545
- name: Install dependencies
4646
run: npm i

‎README.md‎

Lines changed: 325 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,325 @@
1+
<p align="center">
2+
<img src="https://img.shields.io/badge/built%20with-Lit-324FFF?style=flat-square&logo=lit" alt="Built with Lit" />
3+
<img src="https://img.shields.io/badge/style-neumorphism-E8ECF0?style=flat-square" alt="Neumorphic" />
4+
<img src="https://img.shields.io/badge/font-Red%20Hat%20Text-EE0000?style=flat-square" alt="Red Hat Text" />
5+
<img src="https://img.shields.io/badge/tailwind-preset-38BDF8?style=flat-square&logo=tailwindcss&logoColor=white" alt="Tailwind Preset" />
6+
<img src="https://img.shields.io/badge/a11y-WCAG%20AA-34C759?style=flat-square" alt="Accessible" />
7+
<img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License" />
8+
</p>
9+
10+
<h1 align="center">thundre<b>X</b></h1>
11+
<p align="center"><strong>Neumorphic design system and web component library</strong></p>
12+
<p align="center">
13+
Soft UI components with clean neumorphic shadows, Red Hat Text typography, full theming, a Tailwind CSS preset, and WCAG AA accessibility — ready to drop into any framework or plain HTML.
14+
</p>
15+
16+
---
17+
18+
## Features
19+
20+
- **Clean Neumorphism** — Subtle dual light/dark shadows on every element. Buttons extrude, inputs recess, interactive elements press in on click.
21+
- **Red Hat Text** — Primary font: Red Hat Text. Mono: Red Hat Mono. Clean, modern, open-source.
22+
- **Tailwind CSS Preset** — Drop-in Tailwind preset that maps all design tokens to utility classes. Theme-aware via CSS variables.
23+
- **3 Built-in Themes** — Light (`#E8ECF0`), Dark (pure black `#141414`), and Ocean. Switch with `setTheme()`.
24+
- **11 Components** — Button, Input, Toggle, Checkbox, Slider, Card, Badge, Avatar, Progress, Tag, Divider.
25+
- **Accessible** — WCAG AA contrast ratios, keyboard navigation, ARIA roles, and focus-visible outlines.
26+
- **Framework-agnostic** — Standard web components. Works with React, Vue, Angular, Svelte, or vanilla HTML.
27+
- **Zero runtime dependencies** beyond Lit. Tree-shakeable ES module output.
28+
29+
---
30+
31+
## Quick Start
32+
33+
### Install
34+
35+
```bash
36+
npm install @thundrex/web-components
37+
```
38+
39+
### Use
40+
41+
```html
42+
<script type="module">
43+
import '@thundrex/web-components';
44+
</script>
45+
46+
<tx-button variant="primary">Get Started</tx-button>
47+
<tx-input label="Email" placeholder="you@example.com"></tx-input>
48+
<tx-toggle label="Dark Mode" checked></tx-toggle>
49+
```
50+
51+
### CDN
52+
53+
```html
54+
<script type="module" src="https://unpkg.com/@thundrex/web-components"></script>
55+
```
56+
57+
---
58+
59+
## Tailwind CSS Integration
60+
61+
thundrex ships a Tailwind preset that extends your config with all design tokens. All values reference CSS custom properties, so they respond to runtime theme switches.
62+
63+
### Setup
64+
65+
```js
66+
// tailwind.config.js
67+
import thundrex from '@thundrex/web-components/tailwind-preset';
68+
69+
export default {
70+
presets: [thundrex],
71+
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
72+
};
73+
```
74+
75+
### Available Classes
76+
77+
#### Colors
78+
79+
| Class | Token | Light value |
80+
|---|---|---|
81+
| `bg-tx-bg` | `--tx-bg` | `#E8ECF0` |
82+
| `bg-tx-surface` | `--tx-surface` | `#E8ECF0` |
83+
| `bg-tx-primary` | `--tx-primary` | `#4A7CFF` |
84+
| `bg-tx-accent` | `--tx-accent` | `#F3B23A` |
85+
| `bg-tx-success` | `--tx-success` | `#34C759` |
86+
| `bg-tx-danger` | `--tx-danger` | `#FF3B30` |
87+
| `text-tx-text` | `--tx-text` | `#1A2138` |
88+
| `text-tx-text-secondary` | `--tx-text-secondary` | `#4D5B6A` |
89+
| `text-tx-text-muted` | `--tx-text-muted` | `#6B7886` |
90+
91+
#### Neumorphic Shadows
92+
93+
| Class | Effect |
94+
|---|---|
95+
| `shadow-tx-sm` | Subtle extruded |
96+
| `shadow-tx-md` | Standard extruded |
97+
| `shadow-tx-lg` | Prominent extruded |
98+
| `shadow-tx-inset` | Standard recessed |
99+
| `shadow-tx-inset-sm` | Subtle recessed |
100+
101+
#### Border Radius
102+
103+
| Class | Value |
104+
|---|---|
105+
| `rounded-tx-sm` | 8px |
106+
| `rounded-tx` | 12px |
107+
| `rounded-tx-lg` | 16px |
108+
| `rounded-tx-xl` | 20px |
109+
| `rounded-tx-pill` | 999px |
110+
111+
#### Spacing
112+
113+
`p-tx-1` through `p-tx-16`, `m-tx-1` through `m-tx-16`, `gap-tx-1` through `gap-tx-16` — based on a 4px grid (4, 8, 12, 16, 20, 24, 32, 40, 48, 64px).
114+
115+
#### Typography
116+
117+
| Class | Value |
118+
|---|---|
119+
| `font-tx` | Red Hat Text |
120+
| `font-tx-mono` | Red Hat Mono |
121+
| `text-tx-xs` … `text-tx-4xl` | 0.75rem … 2.25rem |
122+
123+
### Usage Example
124+
125+
```html
126+
<!-- Neumorphic card using only Tailwind classes -->
127+
<div class="bg-tx-bg rounded-tx-lg shadow-tx-md p-tx-6 font-tx">
128+
<h2 class="text-tx-text text-tx-xl font-bold">Card Title</h2>
129+
<p class="text-tx-text-secondary text-tx-sm mt-tx-2">
130+
Build neumorphic layouts with familiar Tailwind utilities.
131+
</p>
132+
<input
133+
class="bg-tx-bg rounded-tx shadow-tx-inset-sm p-tx-3 mt-tx-4 w-full"
134+
placeholder="Recessed input..."
135+
/>
136+
<button class="bg-tx-bg rounded-tx shadow-tx-sm p-tx-3 mt-tx-3 font-semibold
137+
active:shadow-tx-inset-sm transition-all duration-tx">
138+
Extruded Button
139+
</button>
140+
</div>
141+
```
142+
143+
---
144+
145+
## Theming
146+
147+
Every component reads CSS custom properties from `:root`. Switch themes at runtime:
148+
149+
```js
150+
import { setTheme, resetTheme } from '@thundrex/web-components';
151+
152+
setTheme('dark');
153+
setTheme('ocean');
154+
resetTheme();
155+
156+
// Custom tokens
157+
setTheme({
158+
bg: '#1E1E2E',
159+
accent: '#CBA6F7',
160+
primary: '#89B4FA',
161+
text: '#CDD6F4',
162+
neuDark: 'rgba(0,0,0,0.5)',
163+
neuLight: 'rgba(50,50,60,0.3)',
164+
});
165+
```
166+
167+
Or override with CSS:
168+
169+
```css
170+
:root {
171+
--tx-bg: #E8ECF0;
172+
--tx-accent: #F3B23A;
173+
--tx-primary: #4A7CFF;
174+
--tx-neu-dark: rgba(174,182,196,0.18);
175+
--tx-neu-light: rgba(255,255,255,0.65);
176+
}
177+
```
178+
179+
### Design Tokens
180+
181+
| Token | Light | Dark | Purpose |
182+
|---|---|---|---|
183+
| `--tx-bg` | `#E8ECF0` | `#141414` | Base surface |
184+
| `--tx-accent` | `#F3B23A` | `#F3B23A` | Accent / gold |
185+
| `--tx-primary` | `#4A7CFF` | `#6B9AFF` | Primary action |
186+
| `--tx-text` | `#1A2138` | `#E8ECF4` | Primary text |
187+
| `--tx-neu-dark` | `rgba(174,182,196,0.18)` | `rgba(0,0,0,0.5)` | Dark shadow |
188+
| `--tx-neu-light` | `rgba(255,255,255,0.65)` | `rgba(255,255,255,0.04)` | Light shadow |
189+
| `--tx-font` | Red Hat Text | Red Hat Text | Primary font |
190+
| `--tx-font-mono` | Red Hat Mono | Red Hat Mono | Code font |
191+
192+
---
193+
194+
## Components
195+
196+
### `<tx-button>`
197+
198+
Extruded button that recesses on press. Variants: default, primary, accent, ghost.
199+
200+
```html
201+
<tx-button>Default</tx-button>
202+
<tx-button variant="primary">Primary</tx-button>
203+
<tx-button variant="accent" pill>Accent Pill</tx-button>
204+
<tx-button variant="ghost">Ghost</tx-button>
205+
```
206+
207+
### `<tx-input>`
208+
209+
Recessed text field with inset shadow. Focus ring uses primary color.
210+
211+
```html
212+
<tx-input label="Name" placeholder="John Doe"></tx-input>
213+
<tx-input search placeholder="Search..."></tx-input>
214+
```
215+
216+
### `<tx-toggle>`
217+
218+
Switch with recessed track and extruded thumb.
219+
220+
```html
221+
<tx-toggle label="Dark Mode" checked></tx-toggle>
222+
```
223+
224+
### `<tx-checkbox>`
225+
226+
Extruded checkbox that recesses with checkmark on check.
227+
228+
```html
229+
<tx-checkbox label="Accept terms"></tx-checkbox>
230+
```
231+
232+
### `<tx-slider>`
233+
234+
Recessed track with extruded draggable thumb.
235+
236+
```html
237+
<tx-slider label="Volume" show-value value="65"></tx-slider>
238+
```
239+
240+
### `<tx-card>`
241+
242+
Extruded content container. Interactive cards recess on press. Supports accent bars and header/footer slots.
243+
244+
```html
245+
<tx-card accent="primary" interactive>
246+
<h3 slot="header">Title</h3>
247+
<p>Content</p>
248+
</tx-card>
249+
```
250+
251+
### `<tx-badge>` `<tx-avatar>` `<tx-progress>` `<tx-tag>` `<tx-divider>`
252+
253+
Additional UI components — see the [design system documentation](https://thundrex.github.io/web-components/) for full API reference and live demos.
254+
255+
---
256+
257+
## How Neumorphism Works
258+
259+
Each component uses the same base surface color (`--tx-bg`) as its background. Depth comes from two opposing shadows:
260+
261+
```
262+
Light source ↘
263+
┌──────────────────────────┐
264+
│ highlight (-shadow) │
265+
│ │
266+
│ EXTRUDED │
267+
│ │
268+
│ dark shadow (+) ↙ │
269+
└──────────────────────────┘
270+
271+
┌──────────────────────────┐
272+
│ ↘ dark inset │
273+
│ │
274+
│ RECESSED │
275+
│ │
276+
│ highlight inset │
277+
└──────────────────────────┘
278+
```
279+
280+
Shadow colors adapt per theme via `--tx-neu-dark` and `--tx-neu-light`.
281+
282+
---
283+
284+
## Development
285+
286+
```bash
287+
git clone https://github.com/thundrex/web-components.git
288+
cd web-components
289+
npm install
290+
npm run dev # dev server at localhost:5173
291+
npm run build # build docs site
292+
npm run build:lib # build library (ES modules)
293+
```
294+
295+
## Project Structure
296+
297+
```
298+
src/
299+
├── components/ # 11 web components
300+
│ ├── tx-button.ts
301+
│ ├── tx-input.ts
302+
│ ├── tx-toggle.ts
303+
│ ├── tx-checkbox.ts
304+
│ ├── tx-slider.ts
305+
│ ├── tx-card.ts
306+
│ ├── tx-badge.ts
307+
│ ├── tx-avatar.ts
308+
│ ├── tx-progress.ts
309+
│ ├── tx-tag.ts
310+
│ └── tx-divider.ts
311+
├── styles/
312+
│ └── tx-tokens.ts # Design tokens + neumorphic shadows
313+
├── theme.ts # setTheme / resetTheme / presets
314+
└── index.ts # Barrel export
315+
tailwind-preset.js # Tailwind CSS preset
316+
index.html # Design system docs
317+
```
318+
319+
## Browser Support
320+
321+
Chrome/Edge 79+ · Firefox 63+ · Safari 13.1+
322+
323+
## License
324+
325+
MIT — [thundrex](https://github.com/thundrex)

0 commit comments

Comments
 (0)