omnira-ui 0.1.0

package/cli/presets.mjs

@@ -0,0 +1,386 @@
+/**
+ * Omnira UI — Color Presets
+ *
+ * Each preset contains the full set of CSS custom property overrides
+ * for both dark and light themes. The tokens follow the same structure
+ * as globals.css so the generated file can be imported after the base.
+ *
+ * Colors are listed in alphabetical order.
+ */
+
+export const COLOR_PRESETS = {
+    blue: {
+        label: "Blue",
+        hex: "#2196F3",
+        dark: {
+            "--color-lime": "#2196F3",
+            "--color-lime-hover": "#1E88E5",
+            "--color-lime-gradient": "#1976D2",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(33, 150, 243, 0.1)",
+            "--color-border-lime-medium": "rgba(33, 150, 243, 0.15)",
+            "--color-border-lime-strong": "rgba(33, 150, 243, 0.3)",
+            "--color-bg-lime-subtle": "rgba(33, 150, 243, 0.06)",
+            "--color-bg-lime-medium": "rgba(33, 150, 243, 0.08)",
+            "--color-bg-lime-strong": "rgba(33, 150, 243, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(33, 150, 243, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(33, 150, 243, 0.6), 0 0 16px rgba(33, 150, 243, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(33, 150, 243, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #2196F3, #64B5F6)",
+        },
+        light: {
+            "--color-lime": "#1976D2",
+            "--color-lime-hover": "#1565C0",
+            "--color-lime-gradient": "#1565C0",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(25, 118, 210, 0.15)",
+            "--color-border-lime-medium": "rgba(25, 118, 210, 0.25)",
+            "--color-border-lime-strong": "rgba(25, 118, 210, 0.4)",
+            "--color-bg-lime-subtle": "rgba(25, 118, 210, 0.06)",
+            "--color-bg-lime-medium": "rgba(25, 118, 210, 0.10)",
+            "--color-bg-lime-strong": "rgba(25, 118, 210, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(25, 118, 210, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(25, 118, 210, 0.4), 0 0 12px rgba(25, 118, 210, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(25, 118, 210, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #1976D2, #42A5F5)",
+        },
+    },
+
+    cyan: {
+        label: "Cyan",
+        hex: "#00BCD4",
+        dark: {
+            "--color-lime": "#00BCD4",
+            "--color-lime-hover": "#00ACC1",
+            "--color-lime-gradient": "#0097A7",
+            "--color-lime-text": "#121212",
+            "--color-border-lime-subtle": "rgba(0, 188, 212, 0.1)",
+            "--color-border-lime-medium": "rgba(0, 188, 212, 0.15)",
+            "--color-border-lime-strong": "rgba(0, 188, 212, 0.3)",
+            "--color-bg-lime-subtle": "rgba(0, 188, 212, 0.06)",
+            "--color-bg-lime-medium": "rgba(0, 188, 212, 0.08)",
+            "--color-bg-lime-strong": "rgba(0, 188, 212, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(0, 188, 212, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(0, 188, 212, 0.6), 0 0 16px rgba(0, 188, 212, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(0, 188, 212, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #00BCD4, #4DD0E1)",
+        },
+        light: {
+            "--color-lime": "#0097A7",
+            "--color-lime-hover": "#00838F",
+            "--color-lime-gradient": "#00838F",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(0, 151, 167, 0.15)",
+            "--color-border-lime-medium": "rgba(0, 151, 167, 0.25)",
+            "--color-border-lime-strong": "rgba(0, 151, 167, 0.4)",
+            "--color-bg-lime-subtle": "rgba(0, 151, 167, 0.06)",
+            "--color-bg-lime-medium": "rgba(0, 151, 167, 0.10)",
+            "--color-bg-lime-strong": "rgba(0, 151, 167, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(0, 151, 167, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(0, 151, 167, 0.4), 0 0 12px rgba(0, 151, 167, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(0, 151, 167, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #0097A7, #26C6DA)",
+        },
+    },
+
+    green: {
+        label: "Green",
+        hex: "#4CAF50",
+        dark: {
+            "--color-lime": "#4CAF50",
+            "--color-lime-hover": "#43A047",
+            "--color-lime-gradient": "#388E3C",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(76, 175, 80, 0.1)",
+            "--color-border-lime-medium": "rgba(76, 175, 80, 0.15)",
+            "--color-border-lime-strong": "rgba(76, 175, 80, 0.3)",
+            "--color-bg-lime-subtle": "rgba(76, 175, 80, 0.06)",
+            "--color-bg-lime-medium": "rgba(76, 175, 80, 0.08)",
+            "--color-bg-lime-strong": "rgba(76, 175, 80, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(76, 175, 80, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(76, 175, 80, 0.6), 0 0 16px rgba(76, 175, 80, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(76, 175, 80, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #4CAF50, #81C784)",
+        },
+        light: {
+            "--color-lime": "#388E3C",
+            "--color-lime-hover": "#2E7D32",
+            "--color-lime-gradient": "#2E7D32",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(56, 142, 60, 0.15)",
+            "--color-border-lime-medium": "rgba(56, 142, 60, 0.25)",
+            "--color-border-lime-strong": "rgba(56, 142, 60, 0.4)",
+            "--color-bg-lime-subtle": "rgba(56, 142, 60, 0.06)",
+            "--color-bg-lime-medium": "rgba(56, 142, 60, 0.10)",
+            "--color-bg-lime-strong": "rgba(56, 142, 60, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(56, 142, 60, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(56, 142, 60, 0.4), 0 0 12px rgba(56, 142, 60, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(56, 142, 60, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #388E3C, #66BB6A)",
+        },
+    },
+
+    lime: {
+        label: "Lime (Default)",
+        hex: "#D2FE17",
+        dark: {
+            "--color-lime": "#D2FE17",
+            "--color-lime-hover": "#c0e616",
+            "--color-lime-gradient": "#ABC928",
+            "--color-lime-text": "#121212",
+            "--color-border-lime-subtle": "rgba(210, 254, 23, 0.1)",
+            "--color-border-lime-medium": "rgba(210, 254, 23, 0.15)",
+            "--color-border-lime-strong": "rgba(210, 254, 23, 0.3)",
+            "--color-bg-lime-subtle": "rgba(210, 254, 23, 0.06)",
+            "--color-bg-lime-medium": "rgba(210, 254, 23, 0.08)",
+            "--color-bg-lime-strong": "rgba(210, 254, 23, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(210, 254, 23, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(210, 254, 23, 0.6), 0 0 16px rgba(210, 254, 23, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(210, 254, 23, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #D2FE17, #e5ff54)",
+        },
+        light: {
+            "--color-lime": "#8AB400",
+            "--color-lime-hover": "#7DA310",
+            "--color-lime-gradient": "#6B9A00",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(138, 180, 0, 0.15)",
+            "--color-border-lime-medium": "rgba(138, 180, 0, 0.25)",
+            "--color-border-lime-strong": "rgba(138, 180, 0, 0.4)",
+            "--color-bg-lime-subtle": "rgba(138, 180, 0, 0.06)",
+            "--color-bg-lime-medium": "rgba(138, 180, 0, 0.10)",
+            "--color-bg-lime-strong": "rgba(138, 180, 0, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(138, 180, 0, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(138, 180, 0, 0.4), 0 0 12px rgba(138, 180, 0, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(138, 180, 0, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #8AB400, #a5d600)",
+        },
+    },
+
+    orange: {
+        label: "Orange",
+        hex: "#FF5722",
+        dark: {
+            "--color-lime": "#FF5722",
+            "--color-lime-hover": "#F4511E",
+            "--color-lime-gradient": "#E64A19",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(255, 87, 34, 0.1)",
+            "--color-border-lime-medium": "rgba(255, 87, 34, 0.15)",
+            "--color-border-lime-strong": "rgba(255, 87, 34, 0.3)",
+            "--color-bg-lime-subtle": "rgba(255, 87, 34, 0.06)",
+            "--color-bg-lime-medium": "rgba(255, 87, 34, 0.08)",
+            "--color-bg-lime-strong": "rgba(255, 87, 34, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(255, 87, 34, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(255, 87, 34, 0.6), 0 0 16px rgba(255, 87, 34, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(255, 87, 34, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #FF5722, #FF8A65)",
+        },
+        light: {
+            "--color-lime": "#E64A19",
+            "--color-lime-hover": "#D84315",
+            "--color-lime-gradient": "#BF360C",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(230, 74, 25, 0.15)",
+            "--color-border-lime-medium": "rgba(230, 74, 25, 0.25)",
+            "--color-border-lime-strong": "rgba(230, 74, 25, 0.4)",
+            "--color-bg-lime-subtle": "rgba(230, 74, 25, 0.06)",
+            "--color-bg-lime-medium": "rgba(230, 74, 25, 0.10)",
+            "--color-bg-lime-strong": "rgba(230, 74, 25, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(230, 74, 25, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(230, 74, 25, 0.4), 0 0 12px rgba(230, 74, 25, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(230, 74, 25, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #E64A19, #FF7043)",
+        },
+    },
+
+    pink: {
+        label: "Pink",
+        hex: "#E91E63",
+        dark: {
+            "--color-lime": "#E91E63",
+            "--color-lime-hover": "#D81B60",
+            "--color-lime-gradient": "#C2185B",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(233, 30, 99, 0.1)",
+            "--color-border-lime-medium": "rgba(233, 30, 99, 0.15)",
+            "--color-border-lime-strong": "rgba(233, 30, 99, 0.3)",
+            "--color-bg-lime-subtle": "rgba(233, 30, 99, 0.06)",
+            "--color-bg-lime-medium": "rgba(233, 30, 99, 0.08)",
+            "--color-bg-lime-strong": "rgba(233, 30, 99, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(233, 30, 99, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(233, 30, 99, 0.6), 0 0 16px rgba(233, 30, 99, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(233, 30, 99, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #E91E63, #F06292)",
+        },
+        light: {
+            "--color-lime": "#C2185B",
+            "--color-lime-hover": "#AD1457",
+            "--color-lime-gradient": "#AD1457",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(194, 24, 91, 0.15)",
+            "--color-border-lime-medium": "rgba(194, 24, 91, 0.25)",
+            "--color-border-lime-strong": "rgba(194, 24, 91, 0.4)",
+            "--color-bg-lime-subtle": "rgba(194, 24, 91, 0.06)",
+            "--color-bg-lime-medium": "rgba(194, 24, 91, 0.10)",
+            "--color-bg-lime-strong": "rgba(194, 24, 91, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(194, 24, 91, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(194, 24, 91, 0.4), 0 0 12px rgba(194, 24, 91, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(194, 24, 91, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #C2185B, #EC407A)",
+        },
+    },
+
+    purple: {
+        label: "Purple",
+        hex: "#9C27B0",
+        dark: {
+            "--color-lime": "#9C27B0",
+            "--color-lime-hover": "#8E24AA",
+            "--color-lime-gradient": "#7B1FA2",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(156, 39, 176, 0.1)",
+            "--color-border-lime-medium": "rgba(156, 39, 176, 0.15)",
+            "--color-border-lime-strong": "rgba(156, 39, 176, 0.3)",
+            "--color-bg-lime-subtle": "rgba(156, 39, 176, 0.06)",
+            "--color-bg-lime-medium": "rgba(156, 39, 176, 0.08)",
+            "--color-bg-lime-strong": "rgba(156, 39, 176, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(156, 39, 176, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(156, 39, 176, 0.6), 0 0 16px rgba(156, 39, 176, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(156, 39, 176, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #9C27B0, #CE93D8)",
+        },
+        light: {
+            "--color-lime": "#7B1FA2",
+            "--color-lime-hover": "#6A1B9A",
+            "--color-lime-gradient": "#6A1B9A",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(123, 31, 162, 0.15)",
+            "--color-border-lime-medium": "rgba(123, 31, 162, 0.25)",
+            "--color-border-lime-strong": "rgba(123, 31, 162, 0.4)",
+            "--color-bg-lime-subtle": "rgba(123, 31, 162, 0.06)",
+            "--color-bg-lime-medium": "rgba(123, 31, 162, 0.10)",
+            "--color-bg-lime-strong": "rgba(123, 31, 162, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(123, 31, 162, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(123, 31, 162, 0.4), 0 0 12px rgba(123, 31, 162, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(123, 31, 162, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #7B1FA2, #AB47BC)",
+        },
+    },
+
+    red: {
+        label: "Red",
+        hex: "#F44336",
+        dark: {
+            "--color-lime": "#F44336",
+            "--color-lime-hover": "#E53935",
+            "--color-lime-gradient": "#D32F2F",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(244, 67, 54, 0.1)",
+            "--color-border-lime-medium": "rgba(244, 67, 54, 0.15)",
+            "--color-border-lime-strong": "rgba(244, 67, 54, 0.3)",
+            "--color-bg-lime-subtle": "rgba(244, 67, 54, 0.06)",
+            "--color-bg-lime-medium": "rgba(244, 67, 54, 0.08)",
+            "--color-bg-lime-strong": "rgba(244, 67, 54, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(244, 67, 54, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(244, 67, 54, 0.6), 0 0 16px rgba(244, 67, 54, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(244, 67, 54, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #F44336, #EF9A9A)",
+        },
+        light: {
+            "--color-lime": "#D32F2F",
+            "--color-lime-hover": "#C62828",
+            "--color-lime-gradient": "#B71C1C",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(211, 47, 47, 0.15)",
+            "--color-border-lime-medium": "rgba(211, 47, 47, 0.25)",
+            "--color-border-lime-strong": "rgba(211, 47, 47, 0.4)",
+            "--color-bg-lime-subtle": "rgba(211, 47, 47, 0.06)",
+            "--color-bg-lime-medium": "rgba(211, 47, 47, 0.10)",
+            "--color-bg-lime-strong": "rgba(211, 47, 47, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(211, 47, 47, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(211, 47, 47, 0.4), 0 0 12px rgba(211, 47, 47, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(211, 47, 47, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #D32F2F, #EF5350)",
+        },
+    },
+
+    teal: {
+        label: "Teal",
+        hex: "#009688",
+        dark: {
+            "--color-lime": "#009688",
+            "--color-lime-hover": "#00897B",
+            "--color-lime-gradient": "#00796B",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(0, 150, 136, 0.1)",
+            "--color-border-lime-medium": "rgba(0, 150, 136, 0.15)",
+            "--color-border-lime-strong": "rgba(0, 150, 136, 0.3)",
+            "--color-bg-lime-subtle": "rgba(0, 150, 136, 0.06)",
+            "--color-bg-lime-medium": "rgba(0, 150, 136, 0.08)",
+            "--color-bg-lime-strong": "rgba(0, 150, 136, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(0, 150, 136, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(0, 150, 136, 0.6), 0 0 16px rgba(0, 150, 136, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(0, 150, 136, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #009688, #4DB6AC)",
+        },
+        light: {
+            "--color-lime": "#00796B",
+            "--color-lime-hover": "#00695C",
+            "--color-lime-gradient": "#004D40",
+            "--color-lime-text": "#ffffff",
+            "--color-border-lime-subtle": "rgba(0, 121, 107, 0.15)",
+            "--color-border-lime-medium": "rgba(0, 121, 107, 0.25)",
+            "--color-border-lime-strong": "rgba(0, 121, 107, 0.4)",
+            "--color-bg-lime-subtle": "rgba(0, 121, 107, 0.06)",
+            "--color-bg-lime-medium": "rgba(0, 121, 107, 0.10)",
+            "--color-bg-lime-strong": "rgba(0, 121, 107, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(0, 121, 107, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(0, 121, 107, 0.4), 0 0 12px rgba(0, 121, 107, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(0, 121, 107, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #00796B, #26A69A)",
+        },
+    },
+
+    yellow: {
+        label: "Yellow",
+        hex: "#FFEB3B",
+        dark: {
+            "--color-lime": "#FFEB3B",
+            "--color-lime-hover": "#FDD835",
+            "--color-lime-gradient": "#F9A825",
+            "--color-lime-text": "#121212",
+            "--color-border-lime-subtle": "rgba(255, 235, 59, 0.1)",
+            "--color-border-lime-medium": "rgba(255, 235, 59, 0.15)",
+            "--color-border-lime-strong": "rgba(255, 235, 59, 0.3)",
+            "--color-bg-lime-subtle": "rgba(255, 235, 59, 0.06)",
+            "--color-bg-lime-medium": "rgba(255, 235, 59, 0.08)",
+            "--color-bg-lime-strong": "rgba(255, 235, 59, 0.12)",
+            "--shadow-btn-primary": "0 8px 24px rgba(255, 235, 59, 0.3)",
+            "--shadow-glow-lime": "0 0 8px rgba(255, 235, 59, 0.6), 0 0 16px rgba(255, 235, 59, 0.3)",
+            "--shadow-card-accent": "inset 2px 4px 16px rgba(255, 235, 59, 0.04), 0px 16px 48px rgba(0, 0, 0, 0.2)",
+            "--gradient-progress": "linear-gradient(90deg, #FFEB3B, #FFF176)",
+        },
+        light: {
+            "--color-lime": "#F9A825",
+            "--color-lime-hover": "#F57F17",
+            "--color-lime-gradient": "#F57F17",
+            "--color-lime-text": "#121212",
+            "--color-border-lime-subtle": "rgba(249, 168, 37, 0.15)",
+            "--color-border-lime-medium": "rgba(249, 168, 37, 0.25)",
+            "--color-border-lime-strong": "rgba(249, 168, 37, 0.4)",
+            "--color-bg-lime-subtle": "rgba(249, 168, 37, 0.06)",
+            "--color-bg-lime-medium": "rgba(249, 168, 37, 0.10)",
+            "--color-bg-lime-strong": "rgba(249, 168, 37, 0.15)",
+            "--shadow-btn-primary": "0 6px 20px rgba(249, 168, 37, 0.25)",
+            "--shadow-glow-lime": "0 0 6px rgba(249, 168, 37, 0.4), 0 0 12px rgba(249, 168, 37, 0.2)",
+            "--shadow-card-accent": "0px 2px 8px rgba(249, 168, 37, 0.08), 0px 12px 36px rgba(0, 0, 0, 0.06)",
+            "--gradient-progress": "linear-gradient(90deg, #F9A825, #FFCA28)",
+        },
+    },
+};
+
+export const THEME_MODES = ["dark-first", "light-first"];
+
+export const DEFAULT_COLOR = "lime";
+export const DEFAULT_THEME = "dark-first";

package/components/ui/AppStoreButton/AppStoreButton.module.css

@@ -0,0 +1,87 @@
+.storeButton {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: #000000;
+    border: 1.5px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    text-decoration: none;
+    color: #ffffff;
+    font-family: inherit;
+    outline: none;
+    white-space: nowrap;
+}
+
+.storeButton:hover:not(:disabled) {
+    background: #1a1a1a;
+    border-color: rgba(255, 255, 255, 0.25);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.storeButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* --- Sizes --- */
+.sm {
+    height: 40px;
+    padding: 0 14px;
+}
+
+.md {
+    height: 48px;
+    padding: 0 18px;
+}
+
+.lg {
+    height: 56px;
+    padding: 0 22px;
+}
+
+/* --- Text block --- */
+.textBlock {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1.1;
+}
+
+.subtitle {
+    font-size: 9px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.title {
+    font-weight: 700;
+    color: #ffffff;
+}
+
+.sm .subtitle {
+    font-size: 8px;
+}
+
+.sm .title {
+    font-size: 14px;
+}
+
+.md .subtitle {
+    font-size: 9px;
+}
+
+.md .title {
+    font-size: 16px;
+}
+
+.lg .subtitle {
+    font-size: 10px;
+}
+
+.lg .title {
+    font-size: 19px;
+}

package/components/ui/AppStoreButton/AppStoreButton.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/cn";
+import styles from "./AppStoreButton.module.css";
+
+export type AppStoreSize = "sm" | "md" | "lg";
+
+interface BaseStoreButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: AppStoreSize;
+}
+
+/* ── Apple App Store ── */
+export interface AppStoreButtonProps extends BaseStoreButtonProps {}
+
+export const AppStoreButton = forwardRef<HTMLButtonElement, AppStoreButtonProps>(
+    ({ size = "md", className, ...props }, ref) => (
+        <button
+            ref={ref}
+            className={cn(styles.storeButton, styles[size], className)}
+            {...props}
+        >
+            <AppleLogo size={size} />
+            <div className={styles.textBlock}>
+                <span className={styles.subtitle}>Download on the</span>
+                <span className={styles.title}>App Store</span>
+            </div>
+        </button>
+    )
+);
+AppStoreButton.displayName = "AppStoreButton";
+
+/* ── Google Play ── */
+export interface GooglePlayButtonProps extends BaseStoreButtonProps {}
+
+export const GooglePlayButton = forwardRef<HTMLButtonElement, GooglePlayButtonProps>(
+    ({ size = "md", className, ...props }, ref) => (
+        <button
+            ref={ref}
+            className={cn(styles.storeButton, styles[size], className)}
+            {...props}
+        >
+            <GooglePlayLogo size={size} />
+            <div className={styles.textBlock}>
+                <span className={styles.subtitle}>GET IT ON</span>
+                <span className={styles.title}>Google Play</span>
+            </div>
+        </button>
+    )
+);
+GooglePlayButton.displayName = "GooglePlayButton";
+
+/* ── Samsung Galaxy Store ── */
+export interface GalaxyStoreButtonProps extends BaseStoreButtonProps {}
+
+export const GalaxyStoreButton = forwardRef<HTMLButtonElement, GalaxyStoreButtonProps>(
+    ({ size = "md", className, ...props }, ref) => (
+        <button
+            ref={ref}
+            className={cn(styles.storeButton, styles[size], className)}
+            {...props}
+        >
+            <GalaxyStoreLogo size={size} />
+            <div className={styles.textBlock}>
+                <span className={styles.subtitle}>Available on</span>
+                <span className={styles.title}>Galaxy Store</span>
+            </div>
+        </button>
+    )
+);
+GalaxyStoreButton.displayName = "GalaxyStoreButton";
+
+/* ── SVG Logos ── */
+
+function AppleLogo({ size }: { size: AppStoreSize }) {
+    const s = size === "sm" ? 20 : size === "md" ? 24 : 28;
+    return (
+        <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
+            <path
+                d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"
+                fill="#ffffff"
+            />
+        </svg>
+    );
+}
+
+function GooglePlayLogo({ size }: { size: AppStoreSize }) {
+    const s = size === "sm" ? 20 : size === "md" ? 24 : 28;
+    return (
+        <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
+            <path d="M3.61 1.814L13.793 12 3.61 22.186a1.12 1.12 0 01-.61-.995V2.81c0-.416.232-.78.61-.995z" fill="#4285F4" />
+            <path d="M17.318 8.475L5.09.95C4.556.64 3.95.58 3.41.78l10.39 10.39 3.518-2.695z" fill="#34A853" />
+            <path d="M3.41 23.22c.54.2 1.146.14 1.68-.17l12.228-7.525-3.518-2.695L3.41 23.22z" fill="#EA4335" />
+            <path d="M21.39 10.473l-4.072-2.498L13.8 11.17l3.518 2.695 4.072-2.498c.74-.456.74-1.438 0-1.894z" fill="#FBBC05" />
+        </svg>
+    );
+}
+
+function GalaxyStoreLogo({ size }: { size: AppStoreSize }) {
+    const s = size === "sm" ? 20 : size === "md" ? 24 : 28;
+    return (
+        <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
+            <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+                fill="#FF6B35"
+            />
+            <path
+                d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
+                fill="#FF6B35"
+            />
+            <circle cx="12" cy="12" r="2" fill="#FF6B35" />
+        </svg>
+    );
+}

package/components/ui/AppStoreButton/index.ts

@@ -0,0 +1,2 @@
+export { AppStoreButton, GooglePlayButton, GalaxyStoreButton } from "./AppStoreButton";
+export type { AppStoreButtonProps, GooglePlayButtonProps, GalaxyStoreButtonProps, AppStoreSize } from "./AppStoreButton";

package/components/ui/Avatar/Avatar.module.css

@@ -0,0 +1,76 @@
+.avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: var(--color-bg-elevated);
+    border: 2px solid var(--color-border-subtle);
+}
+
+/* ── Shapes ── */
+.avatar_circle { border-radius: 50%; }
+.avatar_rounded { border-radius: var(--radius-md); }
+
+/* ── Sizes ── */
+.avatar_xs { width: 24px; height: 24px; font-size: 10px; }
+.avatar_sm { width: 32px; height: 32px; font-size: 12px; }
+.avatar_md { width: 40px; height: 40px; font-size: 14px; }
+.avatar_lg { width: 48px; height: 48px; font-size: 16px; }
+.avatar_xl { width: 56px; height: 56px; font-size: 18px; }
+.avatar_2xl { width: 72px; height: 72px; font-size: 22px; }
+
+.img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.fallback {
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    line-height: 1;
+    user-select: none;
+}
+
+/* ── Status indicator ── */
+.status {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    border-radius: 50%;
+    border: 2px solid var(--color-bg-primary);
+}
+
+.status_online { background: #22c55e; }
+.status_offline { background: var(--color-text-tertiary); }
+.status_away { background: #f59e0b; }
+.status_busy { background: #ef4444; }
+
+.statusPos_xs { width: 8px; height: 8px; }
+.statusPos_sm { width: 8px; height: 8px; }
+.statusPos_md { width: 10px; height: 10px; }
+.statusPos_lg { width: 12px; height: 12px; }
+.statusPos_xl { width: 14px; height: 14px; }
+.statusPos_2xl { width: 16px; height: 16px; }
+
+/* ── Group ── */
+.group {
+    display: flex;
+    align-items: center;
+}
+
+.group > * {
+    margin-left: -8px;
+}
+
+.group > *:first-child {
+    margin-left: 0;
+}
+
+.overflow {
+    background: var(--color-bg-card);
+    border: 2px solid var(--color-border-standard);
+    z-index: 0;
+}