@hkdigital/lib-core 0.4.10 → 0.4.12
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/dist/config/README.md +28 -0
- package/dist/design/README.md +12 -0
- package/package.json +8 -8
package/dist/config/README.md
CHANGED
|
@@ -56,6 +56,34 @@ export default defineConfig(
|
|
|
56
56
|
);
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
+
## PostCSS Configuration
|
|
60
|
+
|
|
61
|
+
HKdigital projects use a standardized PostCSS configuration that integrates with Tailwind CSS.
|
|
62
|
+
|
|
63
|
+
### Quick Start
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
// postcss.config.js
|
|
67
|
+
export default {
|
|
68
|
+
plugins: {
|
|
69
|
+
'@tailwindcss/postcss': {}
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**Why this configuration:**
|
|
75
|
+
- Uses the modern `@tailwindcss/postcss` plugin for Tailwind 4+ compatibility
|
|
76
|
+
- Handles CSS processing for the design system and component styles
|
|
77
|
+
- Works seamlessly with SvelteKit and Vite build processes
|
|
78
|
+
|
|
79
|
+
### Integration
|
|
80
|
+
|
|
81
|
+
This PostCSS config works together with:
|
|
82
|
+
- `src/app.css` with `@import 'tailwindcss'` directive
|
|
83
|
+
- `tailwind.config.js` with design system extensions
|
|
84
|
+
- Vite configuration for CSS processing
|
|
85
|
+
|
|
86
|
+
For projects using the complete hkdigital setup, this PostCSS configuration is essential for proper CSS compilation and design system integration.
|
|
59
87
|
|
|
60
88
|
## Imagetools Configuration
|
|
61
89
|
|
package/dist/design/README.md
CHANGED
|
@@ -6,6 +6,15 @@ A comprehensive, responsive design system built for SvelteKit applications. This
|
|
|
6
6
|
|
|
7
7
|
### Basic Usage
|
|
8
8
|
|
|
9
|
+
**1. Import theme CSS in your app.css (REQUIRED for color classes):**
|
|
10
|
+
```css
|
|
11
|
+
/* src/app.css */
|
|
12
|
+
@import 'tailwindcss';
|
|
13
|
+
@import '../node_modules/@hkdigital/lib-core/dist/design/themes/hkdev/theme.css';
|
|
14
|
+
@import '../node_modules/@hkdigital/lib-core/dist/css/utilities.css';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**2. Configure Tailwind:**
|
|
9
18
|
```javascript
|
|
10
19
|
// tailwind.config.js
|
|
11
20
|
import {
|
|
@@ -35,6 +44,7 @@ export default {
|
|
|
35
44
|
};
|
|
36
45
|
```
|
|
37
46
|
|
|
47
|
+
**3. Add design tokens to your layout:**
|
|
38
48
|
```html
|
|
39
49
|
<!-- +layout.svelte -->
|
|
40
50
|
<script>
|
|
@@ -48,6 +58,8 @@ export default {
|
|
|
48
58
|
{@render children()}
|
|
49
59
|
```
|
|
50
60
|
|
|
61
|
+
**⚠️ Important:** Without the theme CSS import, color classes like `bg-surface-100`, `text-primary-500`, etc. will fail with "Cannot apply unknown utility class" errors during build.
|
|
62
|
+
|
|
51
63
|
## CSS Architecture & app.css
|
|
52
64
|
|
|
53
65
|
### Overview
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hkdigital/lib-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.12",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "HKdigital",
|
|
6
6
|
"url": "https://hkdigital.nl"
|
|
@@ -72,15 +72,15 @@
|
|
|
72
72
|
"./*": "./dist/*"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
|
-
"@eslint/js": "^9.
|
|
75
|
+
"@eslint/js": "^9.33.0",
|
|
76
76
|
"@skeletonlabs/skeleton": "^3.1.7",
|
|
77
77
|
"@steeze-ui/heroicons": "^2.4.2",
|
|
78
|
-
"@sveltejs/kit": "^2.
|
|
79
|
-
"eslint-plugin-import": "^2.
|
|
80
|
-
"pino": "^9.
|
|
81
|
-
"pino-pretty": "^13.
|
|
82
|
-
"runed": "^0.
|
|
83
|
-
"svelte": "^5.
|
|
78
|
+
"@sveltejs/kit": "^2.28.0",
|
|
79
|
+
"eslint-plugin-import": "^2.32.0",
|
|
80
|
+
"pino": "^9.8.0",
|
|
81
|
+
"pino-pretty": "^13.1.1",
|
|
82
|
+
"runed": "^0.31.1",
|
|
83
|
+
"svelte": "^5.38.1",
|
|
84
84
|
"svelte-preprocess": "^6.0.3",
|
|
85
85
|
"valibot": "^1.1.0",
|
|
86
86
|
"vite-imagetools": "^8.0.0"
|