@umbra.ui/core 0.1.0

package/src/components/pickers/ColorPicker/colors.ts

@@ -0,0 +1,299 @@
+export interface ColorGroup {
+  name: string;
+  colors: Color[];
+}
+export interface Color {
+  name: string | null;
+  hex: string;
+  weight: number | null;
+}
+
+export const colors: Color[] = [
+  { name: "Gray", hex: "#E5E7EB", weight: 200 },
+  { name: "Gray", hex: "#D1D5DB", weight: 300 },
+  { name: "Gray", hex: "#9CA3AF", weight: 400 },
+  { name: "Gray", hex: "#6B7280", weight: 500 },
+  { name: "Gray", hex: "#4B5563", weight: 600 },
+  { name: "Gray", hex: "#374151", weight: 700 },
+  { name: "Gray", hex: "#1F2937", weight: 800 },
+  { name: "Gray", hex: "#111827", weight: 900 },
+
+  { name: "Zinc", hex: "#E4E4E7", weight: 200 },
+  { name: "Zinc", hex: "#D4D4D8", weight: 300 },
+  { name: "Zinc", hex: "#A1A1AA", weight: 400 },
+  { name: "Zinc", hex: "#71717A", weight: 500 },
+  { name: "Zinc", hex: "#52525B", weight: 600 },
+  { name: "Zinc", hex: "#3F3F46", weight: 700 },
+  { name: "Zinc", hex: "#27272A", weight: 800 },
+  { name: "Zinc", hex: "#18181B", weight: 900 },
+
+  { name: "Neutral", hex: "#E5E5E5", weight: 200 },
+  { name: "Neutral", hex: "#D4D4D4", weight: 300 },
+  { name: "Neutral", hex: "#A3A3A3", weight: 400 },
+  { name: "Neutral", hex: "#737373", weight: 500 },
+  { name: "Neutral", hex: "#525252", weight: 600 },
+  { name: "Neutral", hex: "#404040", weight: 700 },
+  { name: "Neutral", hex: "#262626", weight: 800 },
+  { name: "Neutral", hex: "#171717", weight: 900 },
+
+  { name: "Stone", hex: "#E7E5E4", weight: 200 },
+  { name: "Stone", hex: "#D6D3D1", weight: 300 },
+  { name: "Stone", hex: "#A8A29E", weight: 400 },
+  { name: "Stone", hex: "#78716C", weight: 500 },
+  { name: "Stone", hex: "#57534E", weight: 600 },
+  { name: "Stone", hex: "#44403C", weight: 700 },
+  { name: "Stone", hex: "#292524", weight: 800 },
+  { name: "Stone", hex: "#1C1917", weight: 900 },
+
+  { name: "Red", hex: "#FECACA", weight: 200 },
+  { name: "Red", hex: "#FCA5A5", weight: 300 },
+  { name: "Red", hex: "#F87171", weight: 400 },
+  { name: "Red", hex: "#EF4444", weight: 500 },
+  { name: "Red", hex: "#DC2626", weight: 600 },
+  { name: "Red", hex: "#B91C1C", weight: 700 },
+  { name: "Red", hex: "#991B1B", weight: 800 },
+  { name: "Red", hex: "#7F1D1D", weight: 900 },
+
+  { name: "Orange", hex: "#FED7AA", weight: 200 },
+  { name: "Orange", hex: "#FDBA74", weight: 300 },
+  { name: "Orange", hex: "#FB923C", weight: 400 },
+  { name: "Orange", hex: "#F97316", weight: 500 },
+  { name: "Orange", hex: "#EA580C", weight: 600 },
+  { name: "Orange", hex: "#C2410C", weight: 700 },
+  { name: "Orange", hex: "#9A3412", weight: 800 },
+  { name: "Orange", hex: "#7C2D12", weight: 900 },
+
+  { name: "Amber", hex: "#FDE68A", weight: 200 },
+  { name: "Amber", hex: "#FCD34D", weight: 300 },
+  { name: "Amber", hex: "#FBBF24", weight: 400 },
+  { name: "Amber", hex: "#F59E0B", weight: 500 },
+  { name: "Amber", hex: "#D97706", weight: 600 },
+  { name: "Amber", hex: "#B45309", weight: 700 },
+  { name: "Amber", hex: "#92400E", weight: 800 },
+  { name: "Amber", hex: "#78350F", weight: 900 },
+
+  { name: "Yellow", hex: "#FEF08A", weight: 200 },
+  { name: "Yellow", hex: "#FDE047", weight: 300 },
+  { name: "Yellow", hex: "#FACC15", weight: 400 },
+  { name: "Yellow", hex: "#EAB308", weight: 500 },
+  { name: "Yellow", hex: "#CA8A04", weight: 600 },
+  { name: "Yellow", hex: "#A16207", weight: 700 },
+  { name: "Yellow", hex: "#854D0E", weight: 800 },
+  { name: "Yellow", hex: "#713F12", weight: 900 },
+
+  { name: "Lime", hex: "#D9F99D", weight: 200 },
+  { name: "Lime", hex: "#BEF264", weight: 300 },
+  { name: "Lime", hex: "#A3E635", weight: 400 },
+  { name: "Lime", hex: "#84CC16", weight: 500 },
+  { name: "Lime", hex: "#65A30D", weight: 600 },
+  { name: "Lime", hex: "#4D7C0F", weight: 700 },
+  { name: "Lime", hex: "#3F6212", weight: 800 },
+  { name: "Lime", hex: "#365314", weight: 900 },
+
+  { name: "Green", hex: "#BBF7D0", weight: 200 },
+  { name: "Green", hex: "#86EFAC", weight: 300 },
+  { name: "Green", hex: "#4ADE80", weight: 400 },
+  { name: "Green", hex: "#22C55E", weight: 500 },
+  { name: "Green", hex: "#16A34A", weight: 600 },
+  { name: "Green", hex: "#15803D", weight: 700 },
+  { name: "Green", hex: "#166534", weight: 800 },
+  { name: "Green", hex: "#14532D", weight: 900 },
+
+  { name: "Emerald", hex: "#A7F3D0", weight: 200 },
+  { name: "Emerald", hex: "#6EE7B7", weight: 300 },
+  { name: "Emerald", hex: "#34D399", weight: 400 },
+  { name: "Emerald", hex: "#10B981", weight: 500 },
+  { name: "Emerald", hex: "#059669", weight: 600 },
+  { name: "Emerald", hex: "#047857", weight: 700 },
+  { name: "Emerald", hex: "#065F46", weight: 800 },
+  { name: "Emerald", hex: "#064E3B", weight: 900 },
+
+  { name: "Teal", hex: "#99F6E4", weight: 200 },
+  { name: "Teal", hex: "#5EEAD4", weight: 300 },
+  { name: "Teal", hex: "#2DD4BF", weight: 400 },
+  { name: "Teal", hex: "#14B8A6", weight: 500 },
+  { name: "Teal", hex: "#0D9488", weight: 600 },
+  { name: "Teal", hex: "#0F766E", weight: 700 },
+  { name: "Teal", hex: "#115E59", weight: 800 },
+  { name: "Teal", hex: "#134E4A", weight: 900 },
+
+  { name: "Cyan", hex: "#A5F3FC", weight: 200 },
+  { name: "Cyan", hex: "#67E8F9", weight: 300 },
+  { name: "Cyan", hex: "#22D3EE", weight: 400 },
+  { name: "Cyan", hex: "#06B6D4", weight: 500 },
+  { name: "Cyan", hex: "#0891B2", weight: 600 },
+  { name: "Cyan", hex: "#0E7490", weight: 700 },
+  { name: "Cyan", hex: "#155E75", weight: 800 },
+  { name: "Cyan", hex: "#164E63", weight: 900 },
+
+  { name: "Sky", hex: "#BAE6FD", weight: 200 },
+  { name: "Sky", hex: "#7DD3FC", weight: 300 },
+  { name: "Sky", hex: "#38BDF8", weight: 400 },
+  { name: "Sky", hex: "#0EA5E9", weight: 500 },
+  { name: "Sky", hex: "#0284C7", weight: 600 },
+  { name: "Sky", hex: "#0369A1", weight: 700 },
+  { name: "Sky", hex: "#075985", weight: 800 },
+  { name: "Sky", hex: "#0C4A6E", weight: 900 },
+
+  { name: "Blue", hex: "#BFDBFE", weight: 200 },
+  { name: "Blue", hex: "#93C5FD", weight: 300 },
+  { name: "Blue", hex: "#60A5FA", weight: 400 },
+  { name: "Blue", hex: "#3B82F6", weight: 500 },
+  { name: "Blue", hex: "#2563EB", weight: 600 },
+  { name: "Blue", hex: "#1D4ED8", weight: 700 },
+  { name: "Blue", hex: "#1E40AF", weight: 800 },
+  { name: "Blue", hex: "#1E3A8A", weight: 900 },
+
+  { name: "Indigo", hex: "#C7D2FE", weight: 200 },
+  { name: "Indigo", hex: "#A5B4FC", weight: 300 },
+  { name: "Indigo", hex: "#818CF8", weight: 400 },
+  { name: "Indigo", hex: "#6366F1", weight: 500 },
+  { name: "Indigo", hex: "#4F46E5", weight: 600 },
+  { name: "Indigo", hex: "#4338CA", weight: 700 },
+  { name: "Indigo", hex: "#3730A3", weight: 800 },
+  { name: "Indigo", hex: "#312E81", weight: 900 },
+
+  { name: "Violet", hex: "#DDD6FE", weight: 200 },
+  { name: "Violet", hex: "#C4B5FD", weight: 300 },
+  { name: "Violet", hex: "#A78BFA", weight: 400 },
+  { name: "Violet", hex: "#8B5CF6", weight: 500 },
+  { name: "Violet", hex: "#7C3AED", weight: 600 },
+  { name: "Violet", hex: "#6D28D9", weight: 700 },
+  { name: "Violet", hex: "#5B21B6", weight: 800 },
+  { name: "Violet", hex: "#4C1D95", weight: 900 },
+
+  { name: "Purple", hex: "#E9D5FF", weight: 200 },
+  { name: "Purple", hex: "#D8B4FE", weight: 300 },
+  { name: "Purple", hex: "#C084FC", weight: 400 },
+  { name: "Purple", hex: "#A855F7", weight: 500 },
+  { name: "Purple", hex: "#9333EA", weight: 600 },
+  { name: "Purple", hex: "#7E22CE", weight: 700 },
+  { name: "Purple", hex: "#6B21A8", weight: 800 },
+  { name: "Purple", hex: "#581C87", weight: 900 },
+
+  { name: "Fuchsia", hex: "#F5D0FE", weight: 200 },
+  { name: "Fuchsia", hex: "#F0ABFC", weight: 300 },
+  { name: "Fuchsia", hex: "#E879F9", weight: 400 },
+  { name: "Fuchsia", hex: "#D946EF", weight: 500 },
+  { name: "Fuchsia", hex: "#C026D3", weight: 600 },
+  { name: "Fuchsia", hex: "#A21CAF", weight: 700 },
+  { name: "Fuchsia", hex: "#86198F", weight: 800 },
+  { name: "Fuchsia", hex: "#701A75", weight: 900 },
+
+  { name: "Pink", hex: "#FBCFE8", weight: 200 },
+  { name: "Pink", hex: "#F9A8D4", weight: 300 },
+  { name: "Pink", hex: "#F472B6", weight: 400 },
+  { name: "Pink", hex: "#EC4899", weight: 500 },
+  { name: "Pink", hex: "#DB2777", weight: 600 },
+  { name: "Pink", hex: "#BE185D", weight: 700 },
+  { name: "Pink", hex: "#9D174D", weight: 800 },
+  { name: "Pink", hex: "#831843", weight: 900 },
+
+  { name: "Rose", hex: "#FECDD3", weight: 200 },
+  { name: "Rose", hex: "#FDA4AF", weight: 300 },
+  { name: "Rose", hex: "#FB7185", weight: 400 },
+  { name: "Rose", hex: "#F43F5E", weight: 500 },
+  { name: "Rose", hex: "#E11D48", weight: 600 },
+  { name: "Rose", hex: "#BE123C", weight: 700 },
+  { name: "Rose", hex: "#9F1239", weight: 800 },
+  { name: "Rose", hex: "#881337", weight: 900 },
+];
+
+// Create a colorPicker object for easy access to colors by name and weight
+export const colorPickerColors: Record<string, Color> = {};
+
+// Populate the colorPicker object
+colors.forEach((color) => {
+  if (color.name && color.weight) {
+    const key = `${color.name.toLowerCase()}${color.weight}`;
+    colorPickerColors[key] = color;
+  }
+});
+
+// Also export individual color groups for convenience
+export const colorGroups: ColorGroup[] = [
+  {
+    name: "Gray",
+    colors: colors.filter((c) => c.name === "Gray"),
+  },
+  {
+    name: "Zinc",
+    colors: colors.filter((c) => c.name === "Zinc"),
+  },
+  {
+    name: "Neutral",
+    colors: colors.filter((c) => c.name === "Neutral"),
+  },
+  {
+    name: "Stone",
+    colors: colors.filter((c) => c.name === "Stone"),
+  },
+  {
+    name: "Red",
+    colors: colors.filter((c) => c.name === "Red"),
+  },
+  {
+    name: "Orange",
+    colors: colors.filter((c) => c.name === "Orange"),
+  },
+  {
+    name: "Amber",
+    colors: colors.filter((c) => c.name === "Amber"),
+  },
+  {
+    name: "Yellow",
+    colors: colors.filter((c) => c.name === "Yellow"),
+  },
+  {
+    name: "Lime",
+    colors: colors.filter((c) => c.name === "Lime"),
+  },
+  {
+    name: "Green",
+    colors: colors.filter((c) => c.name === "Green"),
+  },
+  {
+    name: "Emerald",
+    colors: colors.filter((c) => c.name === "Emerald"),
+  },
+  {
+    name: "Teal",
+    colors: colors.filter((c) => c.name === "Teal"),
+  },
+  {
+    name: "Cyan",
+    colors: colors.filter((c) => c.name === "Cyan"),
+  },
+  {
+    name: "Sky",
+    colors: colors.filter((c) => c.name === "Sky"),
+  },
+  {
+    name: "Blue",
+    colors: colors.filter((c) => c.name === "Blue"),
+  },
+  {
+    name: "Indigo",
+    colors: colors.filter((c) => c.name === "Indigo"),
+  },
+  {
+    name: "Violet",
+    colors: colors.filter((c) => c.name === "Violet"),
+  },
+  {
+    name: "Purple",
+    colors: colors.filter((c) => c.name === "Purple"),
+  },
+  {
+    name: "Fuchsia",
+    colors: colors.filter((c) => c.name === "Fuchsia"),
+  },
+  {
+    name: "Pink",
+    colors: colors.filter((c) => c.name === "Pink"),
+  },
+  {
+    name: "Rose",
+    colors: colors.filter((c) => c.name === "Rose"),
+  },
+];

package/src/components/pickers/ColorPicker/theme.css

@@ -0,0 +1,32 @@
+@import "../theme.css";
+
+/* Light theme */
+:root {
+  /* Picker Shadow */
+  --colorpicker-picker-shadow: none;
+
+  /* Color Cells */
+  --colorpicker-color-cell-border: #838383;
+  --colorpicker-color-cell-selected-border: #ffffff;
+  --colorpicker-color-dot-bg: #ffffff;
+
+  /* Dot Borders */
+  --colorpicker-dot-border-color: #9ca3af;
+  --colorpicker-dot-border-color-active: #374151;
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Picker Shadow */
+  --colorpicker-picker-shadow: var(--picker-picker-shadow);
+
+  /* Color Cells */
+  --colorpicker-color-cell-border: white;
+  --colorpicker-color-cell-selected-border: #ffffff;
+  --colorpicker-color-dot-bg: #ffffff;
+
+  /* Dot Borders */
+  --colorpicker-dot-border-color: #7b7b7b;
+  --colorpicker-dot-border-color-active: #eeeeee;
+}