@umbra.ui/core 0.1.0

package/src/components/inputs/Tags/tag-bar-styles.ts

@@ -0,0 +1,354 @@
+import "./theme.css";
+
+interface TagBarStyle {
+  backgroundColor: string;
+  border: string;
+  borderRadius: string;
+  boxShadow: string;
+  padding: string;
+  buttonColor: string;
+  textColor: string;
+}
+
+// Base style templates for tag bar types
+const baseStyles = {
+  default: {
+    borderRadius: "0.471rem",
+    boxShadow: "none",
+    border: "none",
+    padding: "0",
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderRadius: "0.471rem",
+    boxShadow: "none",
+    padding: "0",
+  },
+  capsule: {
+    borderRadius: "999px",
+    boxShadow: "none",
+    border: "none",
+    padding: "0",
+  },
+  capline: {
+    backgroundColor: "transparent",
+    borderRadius: "999px",
+    boxShadow: "none",
+    padding: "0",
+  },
+  plain: {
+    backgroundColor: "transparent",
+    borderRadius: "0",
+    boxShadow: "none",
+    border: "none",
+    padding: "0",
+  },
+};
+
+// Predefined color schemes
+const colorSchemes = {
+  primary: {
+    default: { backgroundColor: "var(--tagbar-primary-default-bg)" },
+    outline: { color: "var(--tagbar-primary-outline-color)" },
+    capsule: { backgroundColor: "var(--tagbar-primary-capsule-bg)" },
+    capline: { color: "var(--tagbar-primary-capline-color)" },
+    plain: { backgroundColor: "var(--tagbar-primary-plain-bg)" },
+  },
+  secondary: {
+    default: { backgroundColor: "var(--tagbar-secondary-default-bg)" },
+    outline: { color: "var(--tagbar-secondary-outline-color)" },
+    capsule: { backgroundColor: "var(--tagbar-secondary-capsule-bg)" },
+    capline: { color: "var(--tagbar-secondary-capline-color)" },
+    plain: { backgroundColor: "var(--tagbar-secondary-plain-bg)" },
+  },
+  tertiary: {
+    default: { backgroundColor: "var(--tagbar-tertiary-default-bg)" },
+    outline: { color: "var(--tagbar-tertiary-outline-color)" },
+    capsule: { backgroundColor: "var(--tagbar-tertiary-capsule-bg)" },
+    capline: { color: "var(--tagbar-tertiary-capline-color)" },
+    plain: { backgroundColor: "var(--tagbar-tertiary-plain-bg)" },
+  },
+  quaternary: {
+    default: { backgroundColor: "var(--tagbar-quaternary-default-bg)" },
+    outline: { color: "var(--tagbar-quaternary-outline-color)" },
+    capsule: { backgroundColor: "var(--tagbar-quaternary-capsule-bg)" },
+    capline: { color: "var(--tagbar-quaternary-capline-color)" },
+    plain: { backgroundColor: "var(--tagbar-quaternary-plain-bg)" },
+  },
+};
+
+// Helper functions for color manipulation
+const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+  const result = /^([a-fA-F\d]{2})([a-fA-F\d]{2})([a-fA-F\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+};
+
+const rgbToHsl = (
+  r: number,
+  g: number,
+  b: number
+): { h: number; s: number; l: number } => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+};
+
+const hslToRgb = (
+  h: number,
+  s: number,
+  l: number
+): { r: number; g: number; b: number } => {
+  h /= 360;
+  s /= 100;
+  l /= 100;
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p: number, q: number, t: number): number => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+};
+
+// Helper function to lighten colors (for tag bar we want lighter backgrounds)
+const lightenColor = (color: string, amount: number = 0.85): string => {
+  // Handle CSS variables
+  if (color.startsWith("var(")) {
+    const match = color.match(/var\((--[^)]+)\)/);
+    if (!match) return color;
+
+    const propertyName = match[1];
+    let computedValue = getComputedStyle(document.documentElement)
+      .getPropertyValue(propertyName)
+      .trim();
+
+    // Resolve nested variables
+    while (computedValue.startsWith("var(")) {
+      const nestedMatch = computedValue.match(/var\((--[^)]+)\)/);
+      if (!nestedMatch) break;
+      computedValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(nestedMatch[1])
+        .trim();
+    }
+
+    if (computedValue.startsWith("#")) {
+      color = computedValue;
+    } else {
+      return color; // Can't process non-hex computed values
+    }
+  }
+
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  // Lighten by increasing the lightness
+  hsl.l = Math.min(100, hsl.l + (100 - hsl.l) * amount);
+  // Reduce saturation for very light colors
+  hsl.s = Math.max(0, hsl.s * (1 - amount * 0.5));
+
+  const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+  const toHex = (n: number): string => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  return `#${toHex(newRgb.r)}${toHex(newRgb.g)}${toHex(newRgb.b)}`;
+};
+
+// Helper function to darken colors
+const darkenColor = (color: string, amount: number = 0.25): string => {
+  // Handle CSS variables
+  if (color.startsWith("var(")) {
+    const match = color.match(/var\((--[^)]+)\)/);
+    if (!match) return color;
+
+    const propertyName = match[1];
+    let computedValue = getComputedStyle(document.documentElement)
+      .getPropertyValue(propertyName)
+      .trim();
+
+    // Resolve nested variables
+    while (computedValue.startsWith("var(")) {
+      const nestedMatch = computedValue.match(/var\((--[^)]+)\)/);
+      if (!nestedMatch) break;
+      computedValue = getComputedStyle(document.documentElement)
+        .getPropertyValue(nestedMatch[1])
+        .trim();
+    }
+
+    if (computedValue.startsWith("#")) {
+      color = computedValue;
+    } else {
+      return color; // Can't process non-hex computed values
+    }
+  }
+
+  const rgb = hexToRgb(color);
+  if (!rgb) return color;
+
+  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  hsl.l = Math.max(0, hsl.l - hsl.l * amount);
+  hsl.s = Math.max(0, hsl.s - hsl.s * 0.1);
+
+  const newRgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+  const toHex = (n: number): string => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  return `#${toHex(newRgb.r)}${toHex(newRgb.g)}${toHex(newRgb.b)}`;
+};
+
+// Check if it's a custom color
+const isCustomColor = (barStyle: string | undefined): boolean => {
+  if (!barStyle) return false;
+  const predefinedStyles = ["primary", "secondary", "tertiary", "quaternary"];
+  return !predefinedStyles.includes(barStyle);
+};
+
+// Generate style for custom colors
+const generateCustomColorStyle = (
+  barType: string,
+  customColor: string
+): TagBarStyle => {
+  const baseStyle =
+    baseStyles[barType as keyof typeof baseStyles] || baseStyles.default;
+
+  switch (barType) {
+    case "outline":
+    case "capline":
+      return {
+        ...baseStyle,
+        backgroundColor: "transparent",
+        border: `1px solid ${customColor}`,
+        buttonColor: customColor,
+        textColor: customColor,
+      } as TagBarStyle;
+
+    case "plain":
+      return {
+        ...baseStyle,
+        backgroundColor: "transparent",
+        buttonColor: customColor,
+        textColor: customColor,
+      } as TagBarStyle;
+
+    case "capsule":
+    case "default":
+    default:
+      const lightenedColor = darkenColor(customColor, 0.8);
+      return {
+        ...baseStyle,
+        backgroundColor: lightenedColor,
+        buttonColor: "#eeeeee",
+        textColor: "#b4b4b4",
+      } as TagBarStyle;
+  }
+};
+
+// Main function to get tag bar style
+const getTagBarStyle = (
+  type: string = "default",
+  style: string = "primary"
+): TagBarStyle => {
+  // Handle custom colors
+  if (isCustomColor(style)) {
+    return generateCustomColorStyle(type, style);
+  }
+
+  // Handle predefined styles
+  const colorScheme = colorSchemes[style as keyof typeof colorSchemes];
+  const baseStyle = baseStyles[type as keyof typeof baseStyles];
+
+  if (!colorScheme || !baseStyle) {
+    // Fallback to default
+    return getTagBarStyle("default", "primary");
+  }
+
+  const typeColors = colorScheme[type as keyof typeof colorScheme];
+
+  // Build the complete style based on type
+  if (type === "outline" || type === "capline") {
+    const color = (typeColors as any).color;
+    return {
+      ...baseStyle,
+      backgroundColor: "transparent",
+      border: `1px solid ${color}`,
+      buttonColor: color,
+      textColor: color,
+    } as TagBarStyle;
+  } else if (type === "plain") {
+    // For plain type, use the corresponding text color variable
+    let textColor = "#eeeeee";
+    if (style === "secondary") textColor = "#eeeeee";
+    else if (style === "tertiary") textColor = "#b4b4b4";
+
+    return {
+      ...baseStyle,
+      buttonColor: textColor,
+      textColor: textColor,
+    } as TagBarStyle;
+  } else {
+    // default or capsule
+    const { backgroundColor } = typeColors as any;
+    return {
+      ...baseStyle,
+      backgroundColor,
+      buttonColor: "#FFFFFF",
+      textColor: "#FFFFFF",
+    } as TagBarStyle;
+  }
+};
+
+// Export for use in your component
+export { getTagBarStyle, isCustomColor, type TagBarStyle };

package/src/components/inputs/Tags/theme.css

@@ -0,0 +1,121 @@
+/* Light theme using simplified variables */
+:root {
+  /* TagBar colors */
+  --tagbar-bg: #ffffff; /* gray1 - light background */
+  --tagbar-text: #646464; /* white - text color */
+  --tagbar-border: 1px solid #d9d9d9; /* gray1 - field background */
+  --tagbar-field-bg: #e8e8e8; /* gray1 - field background */
+  --tagbar-field-text: #1f2937; /* gray8 - field text */
+  --tagbar-list-border: rgba(0, 0, 0, 0.1); /* blackA6 - list border */
+
+  /* Search overlay */
+  --search-overlay-bg: rgba(0, 0, 0, 0.1); /* Overlay background */
+
+  /* TagPicker colors */
+  --tagpicker-container-bg: #ffffff; /* white - container background */
+  --tagpicker-container-shadow: rgba(0, 0, 0, 0.1); /* blackA6 - shadow */
+  --tagpicker-container-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* whiteA8 - inset shadow */
+
+  /* TagPicker subheader colors */
+  --tagpicker-subheader-bg: #f9fafb; /* gray0 - subheader background */
+  --tagpicker-subheader-border: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - subheader border */
+  --tagpicker-subheader-text: #374151; /* gray7 - subheader text */
+  --tagpicker-subheader-label: #6b7280; /* gray5 - subheader label */
+
+  /* TagPicker tag colors */
+  --tagpicker-tag-bg: #ffffff; /* white - tag background */
+  --tagpicker-tag-hover-bg: #f3f4f6; /* gray1 - tag hover background */
+  --tagpicker-tag-selected-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - tag selected background */
+  --tagpicker-tag-border: rgba(0, 0, 0, 0.1); /* blackA6 - tag border */
+  --tagpicker-tag-text: #1f2937; /* gray8 - tag text */
+
+  /* TagPicker empty state colors */
+  --tagpicker-empty-text: #6b7280; /* gray5 - empty text */
+
+  /* TagPicker create tag colors */
+  --tagpicker-create-bg: #f3f4f6; /* gray1 - create background */
+  --tagpicker-create-hover-bg: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /* blackA6 - create hover background */
+  --tagpicker-create-selected-bg: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA8 - create selected background */
+  --tagpicker-create-border: rgba(0, 0, 0, 0.1); /* blackA6 - create border */
+  --tagpicker-create-text: #374151; /* gray7 - create text */
+  --tagpicker-create-error-text: #dc2626; /* red6 - create error text */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* TagBar colors */
+  --tagbar-bg: #484848; /* Dark background */
+  --tagbar-text: #ffffff; /* White text */
+  --tagbar-border: 1px solid #606060;
+  --tagbar-field-bg: #606060; /* Dark field background */
+  --tagbar-field-text: #eeeeee; /* Light field text */
+  --tagbar-list-border: rgba(255, 255, 255, 0.15); /* Light border */
+
+  /* Search overlay */
+  --search-overlay-bg: rgba(0, 0, 0, 0.3); /* Darker overlay for dark mode */
+
+  /* TagPicker colors */
+  --tagpicker-container-bg: #484848; /* Dark container background */
+  --tagpicker-container-shadow: rgba(0, 0, 0, 0.21); /* Darker shadow */
+  --tagpicker-container-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.1
+  ); /* Light inset shadow */
+
+  /* TagPicker subheader colors */
+  --tagpicker-subheader-bg: #5a5a5a; /* Dark subheader background */
+  --tagpicker-subheader-border: rgba(0, 0, 0, 0.25); /* Dark border */
+  --tagpicker-subheader-text: #eeeeee; /* Light text */
+  --tagpicker-subheader-label: #b4b4b4; /* Muted label */
+
+  /* TagPicker tag colors */
+  --tagpicker-tag-bg: #484848; /* Dark tag background */
+  --tagpicker-tag-hover-bg: #5a5a5a; /* Dark tag hover */
+  --tagpicker-tag-selected-bg: rgba(255, 255, 255, 0.15); /* Light selected */
+  --tagpicker-tag-border: rgba(255, 255, 255, 0.15); /* Light border */
+  --tagpicker-tag-text: #eeeeee; /* Light text */
+
+  /* TagPicker empty state colors */
+  --tagpicker-empty-text: #b4b4b4; /* Muted empty text */
+
+  /* TagPicker create tag colors */
+  --tagpicker-create-bg: #5a5a5a; /* Dark create background */
+  --tagpicker-create-hover-bg: rgba(255, 255, 255, 0.12); /* Light hover */
+  --tagpicker-create-selected-bg: rgba(
+    255,
+    255,
+    255,
+    0.15
+  ); /* Light selected */
+  --tagpicker-create-border: rgba(0, 0, 0, 0.25); /* Dark border */
+  --tagpicker-create-text: #eeeeee; /* Light text */
+  --tagpicker-create-error-text: #e5484d; /* Red error text */
+}