@kuma-ui/system - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/border.js

@@ -55,9 +55,2 @@ "use strict";
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-var radiusConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.radii?.[v] || toCssUnit(v);
-};
-
 // src/border.ts
@@ -104,7 +97,7 @@ var borderMappings = {
   borderY: toCssUnit,
-  borderRadius: radiusConverter,
-  borderTopLeftRadius: radiusConverter,
-  borderTopRightRadius: radiusConverter,
-  borderBottomLeftRadius: radiusConverter,
-  borderBottomRightRadius: radiusConverter,
+  borderRadius: toCssUnit,
+  borderTopLeftRadius: toCssUnit,
+  borderTopRightRadius: toCssUnit,
+  borderBottomLeftRadius: toCssUnit,
+  borderBottomRightRadius: toCssUnit,
   borderWidth: toCssUnit,
@@ -119,4 +112,4 @@ borderTopWidth: toCssUnit,
   borderEndWidth: toCssUnit,
-  borderStartRadius: radiusConverter,
-  borderEndRadius: radiusConverter
+  borderStartRadius: toCssUnit,
+  borderEndRadius: toCssUnit
 };
@@ -123,0 +116,0 @@ var border = (props) => {

dist/color.js

@@ -48,3 +48,2 @@ "use strict";
 // src/color.ts
-var import_sheet2 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -69,19 +68,3 @@ background: "background",
       const property = colorMappings[key];
-      const userTheme = import_sheet2.theme.getUserTheme();
-      let converter;
-      if (userTheme.colors) {
-        converter = (value) => {
-          if (value in (userTheme.colors ?? {})) {
-            return userTheme.colors?.[value];
-          }
-          return value;
-        };
-      } else {
-        converter = (v) => v;
-      }
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
+      const responsiveStyles = applyResponsiveStyles(property, cssValue);
       base += responsiveStyles.base;
@@ -88,0 +71,0 @@ for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {

dist/column.js

@@ -55,9 +55,2 @@ "use strict";
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-
 // src/column.ts
@@ -77,3 +70,3 @@ var columnMappings = {
 var converters = {
-  columnGap: spaceConverter,
+  columnGap: toCssUnit,
   columnRuleWidth: toCssUnit,
@@ -80,0 +73,0 @@ columnWidth: toCssUnit

dist/compose.js

@@ -45,5 +45,2 @@ "use strict";
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
 // src/space.ts
@@ -82,3 +79,2 @@ var spaceMappings = {
 // src/typography.ts
-var import_sheet3 = require("@kuma-ui/sheet");
 var typographyMappings = {
@@ -119,3 +115,2 @@ hyphenateCharacter: "hyphenate-character",
 // src/color.ts
-var import_sheet4 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -212,3 +207,3 @@ background: "background",
 // src/compose.ts
-var import_sheet6 = require("@kuma-ui/sheet");
+var import_sheet2 = require("@kuma-ui/sheet");
 
@@ -285,3 +280,2 @@ // src/grid.ts
 // src/font.ts
-var import_sheet5 = require("@kuma-ui/sheet");
 var fontMappings = {
@@ -395,3 +389,3 @@ font: "font",
     let outputProps = { ...props };
-    const cachedStyles = import_sheet6.styleCache.get(cacheKey);
+    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
     if (cachedStyles) {
@@ -424,3 +418,3 @@ return cachedStyles;
     );
-    import_sheet6.styleCache.set(cacheKey, combinedStyles);
+    import_sheet2.styleCache.set(cacheKey, combinedStyles);
     return combinedStyles;
@@ -427,0 +421,0 @@ };

dist/flex.js

@@ -55,9 +55,2 @@ "use strict";
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-
 // src/flex.ts
@@ -83,3 +76,3 @@ var flexMappings = {
 var converters = {
-  gap: spaceConverter,
+  gap: toCssUnit,
   flexBasis: toCssUnit
@@ -86,0 +79,0 @@ };

dist/font.js

@@ -56,3 +56,2 @@ "use strict";
 // src/font.ts
-var import_sheet2 = require("@kuma-ui/sheet");
 var fontMappings = {
@@ -89,17 +88,5 @@ font: "font",
       const property = fontMappings[key];
-      const userTheme = import_sheet2.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "font-family") {
-          if (value in (userTheme.fonts ?? {})) {
-            return userTheme.fonts?.[value];
-          }
-        } else if (property === "font-size") {
-          if (value in (userTheme.fontSizes ?? {})) {
-            return toCssUnit(userTheme.fontSizes?.[value]);
-          }
+        if (property === "font-size") {
           return toCssUnit(value);
-        } else if (property === "font-weight") {
-          if (value in (userTheme.fontWeights ?? {})) {
-            return userTheme.fontWeights?.[value];
-          }
         }
@@ -106,0 +93,0 @@ return value;

dist/generator.js

@@ -26,3 +26,3 @@ "use strict";
 module.exports = __toCommonJS(generator_exports);
-var import_sheet7 = require("@kuma-ui/sheet");
+var import_sheet3 = require("@kuma-ui/sheet");
 
@@ -392,5 +392,2 @@ // src/keys.ts
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
 // src/toCSS.ts
@@ -404,20 +401,2 @@ var toCssUnit = (token) => {
 
-// src/valueConverters.ts
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-var sizeConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.sizes?.[v] || toCssUnit(v);
-};
-var radiusConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.radii?.[v] || toCssUnit(v);
-};
-var zIndexConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.zIndices?.[v] || v;
-};
-
 // src/space.ts
@@ -465,3 +444,3 @@ var spaceMappings = {
           cssValue,
-          spaceConverter
+          toCssUnit
         );
@@ -488,3 +467,2 @@ baseStyles += responsiveStyles.base;
 // src/typography.ts
-var import_sheet3 = require("@kuma-ui/sheet");
 var typographyMappings = {
@@ -515,17 +493,5 @@ hyphenateCharacter: "hyphenate-character",
       const property = typographyMappings[key];
-      const userTheme = import_sheet3.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "word-spacing") {
+        if (property === "word-spacing" || property === "letter-spacing") {
           return toCssUnit(value);
-        } else if (property === "letter-spacing") {
-          if (value in (userTheme.letterSpacings ?? {})) {
-            return toCssUnit(
-              userTheme.letterSpacings?.[value]
-            );
-          }
-          return toCssUnit(value);
-        } else if (property === "line-height") {
-          if (value in (userTheme.lineHeights ?? {})) {
-            return userTheme.lineHeights?.[value];
-          }
         }
@@ -566,9 +532,9 @@ return value;
 var converters = {
-  width: sizeConverter,
-  minWidth: sizeConverter,
-  maxWidth: sizeConverter,
-  height: sizeConverter,
-  minHeight: sizeConverter,
-  maxHeight: sizeConverter,
-  zIndex: zIndexConverter
+  width: toCssUnit,
+  minWidth: toCssUnit,
+  maxWidth: toCssUnit,
+  height: toCssUnit,
+  minHeight: toCssUnit,
+  maxHeight: toCssUnit,
+  zIndex: (t) => t
 };
@@ -601,3 +567,2 @@ var layout = (props) => {
 // src/color.ts
-var import_sheet4 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -622,19 +587,3 @@ background: "background",
       const property = colorMappings[key];
-      const userTheme = import_sheet4.theme.getUserTheme();
-      let converter;
-      if (userTheme.colors) {
-        converter = (value) => {
-          if (value in (userTheme.colors ?? {})) {
-            return userTheme.colors?.[value];
-          }
-          return value;
-        };
-      } else {
-        converter = (v) => v;
-      }
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
+      const responsiveStyles = applyResponsiveStyles(property, cssValue);
       base += responsiveStyles.base;
@@ -672,3 +621,3 @@ for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
 var converters2 = {
-  gap: spaceConverter,
+  gap: toCssUnit,
   flexBasis: toCssUnit
@@ -742,7 +691,7 @@ };
   borderY: toCssUnit,
-  borderRadius: radiusConverter,
-  borderTopLeftRadius: radiusConverter,
-  borderTopRightRadius: radiusConverter,
-  borderBottomLeftRadius: radiusConverter,
-  borderBottomRightRadius: radiusConverter,
+  borderRadius: toCssUnit,
+  borderTopLeftRadius: toCssUnit,
+  borderTopRightRadius: toCssUnit,
+  borderBottomLeftRadius: toCssUnit,
+  borderBottomRightRadius: toCssUnit,
   borderWidth: toCssUnit,
@@ -757,4 +706,4 @@ borderTopWidth: toCssUnit,
   borderEndWidth: toCssUnit,
-  borderStartRadius: radiusConverter,
-  borderEndRadius: radiusConverter
+  borderStartRadius: toCssUnit,
+  borderEndRadius: toCssUnit
 };
@@ -887,3 +836,3 @@ var border = (props) => {
 // src/compose.ts
-var import_sheet6 = require("@kuma-ui/sheet");
+var import_sheet2 = require("@kuma-ui/sheet");
 
@@ -919,3 +868,3 @@ // src/grid.ts
       const property = gridMappings[key];
-      const converter = gapKeys.includes(key) ? spaceConverter : void 0;
+      const converter = gapKeys.includes(key) ? toCssUnit : void 0;
       const responsiveStyles = applyResponsiveStyles(
@@ -1048,3 +997,2 @@ property,
 // src/font.ts
-var import_sheet5 = require("@kuma-ui/sheet");
 var fontMappings = {
@@ -1081,17 +1029,5 @@ font: "font",
       const property = fontMappings[key];
-      const userTheme = import_sheet5.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "font-family") {
-          if (value in (userTheme.fonts ?? {})) {
-            return userTheme.fonts?.[value];
-          }
-        } else if (property === "font-size") {
-          if (value in (userTheme.fontSizes ?? {})) {
-            return toCssUnit(userTheme.fontSizes?.[value]);
-          }
+        if (property === "font-size") {
           return toCssUnit(value);
-        } else if (property === "font-weight") {
-          if (value in (userTheme.fontWeights ?? {})) {
-            return userTheme.fontWeights?.[value];
-          }
         }
@@ -1176,3 +1112,3 @@ return value;
 var converters4 = {
-  columnGap: spaceConverter,
+  columnGap: toCssUnit,
   columnRuleWidth: toCssUnit,
@@ -1282,3 +1218,3 @@ columnWidth: toCssUnit
     let outputProps = { ...props };
-    const cachedStyles = import_sheet6.styleCache.get(cacheKey);
+    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
     if (cachedStyles) {
@@ -1311,3 +1247,3 @@ return cachedStyles;
     );
-    import_sheet6.styleCache.set(cacheKey, combinedStyles);
+    import_sheet2.styleCache.set(cacheKey, combinedStyles);
     return combinedStyles;
@@ -1351,6 +1287,17 @@ };
     for (const [propName, propValue] of Object.entries(props)) {
-      if (isStyledProp(propName.trim())) {
-        styledProps[propName.trim()] = propValue;
-      } else if (isPseudoProps(propName.trim())) {
-        pseudoProps[propName.trim()] = propValue;
+      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue)) {
+        const userTheme = import_sheet3.theme.getUserTheme();
+        const propKey = propValue.split(".")[0];
+        if (userTheme[propKey] !== void 0) {
+          for (const key in userTheme[propKey]) {
+            if (propValue === key) {
+              styledProps[propName] = userTheme[propKey][key];
+              break;
+            }
+          }
+        }
+      } else if (isStyledProp(propName)) {
+        styledProps[propName] = propValue;
+      } else if (isPseudoProps(propName)) {
+        pseudoProps[propName] = propValue;
       }
@@ -1371,3 +1318,3 @@ }
     };
-    this.className = StyleGenerator.getClassNamePrefix(isDynamic) + (0, import_sheet7.generateHash)(JSON.stringify(this.style));
+    this.className = StyleGenerator.getClassNamePrefix(isDynamic) + (0, import_sheet3.generateHash)(JSON.stringify(this.style));
   }
@@ -1374,0 +1321,0 @@ static getClassNamePrefix(isDynamic = false) {

dist/grid.js

@@ -28,2 +28,10 @@ "use strict";
 
+// src/toCSS.ts
+var toCssUnit = (token) => {
+  if (typeof token === "string")
+    return token;
+  else
+    return `${token}px`;
+};
+
 // src/responsive.ts
@@ -48,19 +56,2 @@ var import_sheet = require("@kuma-ui/sheet");
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/valueConverters.ts
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-
 // src/grid.ts
@@ -95,3 +86,3 @@ var gapKeys = ["gridGap", "gridColumnGap", "gridRowGap"];
       const property = gridMappings[key];
-      const converter = gapKeys.includes(key) ? spaceConverter : void 0;
+      const converter = gapKeys.includes(key) ? toCssUnit : void 0;
       const responsiveStyles = applyResponsiveStyles(
@@ -98,0 +89,0 @@ property,

dist/index.d.ts

@@ -13,3 +13,3 @@ import { StyleFunction } from './compose.js';
 export { ShadowProps } from './shadow.js';
-export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping } from './types.js';
+export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping, ValueConverter } from './types.js';
 export { PseudoProps, isPseudoProps, normalizePseudo } from './pseudo.js';
@@ -16,0 +16,0 @@ export { GridProps } from './grid.js';

dist/index.js

@@ -89,5 +89,2 @@ "use strict";
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
 // src/toCSS.ts
@@ -101,20 +98,2 @@ var toCssUnit = (token) => {
 
-// src/valueConverters.ts
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-var sizeConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.sizes?.[v] || toCssUnit(v);
-};
-var radiusConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.radii?.[v] || toCssUnit(v);
-};
-var zIndexConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.zIndices?.[v] || v;
-};
-
 // src/space.ts
@@ -162,3 +141,3 @@ var spaceMappings = {
           cssValue,
-          spaceConverter
+          toCssUnit
         );
@@ -185,3 +164,2 @@ baseStyles += responsiveStyles.base;
 // src/typography.ts
-var import_sheet3 = require("@kuma-ui/sheet");
 var typographyMappings = {
@@ -212,17 +190,5 @@ hyphenateCharacter: "hyphenate-character",
       const property = typographyMappings[key];
-      const userTheme = import_sheet3.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "word-spacing") {
+        if (property === "word-spacing" || property === "letter-spacing") {
           return toCssUnit(value);
-        } else if (property === "letter-spacing") {
-          if (value in (userTheme.letterSpacings ?? {})) {
-            return toCssUnit(
-              userTheme.letterSpacings?.[value]
-            );
-          }
-          return toCssUnit(value);
-        } else if (property === "line-height") {
-          if (value in (userTheme.lineHeights ?? {})) {
-            return userTheme.lineHeights?.[value];
-          }
         }
@@ -263,9 +229,9 @@ return value;
 var converters = {
-  width: sizeConverter,
-  minWidth: sizeConverter,
-  maxWidth: sizeConverter,
-  height: sizeConverter,
-  minHeight: sizeConverter,
-  maxHeight: sizeConverter,
-  zIndex: zIndexConverter
+  width: toCssUnit,
+  minWidth: toCssUnit,
+  maxWidth: toCssUnit,
+  height: toCssUnit,
+  minHeight: toCssUnit,
+  maxHeight: toCssUnit,
+  zIndex: (t) => t
 };
@@ -298,3 +264,2 @@ var layout = (props) => {
 // src/color.ts
-var import_sheet4 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -319,19 +284,3 @@ background: "background",
       const property = colorMappings[key];
-      const userTheme = import_sheet4.theme.getUserTheme();
-      let converter;
-      if (userTheme.colors) {
-        converter = (value) => {
-          if (value in (userTheme.colors ?? {})) {
-            return userTheme.colors?.[value];
-          }
-          return value;
-        };
-      } else {
-        converter = (v) => v;
-      }
-      const responsiveStyles = applyResponsiveStyles(
-        property,
-        cssValue,
-        converter
-      );
+      const responsiveStyles = applyResponsiveStyles(property, cssValue);
       base += responsiveStyles.base;
@@ -369,3 +318,3 @@ for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
 var converters2 = {
-  gap: spaceConverter,
+  gap: toCssUnit,
   flexBasis: toCssUnit
@@ -439,7 +388,7 @@ };
   borderY: toCssUnit,
-  borderRadius: radiusConverter,
-  borderTopLeftRadius: radiusConverter,
-  borderTopRightRadius: radiusConverter,
-  borderBottomLeftRadius: radiusConverter,
-  borderBottomRightRadius: radiusConverter,
+  borderRadius: toCssUnit,
+  borderTopLeftRadius: toCssUnit,
+  borderTopRightRadius: toCssUnit,
+  borderBottomLeftRadius: toCssUnit,
+  borderBottomRightRadius: toCssUnit,
   borderWidth: toCssUnit,
@@ -454,4 +403,4 @@ borderTopWidth: toCssUnit,
   borderEndWidth: toCssUnit,
-  borderStartRadius: radiusConverter,
-  borderEndRadius: radiusConverter
+  borderStartRadius: toCssUnit,
+  borderEndRadius: toCssUnit
 };
@@ -584,3 +533,3 @@ var border = (props) => {
 // src/compose.ts
-var import_sheet6 = require("@kuma-ui/sheet");
+var import_sheet2 = require("@kuma-ui/sheet");
 
@@ -616,3 +565,3 @@ // src/grid.ts
       const property = gridMappings[key];
-      const converter = gapKeys.includes(key) ? spaceConverter : void 0;
+      const converter = gapKeys.includes(key) ? toCssUnit : void 0;
       const responsiveStyles = applyResponsiveStyles(
@@ -745,3 +694,2 @@ property,
 // src/font.ts
-var import_sheet5 = require("@kuma-ui/sheet");
 var fontMappings = {
@@ -778,17 +726,5 @@ font: "font",
       const property = fontMappings[key];
-      const userTheme = import_sheet5.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "font-family") {
-          if (value in (userTheme.fonts ?? {})) {
-            return userTheme.fonts?.[value];
-          }
-        } else if (property === "font-size") {
-          if (value in (userTheme.fontSizes ?? {})) {
-            return toCssUnit(userTheme.fontSizes?.[value]);
-          }
+        if (property === "font-size") {
           return toCssUnit(value);
-        } else if (property === "font-weight") {
-          if (value in (userTheme.fontWeights ?? {})) {
-            return userTheme.fontWeights?.[value];
-          }
         }
@@ -873,3 +809,3 @@ return value;
 var converters4 = {
-  columnGap: spaceConverter,
+  columnGap: toCssUnit,
   columnRuleWidth: toCssUnit,
@@ -979,3 +915,3 @@ columnWidth: toCssUnit
     let outputProps = { ...props };
-    const cachedStyles = import_sheet6.styleCache.get(cacheKey);
+    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
     if (cachedStyles) {
@@ -1008,3 +944,3 @@ return cachedStyles;
     );
-    import_sheet6.styleCache.set(cacheKey, combinedStyles);
+    import_sheet2.styleCache.set(cacheKey, combinedStyles);
     return combinedStyles;
@@ -1321,3 +1257,3 @@ };
 // src/generator.ts
-var import_sheet7 = require("@kuma-ui/sheet");
+var import_sheet3 = require("@kuma-ui/sheet");
 var StyleGenerator = class {
@@ -1334,6 +1270,17 @@ style;
     for (const [propName, propValue] of Object.entries(props)) {
-      if (isStyledProp(propName.trim())) {
-        styledProps[propName.trim()] = propValue;
-      } else if (isPseudoProps(propName.trim())) {
-        pseudoProps[propName.trim()] = propValue;
+      if (typeof propValue === "string" && /[a-zA-Z]+\.[a-zA-Z0-9]+/.test(propValue)) {
+        const userTheme = import_sheet3.theme.getUserTheme();
+        const propKey = propValue.split(".")[0];
+        if (userTheme[propKey] !== void 0) {
+          for (const key in userTheme[propKey]) {
+            if (propValue === key) {
+              styledProps[propName] = userTheme[propKey][key];
+              break;
+            }
+          }
+        }
+      } else if (isStyledProp(propName)) {
+        styledProps[propName] = propValue;
+      } else if (isPseudoProps(propName)) {
+        pseudoProps[propName] = propValue;
       }
@@ -1354,3 +1301,3 @@ }
     };
-    this.className = StyleGenerator.getClassNamePrefix(isDynamic) + (0, import_sheet7.generateHash)(JSON.stringify(this.style));
+    this.className = StyleGenerator.getClassNamePrefix(isDynamic) + (0, import_sheet3.generateHash)(JSON.stringify(this.style));
   }
@@ -1357,0 +1304,0 @@ static getClassNamePrefix(isDynamic = false) {

dist/layout.js

@@ -28,2 +28,10 @@ "use strict";
 
+// src/toCSS.ts
+var toCssUnit = (token) => {
+  if (typeof token === "string")
+    return token;
+  else
+    return `${token}px`;
+};
+
 // src/responsive.ts
@@ -48,23 +56,2 @@ var import_sheet = require("@kuma-ui/sheet");
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/valueConverters.ts
-var sizeConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.sizes?.[v] || toCssUnit(v);
-};
-var zIndexConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.zIndices?.[v] || v;
-};
-
 // src/layout.ts
@@ -85,9 +72,9 @@ var layoutMappings = {
 var converters = {
-  width: sizeConverter,
-  minWidth: sizeConverter,
-  maxWidth: sizeConverter,
-  height: sizeConverter,
-  minHeight: sizeConverter,
-  maxHeight: sizeConverter,
-  zIndex: zIndexConverter
+  width: toCssUnit,
+  minWidth: toCssUnit,
+  maxWidth: toCssUnit,
+  height: toCssUnit,
+  minHeight: toCssUnit,
+  maxHeight: toCssUnit,
+  zIndex: (t) => t
 };
@@ -94,0 +81,0 @@ var layout = (props) => {

dist/space.js

@@ -28,2 +28,10 @@ "use strict";
 
+// src/toCSS.ts
+var toCssUnit = (token) => {
+  if (typeof token === "string")
+    return token;
+  else
+    return `${token}px`;
+};
+
 // src/responsive.ts
@@ -48,19 +56,2 @@ var import_sheet = require("@kuma-ui/sheet");
 
-// src/valueConverters.ts
-var import_sheet2 = require("@kuma-ui/sheet");
-
-// src/toCSS.ts
-var toCssUnit = (token) => {
-  if (typeof token === "string")
-    return token;
-  else
-    return `${token}px`;
-};
-
-// src/valueConverters.ts
-var spaceConverter = (v) => {
-  const userTheme = import_sheet2.theme.getUserTheme();
-  return userTheme.spacings?.[v] || toCssUnit(v);
-};
-
 // src/space.ts
@@ -108,3 +99,3 @@ var spaceMappings = {
           cssValue,
-          spaceConverter
+          toCssUnit
         );
@@ -111,0 +102,0 @@ baseStyles += responsiveStyles.base;

dist/types.d.ts

@@ -33,3 +33,4 @@ import * as CSS from 'csstype';
 };
+type ValueConverter = (value: string | number) => string | number;
 
-export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping };
+export { AddProperty, CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping, ValueConverter };

dist/typography.js

@@ -56,3 +56,2 @@ "use strict";
 // src/typography.ts
-var import_sheet2 = require("@kuma-ui/sheet");
 var typographyMappings = {
@@ -83,17 +82,5 @@ hyphenateCharacter: "hyphenate-character",
       const property = typographyMappings[key];
-      const userTheme = import_sheet2.theme.getUserTheme();
       const converter = (value) => {
-        if (property === "word-spacing") {
+        if (property === "word-spacing" || property === "letter-spacing") {
           return toCssUnit(value);
-        } else if (property === "letter-spacing") {
-          if (value in (userTheme.letterSpacings ?? {})) {
-            return toCssUnit(
-              userTheme.letterSpacings?.[value]
-            );
-          }
-          return toCssUnit(value);
-        } else if (property === "line-height") {
-          if (value in (userTheme.lineHeights ?? {})) {
-            return userTheme.lineHeights?.[value];
-          }
         }
@@ -100,0 +87,0 @@ return value;

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -33,3 +33,3 @@ "repository": {
     "csstype": "^3.1.2",
-    "@kuma-ui/sheet": "1.2.0"
+    "@kuma-ui/sheet": "1.3.0"
   },
@@ -36,0 +36,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

232447

decreased by-4.75%

Number of package files

106

decreased by-3.64%

Lines of code

7685

decreased by-4.33%

Dependency changes

• + Added@kuma-ui/sheet@1.3.0(transitive)

• - Removed@kuma-ui/sheet@1.2.0(transitive)

• Updated@kuma-ui/sheet@1.3.0