@kalink-ui/seedly 0.30.1 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @kalink-ui/seedly
 
+## 0.31.0
+
+### Minor Changes
+
+- 0afb723: feat(seedly/form-field): switch to theme contract and export vars
+  - Replace createGlobalTheme with createThemeContract + assignVars for FormField.
+  - Export formFieldVars from the FormField module's index for external theming.
+
 ## 0.30.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -43,8 +43,8 @@
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3",
-    "@kalink-ui/typescript-config": "0.4.0",
-    "@kalink-ui/eslint-config": "0.10.0"
+    "@kalink-ui/eslint-config": "0.10.0",
+    "@kalink-ui/typescript-config": "0.4.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.1",

package/src/components/form-field/form-field.css.ts

@@ -1,20 +1,18 @@
-import { createGlobalTheme, style } from '@vanilla-extract/css';
+import { assignVars, createThemeContract, style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, typography } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const formFieldVars = createGlobalTheme(':root', {
-  '@layer': components,
-
+export const formFieldVars = createThemeContract({
   spacing: {
-    vertical: sys.spacing[2],
+    vertical: null,
   },
 
   color: {
-    foreground: sys.color.foreground,
-    background: sys.color.background,
-    outline: sys.color.foreground,
+    foreground: null,
+    background: null,
+    outline: null,
   },
 });
 
@@ -31,6 +29,18 @@ export const formFieldStyle = recipe({
 
         color: formFieldVars.color.foreground,
 
+        vars: {
+          ...assignVars(formFieldVars.color, {
+            foreground: sys.color.foreground,
+            background: sys.color.background,
+            outline: sys.color.foreground,
+          }),
+
+          ...assignVars(formFieldVars.spacing, {
+            vertical: sys.spacing[2],
+          }),
+        },
+
         selectors: {
           '&:disabled, &:has(:disabled)': {
             cursor: 'not-allowed',

package/src/components/form-field/index.ts

@@ -1,6 +1,6 @@
 export { useFormFieldContext } from './form-field-context';
 export { useFormFieldItemContext } from './form-field-item-context';
-export { formFieldStyle } from './form-field.css';
+export { formFieldStyle, formFieldVars } from './form-field.css';
 export { FormFieldControl } from './form-field-control';
 export { FormFieldDescription } from './form-field-description';
 export { FormFieldError } from './form-field-error';