sprintify-ui 0.0.150 → 0.0.152

package/src/utils/colors.ts

@@ -0,0 +1,200 @@
+import { darken, getContrast } from 'color2k';
+import defaultColors from 'tailwindcss/colors';
+
+const colors = defaultColors;
+
+export { colors };
+
+interface ColorConfig {
+  backgroundColor: string;
+  textColor: string;
+  borderColor: string;
+}
+
+interface ColorPalette {
+  low: ColorConfig;
+  high: ColorConfig;
+}
+
+export const palette: Record<string, ColorPalette> = {
+  black: {
+    low: {
+      backgroundColor: colors.slate[200],
+      textColor: colors.slate[900],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.black,
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  gray: {
+    low: {
+      backgroundColor: colors.slate[100],
+      textColor: colors.slate[800],
+      borderColor: colors.slate[300],
+    },
+    high: {
+      backgroundColor: colors.slate[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  red: {
+    low: {
+      backgroundColor: colors.red[100],
+      textColor: colors.red[700],
+      borderColor: colors.red[300],
+    },
+    high: {
+      backgroundColor: colors.red[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  orange: {
+    low: {
+      backgroundColor: colors.orange[100],
+      textColor: colors.orange[700],
+      borderColor: colors.orange[300],
+    },
+    high: {
+      backgroundColor: colors.orange[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  yellow: {
+    low: {
+      backgroundColor: colors.yellow[100],
+      textColor: colors.yellow[700],
+      borderColor: colors.yellow[300],
+    },
+    high: {
+      backgroundColor: colors.yellow[500],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  green: {
+    low: {
+      backgroundColor: colors.green[100],
+      textColor: colors.green[700],
+      borderColor: colors.green[300],
+    },
+    high: {
+      backgroundColor: colors.green[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  teal: {
+    low: {
+      backgroundColor: colors.teal[100],
+      textColor: colors.teal[700],
+      borderColor: colors.teal[300],
+    },
+    high: {
+      backgroundColor: colors.teal[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  cyan: {
+    low: {
+      backgroundColor: colors.cyan[100],
+      textColor: colors.cyan[700],
+      borderColor: colors.cyan[300],
+    },
+    high: {
+      backgroundColor: colors.cyan[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  blue: {
+    low: {
+      backgroundColor: colors.blue[100],
+      textColor: colors.blue[700],
+      borderColor: colors.blue[300],
+    },
+    high: {
+      backgroundColor: colors.blue[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  indigo: {
+    low: {
+      backgroundColor: colors.indigo[100],
+      textColor: colors.indigo[700],
+      borderColor: colors.indigo[300],
+    },
+    high: {
+      backgroundColor: colors.indigo[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  purple: {
+    low: {
+      backgroundColor: colors.purple[100],
+      textColor: colors.purple[700],
+      borderColor: colors.purple[300],
+    },
+    high: {
+      backgroundColor: colors.purple[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  pink: {
+    low: {
+      backgroundColor: colors.pink[100],
+      textColor: colors.pink[700],
+      borderColor: colors.pink[300],
+    },
+    high: {
+      backgroundColor: colors.pink[600],
+      textColor: colors.white,
+      borderColor: 'transparent',
+    },
+  },
+  white: {
+    low: {
+      backgroundColor: colors.white,
+      textColor: colors.slate[600],
+      borderColor: 'transparent',
+    },
+    high: {
+      backgroundColor: colors.white,
+      textColor: colors.black,
+      borderColor: 'transparent',
+    },
+  },
+};
+
+export function getColorConfig(color: string, contrast = false): ColorConfig {
+  const colorConfig = palette[color]?.[contrast ? 'high' : 'low'];
+
+  if (colorConfig) {
+    return colorConfig;
+  }
+
+  const c = getContrast(color, 'white');
+
+  let borderColor = 'transparent';
+  let textColor = 'white';
+
+  if (c < 2) {
+    textColor = darken(color, 0.5);
+    borderColor = darken(color, 0.1);
+  }
+
+  return {
+    backgroundColor: color,
+    textColor: textColor,
+    borderColor: borderColor,
+  };
+}