@rhavenside/baseline-ui 1.0.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 (49) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/LICENSE +22 -0
  3. package/README.md +272 -0
  4. package/dist/.gitkeep +0 -0
  5. package/dist/baseline.css +4811 -0
  6. package/dist/baseline.css.map +1 -0
  7. package/dist/baseline.min.css +1 -0
  8. package/package.json +59 -0
  9. package/src/base/_base.scss +182 -0
  10. package/src/base/_normalize.scss +186 -0
  11. package/src/base/_reset.scss +24 -0
  12. package/src/baseline.scss +48 -0
  13. package/src/components/_alert.scss +97 -0
  14. package/src/components/_badge.scss +105 -0
  15. package/src/components/_button.scss +200 -0
  16. package/src/components/_card.scss +94 -0
  17. package/src/components/_dropdown.scss +111 -0
  18. package/src/components/_form.scss +324 -0
  19. package/src/components/_modal.scss +157 -0
  20. package/src/components/_nav.scss +211 -0
  21. package/src/components/_progress.scss +65 -0
  22. package/src/components/_spinner.scss +118 -0
  23. package/src/components/_table.scss +182 -0
  24. package/src/components/_tooltip.scss +134 -0
  25. package/src/fonts/.gitkeep +4 -0
  26. package/src/icons/_icons.scss +150 -0
  27. package/src/layout/_container.scss +45 -0
  28. package/src/layout/_flex.scss +174 -0
  29. package/src/layout/_grid-modern.scss +128 -0
  30. package/src/layout/_grid.scss +123 -0
  31. package/src/themes/_dark.scss +122 -0
  32. package/src/themes/_light.scss +7 -0
  33. package/src/tokens/_borders.scss +36 -0
  34. package/src/tokens/_colors.scss +136 -0
  35. package/src/tokens/_forms.scss +170 -0
  36. package/src/tokens/_glassmorphism.scss +60 -0
  37. package/src/tokens/_shadows.scss +24 -0
  38. package/src/tokens/_spacing.scss +31 -0
  39. package/src/tokens/_tokens.scss +14 -0
  40. package/src/tokens/_transitions.scss +42 -0
  41. package/src/tokens/_typography.scss +89 -0
  42. package/src/tokens/_z-index.scss +26 -0
  43. package/src/utilities/_accessibility.scss +76 -0
  44. package/src/utilities/_animations.scss +177 -0
  45. package/src/utilities/_display.scss +89 -0
  46. package/src/utilities/_position.scss +105 -0
  47. package/src/utilities/_spacing.scss +87 -0
  48. package/src/utilities/_text.scss +255 -0
  49. package/src/utilities/_visibility.scss +74 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,35 @@
1
+ # Changelog
2
+
3
+ Alle wichtigen Änderungen an diesem Projekt werden in dieser Datei dokumentiert.
4
+
5
+ Das Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/),
6
+ und dieses Projekt folgt [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [1.0.0] - 2024-01-XX
9
+
10
+ ### Hinzugefügt
11
+ - Design Tokens System (Colors, Spacing, Typography, Borders, Shadows, Z-Index, Transitions)
12
+ - Base Layer (Reset & Normalisierung)
13
+ - Layout-System (Container, Flexbox 12-Spalten-Grid, CSS Grid Utilities, Flex Utilities)
14
+ - Utility-Klassen (Spacing, Display, Text, Visibility, Position, Animations, Accessibility)
15
+ - Komponenten:
16
+ - Button (Primary, Secondary, Outline, Ghost, Link)
17
+ - Form (Input, Select, Textarea, Checkbox, Radio, Switch, File, Range)
18
+ - Card (Header, Body, Footer, Variants)
19
+ - Alert (Info, Success, Warning, Error)
20
+ - Badge (Variants + Pills)
21
+ - Modal (Backdrop, Header, Body, Footer)
22
+ - Dropdown (Trigger + Menu)
23
+ - Navigation (Horizontal, Vertical, Tabs, Pills, Breadcrumb, Pagination)
24
+ - Table (Striped, Bordered, Hover, Responsive)
25
+ - Tooltip (Alle Positionen)
26
+ - Progress (Determinate, Indeterminate)
27
+ - Spinner (Sizes, Variants)
28
+ - Theme-System (Light & Dark Mode mit prefers-color-scheme)
29
+ - Icon-Font System (Basis-Icon-Set)
30
+ - Build-System (Dart Sass Kompilierung, Source Maps, Minification, Watch-Mode)
31
+ - Vollständige Dokumentation (README, HTML-Demo, Storybook)
32
+ - WCAG 2.1 AA-konforme Accessibility-Features
33
+
34
+ [1.0.0]: https://github.com/yourusername/baseline/releases/tag/v1.0.0
35
+
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Baseline UI
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
package/README.md ADDED
@@ -0,0 +1,272 @@
1
+ # Baseline Design Framework
2
+
3
+ Ein neutrales, konfigurierbares Design-Framework mit SCSS-Quellen und kompiliertem CSS. Framework-unabhängig und für alle Projekte nutzbar.
4
+
5
+ ## 🎯 Philosophie
6
+
7
+ Baseline ist **kein Projekt-CSS**, sondern ein **Design-Framework**:
8
+
9
+ - ✅ **Darf**: Layout, Grid, Spacing, Typografie, Komponenten liefern
10
+ - ✅ **Darf**: Neutral, konfigurierbar und stabil sein
11
+ - ❌ **Darf nicht**: Projektbezogene Farben, Logos oder Sonderfälle enthalten
12
+ - ❌ **Darf nicht**: App-Logik oder Zustände kennen
13
+
14
+ ## 📦 Installation
15
+
16
+ ### CDN (Schnellstart)
17
+
18
+ ```html
19
+ <link rel="stylesheet" href="https://cdn.example.com/baseline/1.0.0/baseline.min.css">
20
+ ```
21
+
22
+ ### npm
23
+
24
+ ```bash
25
+ npm install @baseline/ui
26
+ ```
27
+
28
+ ### SCSS Import
29
+
30
+ ```scss
31
+ @use '@baseline/ui/src/baseline';
32
+ ```
33
+
34
+ ### CSS Import
35
+
36
+ ```css
37
+ @import '@baseline/ui/dist/baseline.css';
38
+ ```
39
+
40
+ ## 🚀 Schnellstart
41
+
42
+ ```html
43
+ <!DOCTYPE html>
44
+ <html lang="de">
45
+ <head>
46
+ <meta charset="UTF-8">
47
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
48
+ <title>Baseline Framework</title>
49
+ <link rel="stylesheet" href="dist/baseline.min.css">
50
+ </head>
51
+ <body>
52
+ <div class="bl-container">
53
+ <h1>Willkommen bei Baseline</h1>
54
+ <button class="bl-btn bl-btn-primary">Klick mich</button>
55
+ </div>
56
+ </body>
57
+ </html>
58
+ ```
59
+
60
+ ## 📚 Dokumentation
61
+
62
+ ### Design Tokens
63
+
64
+ Alle Design-Tokens sind als CSS Custom Properties verfügbar:
65
+
66
+ ```css
67
+ :root {
68
+ --color-primary: #111827;
69
+ --spacing-md: 1rem;
70
+ --font-size-base: 1rem;
71
+ --border-radius-md: 0.25rem;
72
+ /* ... */
73
+ }
74
+ ```
75
+
76
+ ### Layout-System
77
+
78
+ #### Container
79
+
80
+ ```html
81
+ <div class="bl-container">Maximale Breite mit Padding</div>
82
+ <div class="bl-container-fluid">Volle Breite mit Padding</div>
83
+ ```
84
+
85
+ #### Flexbox Grid (12 Spalten)
86
+
87
+ ```html
88
+ <div class="bl-row">
89
+ <div class="bl-col-6">50% Breite</div>
90
+ <div class="bl-col-6">50% Breite</div>
91
+ </div>
92
+ ```
93
+
94
+ #### CSS Grid
95
+
96
+ ```html
97
+ <div class="bl-grid bl-grid-cols-3 bl-gap-md">
98
+ <div>Item 1</div>
99
+ <div>Item 2</div>
100
+ <div>Item 3</div>
101
+ </div>
102
+ ```
103
+
104
+ ### Komponenten
105
+
106
+ #### Button
107
+
108
+ ```html
109
+ <button class="bl-btn bl-btn-primary">Primary</button>
110
+ <button class="bl-btn bl-btn-secondary">Secondary</button>
111
+ <button class="bl-btn bl-btn-outline">Outline</button>
112
+ <button class="bl-btn bl-btn-ghost">Ghost</button>
113
+ ```
114
+
115
+ #### Card
116
+
117
+ ```html
118
+ <div class="bl-card">
119
+ <div class="bl-card-header">
120
+ <h3 class="bl-card-title">Titel</h3>
121
+ </div>
122
+ <div class="bl-card-body">
123
+ <p>Inhalt</p>
124
+ </div>
125
+ <div class="bl-card-footer">
126
+ <button class="bl-btn bl-btn-primary">Aktion</button>
127
+ </div>
128
+ </div>
129
+ ```
130
+
131
+ #### Form
132
+
133
+ ```html
134
+ <div class="bl-form-group">
135
+ <label class="bl-form-label" for="email">E-Mail</label>
136
+ <input type="email" id="email" class="bl-input" placeholder="name@example.com">
137
+ <span class="bl-form-helper">Wir teilen Ihre E-Mail nicht.</span>
138
+ </div>
139
+ ```
140
+
141
+ ### Utilities
142
+
143
+ #### Spacing
144
+
145
+ ```html
146
+ <div class="m-md p-lg">Margin & Padding</div>
147
+ <div class="mt-xl mb-sm">Top & Bottom</div>
148
+ ```
149
+
150
+ #### Text
151
+
152
+ ```html
153
+ <p class="bl-text-center bl-text-lg bl-font-bold">Zentrierter, großer, fetter Text</p>
154
+ ```
155
+
156
+ #### Display
157
+
158
+ ```html
159
+ <div class="bl-d-flex bl-justify-center bl-items-center">Flexbox Center</div>
160
+ ```
161
+
162
+ ## 🎨 Theming
163
+
164
+ ### Dark Mode (Automatisch)
165
+
166
+ Das Framework unterstützt automatisch `prefers-color-scheme: dark`:
167
+
168
+ ```css
169
+ @media (prefers-color-scheme: dark) {
170
+ /* Dark Mode Styles werden automatisch angewendet */
171
+ }
172
+ ```
173
+
174
+ ### Manuelles Theme-Toggle
175
+
176
+ ```html
177
+ <html class="bl-theme-dark">
178
+ <!-- Dark Mode aktiviert -->
179
+ </html>
180
+ ```
181
+
182
+ Oder via Data-Attribut:
183
+
184
+ ```html
185
+ <html data-theme="dark">
186
+ <!-- Dark Mode aktiviert -->
187
+ </html>
188
+ ```
189
+
190
+ ### Custom Properties überschreiben
191
+
192
+ ```css
193
+ :root {
194
+ --color-primary: #3b82f6; /* Eigene Primärfarbe */
195
+ --spacing-md: 1.25rem; /* Eigene Abstände */
196
+ }
197
+ ```
198
+
199
+ ## ♿ Accessibility
200
+
201
+ Baseline ist **WCAG 2.1 AA-konform**:
202
+
203
+ - Focus-Styles für alle interaktiven Elemente
204
+ - Screen-Reader-Utilities (`.bl-sr-only`)
205
+ - Skip-Links (`.bl-skip-link`)
206
+ - High-Contrast-Mode Support
207
+ - Reduced Motion Support
208
+
209
+ ## 🛠️ Entwicklung
210
+
211
+ ### Build
212
+
213
+ ```bash
214
+ npm run build
215
+ ```
216
+
217
+ ### Watch Mode
218
+
219
+ ```bash
220
+ npm run watch
221
+ ```
222
+
223
+ ### Storybook
224
+
225
+ ```bash
226
+ npm run docs:dev
227
+ ```
228
+
229
+ ## 📖 Komponenten-Übersicht
230
+
231
+ - **Button** - Primäre, sekundäre, Outline, Ghost, Link Varianten
232
+ - **Form** - Input, Select, Textarea, Checkbox, Radio, Switch, File, Range
233
+ - **Card** - Header, Body, Footer mit Varianten
234
+ - **Alert** - Info, Success, Warning, Error mit Dismiss-Funktion
235
+ - **Badge** - Varianten + Pills
236
+ - **Modal** - Dialog mit Backdrop, Header, Body, Footer
237
+ - **Dropdown** - Trigger + Menu
238
+ - **Navigation** - Horizontal, Vertical, Tabs, Pills, Breadcrumb, Pagination
239
+ - **Table** - Striped, Bordered, Hover, Responsive
240
+ - **Tooltip** - Alle Positionen (top, right, bottom, left)
241
+ - **Progress** - Determinate, Indeterminate, Striped
242
+ - **Spinner** - Loading-Indikatoren
243
+
244
+ ## 🌐 Browser-Support
245
+
246
+ - Chrome (letzte 2 Versionen)
247
+ - Firefox (letzte 2 Versionen)
248
+ - Safari (letzte 2 Versionen)
249
+ - Edge (letzte 2 Versionen)
250
+
251
+ ## 📝 Versionierung
252
+
253
+ Baseline verwendet [Semantic Versioning](https://semver.org/):
254
+
255
+ - **1.x** = Stabil
256
+ - Breaking Changes nur bei Major-Version
257
+ - Changelog wird immer gepflegt
258
+
259
+ ## 📄 Lizenz
260
+
261
+ MIT License - siehe [LICENSE](LICENSE) Datei
262
+
263
+ ## 🤝 Beitragen
264
+
265
+ Beiträge sind willkommen! Bitte erstelle ein Issue oder einen Pull Request.
266
+
267
+ ## 🔗 Links
268
+
269
+ - [GitHub](https://github.com/yourusername/baseline)
270
+ - [Dokumentation](https://baseline.example.com)
271
+ - [Changelog](CHANGELOG.md)
272
+
package/dist/.gitkeep ADDED
File without changes