@marigold/system 11.1.1 → 11.2.0

package/dist/index.d.mts

@@ -86,17 +86,15 @@ declare const get: (obj: object, path: string, fallback?: any) => any;
  */
 declare const isValidCssCustomPropertyName: (val: string) => boolean;
 /**
- * Returns a CSS variable reference string based on the input value.
+ * Ensures that the given value is formatted as a CSS variable reference.
  *
- * If the provided value is a valid CSS custom property name (without the leading `--`),
- * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
- * both as the custom property name (with a `--` prefix) and as the fallback value.
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
  *
- * If the value is not a valid custom property name, the function simply returns the value.
- *
- * If no input is given, the function returns `undefined`.
+ * If the value is not a valid custom property name, the function returns the original value.
  */
-declare const ensureCssVar: (val?: string) => string | undefined;
+declare const ensureCssVar: (val: string, prefix?: string) => string;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;

package/dist/index.d.ts

@@ -86,17 +86,15 @@ declare const get: (obj: object, path: string, fallback?: any) => any;
  */
 declare const isValidCssCustomPropertyName: (val: string) => boolean;
 /**
- * Returns a CSS variable reference string based on the input value.
+ * Ensures that the given value is formatted as a CSS variable reference.
  *
- * If the provided value is a valid CSS custom property name (without the leading `--`),
- * the function returns a string in the format `var(--<val>, <val>)`, which uses the value
- * both as the custom property name (with a `--` prefix) and as the fallback value.
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
  *
- * If the value is not a valid custom property name, the function simply returns the value.
- *
- * If no input is given, the function returns `undefined`.
+ * If the value is not a valid custom property name, the function returns the original value.
  */
-declare const ensureCssVar: (val?: string) => string | undefined;
+declare const ensureCssVar: (val: string, prefix?: string) => string;
 
 interface NestedStringObject {
     [key: string]: NestedStringObject | string;

package/dist/index.js

@@ -97,7 +97,7 @@ var get = (obj, path, fallback) => {
   return result === void 0 ? fallback : result;
 };
 var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
-var ensureCssVar = (val) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
+var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
 
 // src/components/SVG/SVG.tsx
 var SVG = (0, import_react.forwardRef)(
@@ -110,7 +110,7 @@ var SVG = (0, import_react.forwardRef)(
         width: `${props.width || size}px`,
         height: `${props.height || size}px`,
         className: cn("flex-none fill-current", className),
-        style: { color: ensureCssVar(color) }
+        style: { color: color && ensureCssVar(color, "color") }
       },
       children
     );

package/dist/index.mjs

@@ -25,7 +25,7 @@ var get = (obj, path, fallback) => {
   return result === void 0 ? fallback : result;
 };
 var isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
-var ensureCssVar = (val) => val ? isValidCssCustomPropertyName(val) ? `var(--${val}, ${val})` : val : void 0;
+var ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
 
 // src/components/SVG/SVG.tsx
 var SVG = forwardRef(
@@ -38,7 +38,7 @@ var SVG = forwardRef(
         width: `${props.width || size}px`,
         height: `${props.height || size}px`,
         className: cn("flex-none fill-current", className),
-        style: { color: ensureCssVar(color) }
+        style: { color: color && ensureCssVar(color, "color") }
       },
       children
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "11.1.1",
+  "version": "11.2.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -29,18 +29,19 @@
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",
     "tailwind-merge": "2.6.0",
-    "@marigold/types": "1.2.1"
+    "@marigold/types": "1.3.0"
   },
   "peerDependencies": {
-    "react": "19.x",
-    "react-dom": "19.x"
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.8",
+    "@babel/core": "7.26.9",
     "postcss": "8.5.2",
     "react": "19.0.0",
+    "@types/react": "19.0.8",
     "tailwindcss": "4.0.6",
-    "tsup": "8.3.5",
+    "tsup": "8.3.6",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {