@yamada-ui/core - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

dist/generated-theme.types.d.ts

@@ -11,2 +11,3 @@ import { UITheme } from './ui-theme.types.js';
     fontWeights: 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | (string & {});
+    gradients: string & {};
     layerStyles: string & {};
@@ -13,0 +14,0 @@ letterSpacings: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {});

dist/index.d.ts

@@ -195,2 +195,3 @@ import { CSSObject, Interpolation, Keyframes, ThemeProviderProps as ThemeProviderProps$1 } from '@emotion/react';
     zIndices?: ThemeTokens;
+    gradients?: ThemeTokens;
     transitions?: {
@@ -300,3 +301,3 @@ property?: ThemeTokens;
 type VarTokens = Record<string, VarToken>;
-declare const tokens: readonly ["colors", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "shadows", "borders", "sizes", "spaces", "zIndices", "transitions"];
+declare const tokens: readonly ["borders", "colors", "fonts", "fontSizes", "fontWeights", "gradients", "letterSpacings", "lineHeights", "radii", "shadows", "sizes", "spaces", "transitions", "zIndices"];
 type ThemeToken = (typeof tokens)[number] | 'transitions.duration' | 'transitions.property' | 'transitions.easing';
@@ -338,3 +339,3 @@ declare const transformTheme: <T extends Dict>(_theme: T, config: ThemeConfig) => Dict;
     bgImage: (value: any) => any;
-    bgGradient: Transform;
+    gradient: Transform;
 };
@@ -362,2 +363,3 @@ declare const configs: {
     };
+    gradient: <T extends CSSProperties>(property: T | T[]) => ConfigProps;
 };
@@ -442,9 +444,9 @@
     backgroundColor?: Token<CSS.Property.Color, 'colors', Y, M>;
-    backgroundImage?: Token<CSS.Property.BackgroundImage, unknown, Y, M>;
-    bgGradient?: Token<CSS.Property.BackgroundImage, unknown, Y, M>;
+    backgroundImage?: Token<CSS.Property.BackgroundImage, 'gradients', Y, M>;
+    bgGradient?: Token<CSS.Property.BackgroundImage, 'gradients', Y, M>;
     backgroundSize?: Token<CSS.Property.BackgroundSize | number, unknown, Y, M>;
     bgPos?: Token<CSS.Property.BackgroundPosition | number, unknown, Y, M>;
     backgroundPosition?: Token<CSS.Property.BackgroundPosition | number, unknown, Y, M>;
-    bgImage?: Token<CSS.Property.BackgroundImage, unknown, Y, M>;
-    bgImg?: Token<CSS.Property.BackgroundImage, unknown, Y, M>;
+    bgImage?: Token<CSS.Property.BackgroundImage, 'gradients', Y, M>;
+    bgImg?: Token<CSS.Property.BackgroundImage, 'gradients', Y, M>;
     bgRepeat?: Token<CSS.Property.BackgroundRepeat, unknown, Y, M>;
@@ -451,0 +453,0 @@ backgroundRepeat?: Token<CSS.Property.BackgroundRepeat, unknown, Y, M>;

dist/index.js

@@ -192,7 +192,10 @@ "use strict";
 var createGradient = (value, theme) => {
-  var _a2, _b;
+  var _a2;
   if (value == null || globalValues.has(value))
     return value;
-  const regex = /(?<_type>^[a-z-A-Z]+)\((?<_values>(.*))\)/g;
-  const { _type, _values } = (_b = (_a2 = regex.exec(value)) == null ? void 0 : _a2.groups) != null ? _b : {};
+  const prevent = isCSSFunction(value);
+  if (!prevent)
+    return `url('${value}')`;
+  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
+  const [, _type, _values] = (_a2 = regex.exec(value)) != null ? _a2 : [];
   if (!_type || !_values)
@@ -287,3 +290,3 @@ return value;
   },
-  bgGradient: createGradient
+  gradient: createGradient
 };
@@ -309,3 +312,4 @@ var configs = {
     transform: transform2
-  })
+  }),
+  gradient: createConfig("gradients", transforms.gradient)
 };
@@ -370,3 +374,3 @@
   backgroundColor: configs.color("backgroundColor"),
-  backgroundImage: configs.propTransform("backgroundImage", transforms.bgImage),
+  backgroundImage: configs.gradient("backgroundImage"),
   backgroundSize: true,
@@ -384,3 +388,3 @@ backgroundPosition: true,
   bgAttachment: configs.prop("backgroundAttachment"),
-  bgGradient: configs.propTransform("backgroundImage", transforms.bgGradient),
+  bgGradient: configs.gradient("backgroundImage"),
   bgClip: { transform: transforms.bgClip }
@@ -919,2 +923,6 @@ };
     let [lightValue, darkValue] = (0, import_utils7.isArray)(value) ? [...value] : [value];
+    if (token.startsWith("gradients")) {
+      lightValue = createGradient(lightValue, { __cssMap: cssMap });
+      darkValue = createGradient(darkValue, { __cssMap: cssMap });
+    }
     if (!isSemantic) {
@@ -1397,2 +1405,3 @@ if (token.startsWith("spaces")) {
 var tokens = [
+  "borders",
   "colors",
@@ -1402,2 +1411,3 @@ "fonts",
   "fontWeights",
+  "gradients",
   "letterSpacings",
@@ -1407,7 +1417,6 @@ "lineHeights",
   "shadows",
-  "borders",
   "sizes",
   "spaces",
-  "zIndices",
-  "transitions"
+  "transitions",
+  "zIndices"
 ];
@@ -1414,0 +1423,0 @@ var transformTheme = (_theme, config) => {

dist/ui-theme.types.d.ts

@@ -10,2 +10,3 @@ type UITheme = {
     fontSizes: string;
+    gradients: string;
     fontWeights: string;
@@ -12,0 +13,0 @@ letterSpacings: string;

package.json

 {
   "name": "@yamada-ui/core",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Yamada UI core",
@@ -5,0 +5,0 @@ "keywords": [

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

Improved metrics

Total package byte prevSize

164585

increased by0.39%

Lines of code

3970

increased by0.56%

No dependency changes