sprintify-ui 0.12.22 → 0.12.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.22",
+  "version": "0.12.23",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseBadge.vue

@@ -43,25 +43,20 @@ const props = withDefaults(
 );
 
 const colorStyle = computed((): Record<string, string> => {
-  try {
-    const config = getColorConfig(props.color, props.contrast == 'high');
-
-    const styles: Record<string, string> = {
-      backgroundColor: config.backgroundColor,
-      color: config.textColor,
-    };
-
-    if (props.bordered) {
-      styles.borderColor = config.borderColor;
-      styles.borderWidth = '1px';
-      styles.borderStyle = 'solid';
-    }
-
-    return styles;
-  } catch {
-    console.warn(`[BaseBadge] "${props.color}" is not a valid color.`);
-    return {};
+  const config = getColorConfig(props.color, props.contrast == 'high');
+
+  const styles: Record<string, string> = {
+    backgroundColor: config.backgroundColor,
+    color: config.textColor,
+  };
+
+  if (props.bordered) {
+    styles.borderColor = config.borderColor;
+    styles.borderWidth = '1px';
+    styles.borderStyle = 'solid';
   }
+
+  return styles;
 });
 
 const sizeInternal = computed(() => {

package/src/components/BaseButton.vue

@@ -207,19 +207,15 @@ const classes = computed(() => {
 
 const styles = computed(() => {
   if (props.color && !(props.color in colors)) {
-    try {
-      const config = getColorConfig(props.color);
-
-      return {
-        backgroundColor: config.backgroundColor,
-        color: config.textColor,
-        borderColor: config.borderColor,
-        borderWidth: '1px',
-        borderStyle: 'solid',
-      };
-    } catch {
-      console.warn(`[BaseButton] "${props.color}" is not a valid color.`);
-    }
+    const config = getColorConfig(props.color);
+
+    return {
+      backgroundColor: config.backgroundColor,
+      color: config.textColor,
+      borderColor: config.borderColor,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+    };
   }
 
   return {};

package/src/utils/colors.ts

@@ -211,7 +211,7 @@ const colorNames = {
 } as Record<string, string>;
 
 export function getColorConfig(color: string, contrast = false): ColorConfig {
-
+  const originalColor = color;
   color = colorNames[color] || color;
 
   const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
@@ -220,20 +220,25 @@ export function getColorConfig(color: string, contrast = false): ColorConfig {
     return colorConfig;
   }
 
-  const c = getContrast(color, 'white');
+  try {
+    const c = getContrast(color, 'white');
 
-  let borderColor = 'transparent';
-  let textColor = 'white';
+    let borderColor = 'transparent';
+    let textColor = 'white';
 
-  if (c < 2) {
-    textColor = darken(color, 0.5);
-    borderColor = darken(color, 0.1);
-  }
+    if (c < 2) {
+      textColor = darken(color, 0.5);
+      borderColor = darken(color, 0.1);
+    }
 
-  return {
-    backgroundColor: color,
-    textColor: textColor,
-    borderColor: borderColor,
-    color: color
-  };
+    return {
+      backgroundColor: color,
+      textColor: textColor,
+      borderColor: borderColor,
+      color: color,
+    };
+  } catch {
+    console.warn(`[getColorConfig] "${originalColor}" is not a valid color. Falling back to gray.`);
+    return palette.gray[contrast ? 'high' : 'low'];
+  }
 }