@empathyco/x-design-system 0.1.0-alpha.2 → 1.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +254 -3
- package/dist/components.css +18 -0
- package/dist/index.css +1 -3
- package/package.json +3 -3
- package/dist/components/index.css +0 -18
package/README.md
CHANGED
|
@@ -1,5 +1,256 @@
|
|
|
1
|
-
# x-design-system
|
|
1
|
+
# @empathyco/x-design-system
|
|
2
2
|
|
|
3
|
-
Empathy X Tailwind Design System
|
|
3
|
+
> Empathy X Tailwind Design System
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@empathyco/x-design-system)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
A comprehensive Tailwind CSS-based design system for building consistent and accessible Empathy X interfaces. This package deprecates the **x-tailwindcss** package.
|
|
9
|
+
|
|
10
|
+
## 📋 Table of Contents
|
|
11
|
+
|
|
12
|
+
- [Features](#-features)
|
|
13
|
+
- [Requirements](#-requirements)
|
|
14
|
+
- [Installation](#-installation)
|
|
15
|
+
- [Usage](#-usage)
|
|
16
|
+
- [Components](#-components)
|
|
17
|
+
- [Theme](#-theme)
|
|
18
|
+
- [Development](#-development)
|
|
19
|
+
- [Scripts](#-scripts)
|
|
20
|
+
- [Project Structure](#-project-structure)
|
|
21
|
+
- [Contributing](#-contributing)
|
|
22
|
+
- [License](#-license)
|
|
23
|
+
|
|
24
|
+
## ✨ Features
|
|
25
|
+
|
|
26
|
+
- 🎨 **Prefixed Design System**: All utilities are prefixed with `xds:` to avoid conflicts
|
|
27
|
+
- 🧩 **18 Pre-built Components**: Ready-to-use styled components for common UI patterns
|
|
28
|
+
- 🎯 **Custom Theme**: Comprehensive color palette, typography, and spacing system
|
|
29
|
+
- 📦 **Zero Config**: Import and start using immediately
|
|
30
|
+
- 🔧 **Tailwind CSS v4**: Built on the latest Tailwind CSS
|
|
31
|
+
- 🚀 **TypeScript Support**: Full TypeScript declarations included
|
|
32
|
+
- 📱 **Responsive**: Mobile-first responsive design utilities
|
|
33
|
+
- ♿ **Accessible**: Built with accessibility best practices
|
|
34
|
+
|
|
35
|
+
## 📦 Requirements
|
|
36
|
+
|
|
37
|
+
- **Node.js**: >= 22
|
|
38
|
+
- **Tailwind CSS**: 4.x
|
|
39
|
+
- **Package Manager**: pnpm (recommended), npm, or yarn
|
|
40
|
+
|
|
41
|
+
## 🚀 Installation
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
# Using pnpm (recommended)
|
|
45
|
+
pnpm add @empathyco/x-design-system
|
|
46
|
+
|
|
47
|
+
# Using npm
|
|
48
|
+
npm install @empathyco/x-design-system
|
|
49
|
+
|
|
50
|
+
# Using yarn
|
|
51
|
+
yarn add @empathyco/x-design-system
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 💻 Usage
|
|
55
|
+
|
|
56
|
+
### Basic Setup
|
|
57
|
+
|
|
58
|
+
Import the design system in your main CSS file:
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
@import '../../node_modules/@empathyco/x-design-system/dist/index.css';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This will include all components, theme, and utility variants with the `xds:` prefix.
|
|
65
|
+
|
|
66
|
+
### Using Components
|
|
67
|
+
|
|
68
|
+
Apply design system classes using the `xds:` prefix:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<!-- Button -->
|
|
72
|
+
<button class="xds:button-primary xds:button">Click me</button>
|
|
73
|
+
|
|
74
|
+
<!-- Badge -->
|
|
75
|
+
<span class="xds:badge xds:badge-accent"> New </span>
|
|
76
|
+
|
|
77
|
+
<!-- Input -->
|
|
78
|
+
<input type="text" class="xds:input" placeholder="Search..." />
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Using Theme Variables
|
|
82
|
+
|
|
83
|
+
Access theme variables directly in your CSS:
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
.custom-element {
|
|
87
|
+
color: var(--xds-color-accent-50);
|
|
88
|
+
border-radius: var(--xds-border-radius-md);
|
|
89
|
+
font-size: var(--xds-font-size-base);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## 🧩 Components
|
|
94
|
+
|
|
95
|
+
The design system includes the following pre-styled components:
|
|
96
|
+
|
|
97
|
+
| Component | Description |
|
|
98
|
+
| -------------------- | ---------------------------------------------- |
|
|
99
|
+
| **Button** | Primary, secondary, and tertiary button styles |
|
|
100
|
+
| **Button Group** | Grouped button layouts |
|
|
101
|
+
| **Badge** | Status and notification badges |
|
|
102
|
+
| **Input** | Text input field styles |
|
|
103
|
+
| **Input Group** | Grouped input layouts |
|
|
104
|
+
| **Tag** | Removable tags and chips |
|
|
105
|
+
| **Icon** | Icon container and sizing |
|
|
106
|
+
| **Picture** | Responsive image component |
|
|
107
|
+
| **Typography** | Heading and text styles |
|
|
108
|
+
| **Highlight** | Text highlighting styles |
|
|
109
|
+
| **Suggestion** | Search suggestion items |
|
|
110
|
+
| **Suggestion Group** | Grouped suggestions |
|
|
111
|
+
| **Filter Facet** | Filtering UI components |
|
|
112
|
+
| **Progress Bar** | Loading and progress indicators |
|
|
113
|
+
| **Scroll** | Custom scrollbar styles |
|
|
114
|
+
| **Sliding Panel** | Side panel and drawer |
|
|
115
|
+
| **Attach** | File attachment styles |
|
|
116
|
+
| **Layout** | Grid and container layouts |
|
|
117
|
+
|
|
118
|
+
## 🎨 Theme
|
|
119
|
+
|
|
120
|
+
### Color Palette
|
|
121
|
+
|
|
122
|
+
The design system provides a comprehensive color system:
|
|
123
|
+
|
|
124
|
+
- **Neutral**: `neutral-0` to `neutral-100` (grays and whites)
|
|
125
|
+
- **Lead**: `lead-25`, `lead-50`, `lead-75`
|
|
126
|
+
- **Auxiliary**: `auxiliary-25`, `auxiliary-50`, `auxiliary-75`
|
|
127
|
+
- **Accent**: `accent-25`, `accent-50`, `accent-75`
|
|
128
|
+
- **Highlight**: `highlight-25`, `highlight-50`, `highlight-75`
|
|
129
|
+
- **Semantic Colors**: `success`, `warning`, `error`
|
|
130
|
+
|
|
131
|
+
### Border Radius
|
|
132
|
+
|
|
133
|
+
- `none`, `xs` (2px), `sm` (4px), `md` (8px), `lg` (16px), `xl` (32px), `full`
|
|
134
|
+
|
|
135
|
+
### Spacing & Typography
|
|
136
|
+
|
|
137
|
+
Custom spacing, font sizes, line heights, and font families are defined in the theme.
|
|
138
|
+
|
|
139
|
+
## 🛠️ Development
|
|
140
|
+
|
|
141
|
+
### Prerequisites
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
# Install dependencies
|
|
145
|
+
pnpm install
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Available Scripts
|
|
149
|
+
|
|
150
|
+
```bash
|
|
151
|
+
# Start development server with demo
|
|
152
|
+
pnpm dev
|
|
153
|
+
|
|
154
|
+
# Build library for production
|
|
155
|
+
pnpm build:lib
|
|
156
|
+
|
|
157
|
+
# Build demo application
|
|
158
|
+
pnpm build:demo
|
|
159
|
+
|
|
160
|
+
# Build both library and demo
|
|
161
|
+
pnpm build
|
|
162
|
+
|
|
163
|
+
# Type checking
|
|
164
|
+
pnpm typecheck
|
|
165
|
+
|
|
166
|
+
# Linting
|
|
167
|
+
pnpm lint # Fix lint issues
|
|
168
|
+
pnpm lint:check # Check for issues
|
|
169
|
+
pnpm lint:inspect # Inspect ESLint config
|
|
170
|
+
|
|
171
|
+
# Formatting
|
|
172
|
+
pnpm format # Format all files
|
|
173
|
+
pnpm format:check # Check formatting
|
|
174
|
+
|
|
175
|
+
# Preview built demo
|
|
176
|
+
pnpm preview
|
|
177
|
+
|
|
178
|
+
# Create package tarball
|
|
179
|
+
pnpm pack
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
### Demo Development
|
|
183
|
+
|
|
184
|
+
The package includes a Vue 3 demo application to preview all components:
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
pnpm dev
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
Navigate to the provided localhost URL to view the component showcase.
|
|
191
|
+
|
|
192
|
+
## 📁 Project Structure
|
|
193
|
+
|
|
194
|
+
```
|
|
195
|
+
x-design-system/
|
|
196
|
+
├── lib/ # Source CSS files
|
|
197
|
+
│ ├── components/ # Component styles (18 components)
|
|
198
|
+
│ ├── components.css # Component imports
|
|
199
|
+
│ ├── theme.css # Design tokens and variables
|
|
200
|
+
│ ├── variants.css # Utility variants
|
|
201
|
+
│ └── index.css # Main entry point
|
|
202
|
+
├── demo/ # Vue demo application
|
|
203
|
+
├── build/ # Build scripts
|
|
204
|
+
├── scripts/ # Utility scripts
|
|
205
|
+
├── dist/ # Built distribution (generated)
|
|
206
|
+
├── package.json
|
|
207
|
+
└── README.md
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
## 🔧 Technologies
|
|
211
|
+
|
|
212
|
+
- **[Tailwind CSS 4.2](https://tailwindcss.com/)**: Core design system framework
|
|
213
|
+
- **[Vue 3](https://vuejs.org/)**: Demo application framework
|
|
214
|
+
- **[Vite 7](https://vitejs.dev/)**: Build tool and dev server
|
|
215
|
+
- **[TypeScript 5](https://www.typescriptlang.org/)**: Type safety
|
|
216
|
+
- **[@tailwindcss/vite](https://tailwindcss.com/docs/installation/vite)**: Vite integration
|
|
217
|
+
- **ESLint & Prettier**: Code quality and formatting
|
|
218
|
+
|
|
219
|
+
## 🤝 Contributing
|
|
220
|
+
|
|
221
|
+
Contributions are welcome! Please follow these steps:
|
|
222
|
+
|
|
223
|
+
1. Fork the repository
|
|
224
|
+
2. Create a feature branch: `git checkout -b feature/my-feature`
|
|
225
|
+
3. Make your changes and commit: `git commit -am 'Add new feature'`
|
|
226
|
+
4. Push to the branch: `git push origin feature/my-feature`
|
|
227
|
+
5. Submit a pull request
|
|
228
|
+
|
|
229
|
+
### Development Guidelines
|
|
230
|
+
|
|
231
|
+
- Follow the existing code style
|
|
232
|
+
- Run `pnpm lint` and `pnpm format` before committing
|
|
233
|
+
- Ensure `pnpm typecheck` passes
|
|
234
|
+
- Add or update tests as necessary
|
|
235
|
+
- Update documentation for any API changes
|
|
236
|
+
|
|
237
|
+
## 📄 License
|
|
238
|
+
|
|
239
|
+
Copyright © 2026 Empathy Systems Corporation S.L.
|
|
240
|
+
|
|
241
|
+
Licensed under the [Apache License 2.0](LICENSE).
|
|
242
|
+
|
|
243
|
+
## 🔗 Links
|
|
244
|
+
|
|
245
|
+
- [GitHub Repository](https://github.com/empathyco/x)
|
|
246
|
+
- [Package on npm](https://www.npmjs.com/package/@empathyco/x-design-system)
|
|
247
|
+
- [Report Issues](https://github.com/empathyco/x/issues)
|
|
248
|
+
- [Empathy.co](https://empathy.co)
|
|
249
|
+
|
|
250
|
+
## 📝 Changelog
|
|
251
|
+
|
|
252
|
+
See [CHANGELOG.md](CHANGELOG.md) for a list of changes.
|
|
253
|
+
|
|
254
|
+
---
|
|
255
|
+
|
|
256
|
+
Made with ❤️ by [Empathy](https://empathy.co)
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@import './components/attach.css';
|
|
2
|
+
@import './components/badge.css';
|
|
3
|
+
@import './components/button-group.css';
|
|
4
|
+
@import './components/button.css';
|
|
5
|
+
@import './components/filter-facet.css';
|
|
6
|
+
@import './components/highlight.css';
|
|
7
|
+
@import './components/icon.css';
|
|
8
|
+
@import './components/input-group.css';
|
|
9
|
+
@import './components/layout.css';
|
|
10
|
+
@import './components/input.css';
|
|
11
|
+
@import './components/picture.css';
|
|
12
|
+
@import './components/progress-bar.css';
|
|
13
|
+
@import './components/scroll.css';
|
|
14
|
+
@import './components/sliding-panel.css';
|
|
15
|
+
@import './components/suggestion-group.css';
|
|
16
|
+
@import './components/suggestion.css';
|
|
17
|
+
@import './components/tag.css';
|
|
18
|
+
@import './components/typography.css';
|
package/dist/index.css
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-design-system",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "1.0.0-alpha.0",
|
|
5
5
|
"description": "Empathy X Tailwind Design System",
|
|
6
6
|
"author": "Empathy Systems Corporation S.L.",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@vue/tsconfig": "0.9.1",
|
|
51
51
|
"tailwindcss": "4.2.2",
|
|
52
52
|
"typescript": "5.9.3",
|
|
53
|
-
"vite": "7.3.
|
|
53
|
+
"vite": "7.3.2",
|
|
54
54
|
"vite-svg-loader": "5.1.1",
|
|
55
55
|
"vue": "3.5.32",
|
|
56
56
|
"vue-tsc": "3.2.6"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "4fd80a9e767e5c2c5a29bcb8ba8270b2d70ec4cc"
|
|
62
62
|
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
@import './attach.css';
|
|
2
|
-
@import './badge.css';
|
|
3
|
-
@import './button-group.css';
|
|
4
|
-
@import './button.css';
|
|
5
|
-
@import './filter-facet.css';
|
|
6
|
-
@import './highlight.css';
|
|
7
|
-
@import './icon.css';
|
|
8
|
-
@import './input-group.css';
|
|
9
|
-
@import './layout.css';
|
|
10
|
-
@import './input.css';
|
|
11
|
-
@import './picture.css';
|
|
12
|
-
@import './progress-bar.css';
|
|
13
|
-
@import './scroll.css';
|
|
14
|
-
@import './sliding-panel.css';
|
|
15
|
-
@import './suggestion-group.css';
|
|
16
|
-
@import './suggestion.css';
|
|
17
|
-
@import './tag.css';
|
|
18
|
-
@import './typography.css';
|