@kiva/kv-components 8.11.0 → 8.11.2
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/docs/make-to-vue.md +3 -3
- package/package.json +4 -4
package/docs/make-to-vue.md
CHANGED
|
@@ -85,7 +85,7 @@ Decide: new component, v2 of existing, or enhancement to existing.
|
|
|
85
85
|
Figma Make output is presentational/demo code. Determine what needs to change:
|
|
86
86
|
|
|
87
87
|
- **Hardcoded data** -> Dynamic props
|
|
88
|
-
- **Hardcoded colors** -> Design system tokens from `@kiva/kv-tokens
|
|
88
|
+
- **Hardcoded colors** -> Design system tokens from `@kiva/kv-tokens`
|
|
89
89
|
- **Fixed dimensions** -> Container-responsive sizing
|
|
90
90
|
- **Presentational strings** -> Configurable via props/slots
|
|
91
91
|
- **React animation libraries** -> CSS transitions or Vue composables (prefer no extra deps)
|
|
@@ -123,7 +123,7 @@ Figma Make outputs raw Tailwind classes. Convert to kv-components patterns:
|
|
|
123
123
|
- **Replace hardcoded font families** with design system fonts (`tw-font-sans`, `tw-font-serif`)
|
|
124
124
|
- **Replace hardcoded colors** with token references where possible
|
|
125
125
|
- **Replace pixel values** in Tailwind classes with spacing scale values (8px increments)
|
|
126
|
-
- **Use design tokens** from `@kiva/kv-tokens
|
|
126
|
+
- **Use design tokens** from `@kiva/kv-tokens` for colors, spacing, typography
|
|
127
127
|
|
|
128
128
|
### 2.4 Animation Translation
|
|
129
129
|
|
|
@@ -184,7 +184,7 @@ Extract into `src/utils/` when:
|
|
|
184
184
|
|
|
185
185
|
### 4.1 Colors
|
|
186
186
|
|
|
187
|
-
Always check `@kiva/kv-tokens
|
|
187
|
+
Always check `@kiva/kv-tokens` for existing color tokens before using hardcoded hex values. Map Figma Make colors to the closest token:
|
|
188
188
|
|
|
189
189
|
```js
|
|
190
190
|
import kvTokensPrimitives from '@kiva/kv-tokens';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "8.11.
|
|
3
|
+
"version": "8.11.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@babel/preset-env": "^7.24.8",
|
|
35
35
|
"@babel/preset-react": "^7.24.7",
|
|
36
36
|
"@babel/preset-typescript": "^7.24.7",
|
|
37
|
-
"@kiva/kv-tokens": "^4.0.
|
|
37
|
+
"@kiva/kv-tokens": "^4.0.1",
|
|
38
38
|
"@kiva/vite-plugin-vue-lib-css": "^2.0.0",
|
|
39
39
|
"@laynezh/vite-plugin-lib-assets": "^0.6.1",
|
|
40
40
|
"@mdi/js": "^7.4.47",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
},
|
|
107
107
|
"peerDependencies": {
|
|
108
108
|
"@apollo/client": "3.x",
|
|
109
|
-
"@kiva/kv-tokens": "
|
|
109
|
+
"@kiva/kv-tokens": "4.x",
|
|
110
110
|
"@mdi/js": "7.x",
|
|
111
111
|
"@vuepic/vue-datepicker": "^11.0.2",
|
|
112
112
|
"@vueuse/integrations": "14.x",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"embla-carousel-fade",
|
|
126
126
|
"popper.js"
|
|
127
127
|
],
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "dee021e4ee9fb8478e56e83090ce557b1ee3ba41"
|
|
129
129
|
}
|