@elsapiens/styles 0.1.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.
Files changed (8) hide show
  1. package/README.md +255 -0
  2. package/dist/backgrounds.css +892 -0
  3. package/dist/color-schemes.css +189 -0
  4. package/dist/components.css +1072 -0
  5. package/dist/index.css +888 -0
  6. package/dist/variables.css +796 -0
  7. package/package.json +33 -0
  8. package/tailwind-preset.js +130 -0
package/README.md ADDED
@@ -0,0 +1,255 @@
1
+ # @elsapiens/styles
2
+
3
+ CSS styles and Tailwind preset configuration for elSapiens SDK.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @elsapiens/styles
9
+ # or
10
+ pnpm add @elsapiens/styles
11
+ ```
12
+
13
+ ## Features
14
+
15
+ - CSS custom properties (design tokens)
16
+ - Tailwind CSS preset with extended theme
17
+ - Component styles for consistent UI
18
+ - Dark mode support
19
+ - No runtime JavaScript - pure CSS
20
+
21
+ ## Usage
22
+
23
+ ### Import Styles
24
+
25
+ ```tsx
26
+ // In your main entry file (main.tsx or App.tsx)
27
+ import '@elsapiens/styles/variables.css'; // CSS variables
28
+ import '@elsapiens/styles/components.css'; // Component styles
29
+
30
+ // Or import everything
31
+ import '@elsapiens/styles';
32
+ ```
33
+
34
+ ### Tailwind Configuration
35
+
36
+ ```js
37
+ // tailwind.config.js
38
+ import elsapiensPreset from '@elsapiens/styles/tailwind-preset';
39
+
40
+ export default {
41
+ presets: [elsapiensPreset],
42
+ content: [
43
+ './src/**/*.{js,ts,jsx,tsx}',
44
+ './node_modules/@elsapiens/ui/**/*.{js,ts,jsx,tsx}',
45
+ ],
46
+ };
47
+ ```
48
+
49
+ ## CSS Variables
50
+
51
+ The styles package provides a comprehensive set of CSS custom properties:
52
+
53
+ ### Colors
54
+
55
+ ```css
56
+ /* Primary colors */
57
+ --primary: 262 83% 58%; /* Main brand color */
58
+ --primary-foreground: 0 0% 100%;
59
+
60
+ /* Semantic colors */
61
+ --success: 142 76% 36%;
62
+ --warning: 38 92% 50%;
63
+ --error: 0 84% 60%;
64
+ --info: 199 89% 48%;
65
+
66
+ /* Neutral colors */
67
+ --background: 0 0% 100%;
68
+ --foreground: 240 10% 4%;
69
+ --muted: 240 5% 96%;
70
+ --muted-foreground: 240 4% 46%;
71
+
72
+ /* Component colors */
73
+ --card: 0 0% 100%;
74
+ --card-foreground: 240 10% 4%;
75
+ --popover: 0 0% 100%;
76
+ --popover-foreground: 240 10% 4%;
77
+ --border: 240 6% 90%;
78
+ --input: 240 6% 90%;
79
+ --ring: 262 83% 58%;
80
+ ```
81
+
82
+ ### Dark Mode
83
+
84
+ Dark mode is automatically applied when the `dark` class is on the document:
85
+
86
+ ```html
87
+ <html class="dark">
88
+ <!-- Dark mode styles automatically apply -->
89
+ </html>
90
+ ```
91
+
92
+ ```css
93
+ /* Dark mode colors (automatically applied) */
94
+ .dark {
95
+ --background: 240 10% 4%;
96
+ --foreground: 0 0% 98%;
97
+ --primary: 262 83% 68%;
98
+ /* ... other dark mode variables */
99
+ }
100
+ ```
101
+
102
+ ### Typography
103
+
104
+ ```css
105
+ /* Font families */
106
+ --font-sans: 'Inter', system-ui, sans-serif;
107
+ --font-mono: 'JetBrains Mono', monospace;
108
+
109
+ /* Font sizes (via Tailwind) */
110
+ text-xs /* 0.75rem */
111
+ text-sm /* 0.875rem */
112
+ text-base /* 1rem */
113
+ text-lg /* 1.125rem */
114
+ text-xl /* 1.25rem */
115
+ text-2xl /* 1.5rem */
116
+ ```
117
+
118
+ ### Spacing & Sizing
119
+
120
+ ```css
121
+ /* Border radius */
122
+ --radius: 0.5rem; /* Used for cards, buttons, inputs */
123
+ --radius-sm: 0.25rem;
124
+ --radius-lg: 0.75rem;
125
+ --radius-full: 9999px;
126
+
127
+ /* Shadows */
128
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
129
+ --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
130
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
131
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
132
+ ```
133
+
134
+ ## Component Styles
135
+
136
+ The `components.css` file includes pre-built styles for common patterns:
137
+
138
+ ### Buttons
139
+
140
+ ```html
141
+ <button class="el-btn el-btn-primary">Primary</button>
142
+ <button class="el-btn el-btn-secondary">Secondary</button>
143
+ <button class="el-btn el-btn-outline">Outline</button>
144
+ <button class="el-btn el-btn-ghost">Ghost</button>
145
+
146
+ <!-- Sizes -->
147
+ <button class="el-btn el-btn-sm">Small</button>
148
+ <button class="el-btn el-btn-lg">Large</button>
149
+ ```
150
+
151
+ ### Badges
152
+
153
+ ```html
154
+ <span class="el-badge">Default</span>
155
+ <span class="el-badge el-badge-primary">Primary</span>
156
+ <span class="el-badge el-badge-success">Success</span>
157
+ <span class="el-badge el-badge-warning">Warning</span>
158
+ <span class="el-badge el-badge-danger">Danger</span>
159
+ ```
160
+
161
+ ### Cards
162
+
163
+ ```html
164
+ <div class="el-card">
165
+ <div class="el-card-header">
166
+ <h3 class="el-card-title">Title</h3>
167
+ </div>
168
+ <div class="el-card-content">
169
+ Content here
170
+ </div>
171
+ </div>
172
+ ```
173
+
174
+ ### Focus Rings
175
+
176
+ ```html
177
+ <!-- Automatic focus ring on interactive elements -->
178
+ <button class="el-focus-ring">Focusable</button>
179
+ <input class="el-focus-ring" />
180
+ ```
181
+
182
+ ## Tailwind Preset
183
+
184
+ The preset extends Tailwind with elSapiens design tokens:
185
+
186
+ ```js
187
+ // What the preset provides:
188
+ {
189
+ theme: {
190
+ extend: {
191
+ colors: {
192
+ primary: 'hsl(var(--primary))',
193
+ secondary: 'hsl(var(--secondary))',
194
+ success: 'hsl(var(--success))',
195
+ warning: 'hsl(var(--warning))',
196
+ error: 'hsl(var(--error))',
197
+ info: 'hsl(var(--info))',
198
+ background: 'hsl(var(--background))',
199
+ foreground: 'hsl(var(--foreground))',
200
+ muted: 'hsl(var(--muted))',
201
+ 'muted-foreground': 'hsl(var(--muted-foreground))',
202
+ border: 'hsl(var(--border))',
203
+ input: 'hsl(var(--input))',
204
+ ring: 'hsl(var(--ring))',
205
+ card: 'hsl(var(--card))',
206
+ 'card-foreground': 'hsl(var(--card-foreground))',
207
+ popover: 'hsl(var(--popover))',
208
+ 'popover-foreground': 'hsl(var(--popover-foreground))',
209
+ },
210
+ borderRadius: {
211
+ DEFAULT: 'var(--radius)',
212
+ sm: 'var(--radius-sm)',
213
+ lg: 'var(--radius-lg)',
214
+ },
215
+ fontFamily: {
216
+ sans: ['var(--font-sans)'],
217
+ mono: ['var(--font-mono)'],
218
+ },
219
+ },
220
+ },
221
+ }
222
+ ```
223
+
224
+ ## Files
225
+
226
+ | File | Description |
227
+ |------|-------------|
228
+ | `index.css` | Complete styles (imports all) |
229
+ | `variables.css` | CSS custom properties |
230
+ | `components.css` | Component utility classes |
231
+ | `tailwind-preset.js` | Tailwind configuration preset |
232
+
233
+ ## Customization
234
+
235
+ Override CSS variables to customize the theme:
236
+
237
+ ```css
238
+ /* In your app's CSS */
239
+ :root {
240
+ /* Custom primary color */
241
+ --primary: 220 90% 56%; /* Blue instead of purple */
242
+
243
+ /* Custom border radius */
244
+ --radius: 0.75rem; /* More rounded */
245
+ }
246
+
247
+ /* Custom dark mode */
248
+ .dark {
249
+ --primary: 220 90% 66%;
250
+ }
251
+ ```
252
+
253
+ ## License
254
+
255
+ MIT