@optilogic/core 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -17,94 +17,98 @@
17
17
 
18
18
  @layer base {
19
19
  :root {
20
+ /* Matches OPTILOGIC_LEGACY_THEME */
20
21
  --background: 0 0% 100%;
21
- --foreground: 222.2 84% 4.9%;
22
- --card: 0 0% 100%;
23
- --card-foreground: 222.2 84% 4.9%;
22
+ --foreground: 243 82% 20%;
23
+ --card: 0 0% 98%;
24
+ --card-foreground: 243 82% 20%;
24
25
  --popover: 0 0% 100%;
25
- --popover-foreground: 222.2 84% 4.9%;
26
- --primary: 222.2 47.4% 11.2%;
27
- --primary-foreground: 210 40% 98%;
28
- --secondary: 210 40% 96.1%;
29
- --secondary-foreground: 222.2 47.4% 11.2%;
30
- --muted: 210 40% 96.1%;
31
- --muted-foreground: 215.4 16.3% 46.9%;
32
- --accent: 210 40% 96.1%;
33
- --accent-foreground: 222.2 47.4% 11.2%;
34
- --destructive: 0 84.2% 60.2%;
35
- --destructive-foreground: 210 40% 98%;
36
- --success: 142 76% 36%;
37
- --success-foreground: 210 40% 98%;
38
- --warning: 38 92% 50%;
39
- --warning-foreground: 222.2 47.4% 11.2%;
40
- --border: 214.3 31.8% 91.4%;
41
- --input: 214.3 31.8% 91.4%;
42
- --ring: 222.2 84% 4.9%;
43
- --toggle-track: var(--muted);
44
- --toggle-track-foreground: var(--background);
45
- --input-hover: var(--foreground);
46
- --divider: 214.3 31.8% 91.4%;
47
- --chip: 210 40% 96.1%;
48
- --chip-foreground: 222.2 47.4% 11.2%;
26
+ --popover-foreground: 243 82% 20%;
27
+ --primary: 243 82% 20%;
28
+ --primary-foreground: 0 0% 100%;
29
+ --secondary: 234 86% 67%;
30
+ --secondary-foreground: 0 0% 100%;
31
+ --muted: 216 27% 92%;
32
+ --muted-foreground: 0 1% 45%;
33
+ --accent: 229 87% 90%;
34
+ --accent-foreground: 243 82% 20%;
35
+ --destructive: 0 72% 51%;
36
+ --destructive-foreground: 0 0% 100%;
37
+ --success: 151 48% 50%;
38
+ --success-foreground: 0 0% 100%;
39
+ --warning: 45 90% 62%;
40
+ --warning-foreground: 243 82% 20%;
41
+ --border: 0 0% 82%;
42
+ --input: 0 0% 82%;
43
+ --ring: 234 86% 67%;
44
+ --popover-border: var(--border);
45
+ --toggle-track: 0 0% 82%;
46
+ --toggle-track-foreground: 0 0% 100%;
47
+ --input-hover: 234 86% 67%;
48
+ --divider: 0 0% 82%;
49
+ --chip: 227 88% 85%;
50
+ --chip-foreground: 243 82% 20%;
49
51
  --disabled-opacity: 0.5;
50
52
  --radius: 0.5rem;
51
- --chart-1: 12 76% 61%;
52
- --chart-2: 173 58% 39%;
53
- --chart-3: 197 37% 24%;
54
- --chart-4: 43 74% 66%;
55
- --chart-5: 27 87% 67%;
56
- --chart-6: 262 60% 55%;
57
- --chart-7: 142 60% 45%;
58
- --chart-8: 350 65% 55%;
59
- --chart-9: 200 70% 50%;
60
- --chart-10: 60 65% 50%;
61
- --chart-11: 310 55% 50%;
62
- --chart-12: 180 50% 45%;
53
+ --chart-1: 100 63% 51%;
54
+ --chart-2: 45 90% 62%;
55
+ --chart-3: 234 86% 67%;
56
+ --chart-4: 151 48% 50%;
57
+ --chart-5: 233 80% 76%;
58
+ --chart-6: 0 72% 51%;
59
+ --chart-7: 24 73% 55%;
60
+ --chart-8: 170 69% 46%;
61
+ --chart-9: 25 38% 44%;
62
+ --chart-10: 174 100% 34%;
63
+ --chart-11: 266 54% 50%;
64
+ --chart-12: 326 72% 55%;
63
65
  }
64
66
 
65
67
  .dark {
66
- --background: 222.2 84% 4.9%;
67
- --foreground: 210 40% 98%;
68
- --card: 222.2 84% 4.9%;
69
- --card-foreground: 210 40% 98%;
70
- --popover: 222.2 84% 4.9%;
71
- --popover-foreground: 210 40% 98%;
72
- --primary: 210 40% 98%;
73
- --primary-foreground: 222.2 47.4% 11.2%;
74
- --secondary: 217.2 32.6% 17.5%;
75
- --secondary-foreground: 210 40% 98%;
76
- --muted: 217.2 32.6% 17.5%;
77
- --muted-foreground: 215 20.2% 65.1%;
78
- --accent: 217.2 32.6% 17.5%;
79
- --accent-foreground: 210 40% 98%;
80
- --destructive: 0 62.8% 30.6%;
81
- --destructive-foreground: 210 40% 98%;
82
- --success: 142 76% 36%;
83
- --success-foreground: 210 40% 98%;
84
- --warning: 38 92% 50%;
85
- --warning-foreground: 222.2 47.4% 11.2%;
86
- --border: 217.2 32.6% 17.5%;
87
- --input: 217.2 32.6% 17.5%;
88
- --ring: 212.7 26.8% 83.9%;
89
- --toggle-track: var(--muted);
90
- --toggle-track-foreground: var(--background);
91
- --input-hover: var(--foreground);
92
- --divider: 217.2 32.6% 17.5%;
93
- --chip: 217.2 32.6% 17.5%;
94
- --chip-foreground: 210 40% 98%;
68
+ /* Matches MODERN_DARK_THEME */
69
+ --background: 240 6% 4%;
70
+ --foreground: 0 0% 98%;
71
+ --card: 240 6% 10%;
72
+ --card-foreground: 0 0% 98%;
73
+ --popover: 240 6% 10%;
74
+ --popover-foreground: 0 0% 98%;
75
+ --primary: 217 91% 60%;
76
+ --primary-foreground: 0 0% 100%;
77
+ --secondary: 240 4% 16%;
78
+ --secondary-foreground: 0 0% 98%;
79
+ --muted: 240 4% 16%;
80
+ --muted-foreground: 240 5% 65%;
81
+ --accent: 240 4% 16%;
82
+ --accent-foreground: 0 0% 98%;
83
+ --destructive: 0 84% 60%;
84
+ --destructive-foreground: 0 0% 100%;
85
+ --success: 142 71% 45%;
86
+ --success-foreground: 0 0% 100%;
87
+ --warning: 48 96% 53%;
88
+ --warning-foreground: 240 6% 4%;
89
+ --border: 240 4% 26%;
90
+ --input: 240 4% 26%;
91
+ --ring: 217 91% 60%;
92
+ --popover-border: 240 4% 34%;
93
+ --toggle-track: 240 4% 26%;
94
+ --toggle-track-foreground: 0 0% 98%;
95
+ --input-hover: 217 91% 60%;
96
+ --divider: 240 4% 26%;
97
+ --chip: 240 4% 16%;
98
+ --chip-foreground: 240 5% 83%;
95
99
  --disabled-opacity: 0.5;
96
- --chart-1: 220 70% 50%;
97
- --chart-2: 160 60% 45%;
98
- --chart-3: 30 80% 55%;
99
- --chart-4: 280 65% 60%;
100
- --chart-5: 340 75% 55%;
101
- --chart-6: 120 55% 50%;
102
- --chart-7: 200 75% 55%;
103
- --chart-8: 50 80% 55%;
104
- --chart-9: 0 70% 55%;
105
- --chart-10: 260 65% 60%;
106
- --chart-11: 180 60% 50%;
107
- --chart-12: 90 55% 55%;
100
+ --chart-1: 217 91% 60%;
101
+ --chart-2: 142 71% 45%;
102
+ --chart-3: 38 92% 50%;
103
+ --chart-4: 0 84% 60%;
104
+ --chart-5: 270 60% 60%;
105
+ --chart-6: 174 60% 50%;
106
+ --chart-7: 24 95% 53%;
107
+ --chart-8: 330 80% 60%;
108
+ --chart-9: 199 89% 48%;
109
+ --chart-10: 48 96% 53%;
110
+ --chart-11: 162 63% 41%;
111
+ --chart-12: 292 84% 61%;
108
112
  }
109
113
  }
110
114
 
@@ -58,6 +58,7 @@ var optiUiPreset = {
58
58
  },
59
59
  // Border, input, ring
60
60
  border: "hsl(var(--border))",
61
+ "popover-border": "hsl(var(--popover-border))",
61
62
  input: {
62
63
  DEFAULT: "hsl(var(--input))",
63
64
  hover: "hsl(var(--input-hover))"
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.cjs","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n * presets: [optiUiPreset],\n * content: [\n * './src/**\\/*.{js,ts,jsx,tsx}',\n * './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n * ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n darkMode: [\"class\"],\n theme: {\n extend: {\n colors: {\n // Background colors\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n\n // Card\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n\n // Popover\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n\n // Primary\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n\n // Secondary\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n\n // Muted\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n\n // Accent\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n\n // Destructive\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n\n // Success\n success: {\n DEFAULT: \"hsl(var(--success))\",\n foreground: \"hsl(var(--success-foreground))\",\n },\n\n // Warning\n warning: {\n DEFAULT: \"hsl(var(--warning))\",\n foreground: \"hsl(var(--warning-foreground))\",\n },\n\n // Border, input, ring\n border: \"hsl(var(--border))\",\n input: {\n DEFAULT: \"hsl(var(--input))\",\n hover: \"hsl(var(--input-hover))\",\n },\n ring: \"hsl(var(--ring))\",\n divider: \"hsl(var(--divider))\",\n\n // Toggle/switch track\n \"toggle-track\": {\n DEFAULT: \"hsl(var(--toggle-track))\",\n foreground: \"hsl(var(--toggle-track-foreground))\",\n },\n\n // Chip\n chip: {\n DEFAULT: \"hsl(var(--chip))\",\n foreground: \"hsl(var(--chip-foreground))\",\n },\n\n // Chart colors\n chart: {\n 1: \"hsl(var(--chart-1))\",\n 2: \"hsl(var(--chart-2))\",\n 3: \"hsl(var(--chart-3))\",\n 4: \"hsl(var(--chart-4))\",\n 5: \"hsl(var(--chart-5))\",\n 6: \"hsl(var(--chart-6))\",\n 7: \"hsl(var(--chart-7))\",\n 8: \"hsl(var(--chart-8))\",\n 9: \"hsl(var(--chart-9))\",\n 10: \"hsl(var(--chart-10))\",\n 11: \"hsl(var(--chart-11))\",\n 12: \"hsl(var(--chart-12))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
1
+ {"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.cjs","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n * presets: [optiUiPreset],\n * content: [\n * './src/**\\/*.{js,ts,jsx,tsx}',\n * './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n * ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n darkMode: [\"class\"],\n theme: {\n extend: {\n colors: {\n // Background colors\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n\n // Card\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n\n // Popover\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n\n // Primary\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n\n // Secondary\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n\n // Muted\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n\n // Accent\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n\n // Destructive\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n\n // Success\n success: {\n DEFAULT: \"hsl(var(--success))\",\n foreground: \"hsl(var(--success-foreground))\",\n },\n\n // Warning\n warning: {\n DEFAULT: \"hsl(var(--warning))\",\n foreground: \"hsl(var(--warning-foreground))\",\n },\n\n // Border, input, ring\n border: \"hsl(var(--border))\",\n \"popover-border\": \"hsl(var(--popover-border))\",\n input: {\n DEFAULT: \"hsl(var(--input))\",\n hover: \"hsl(var(--input-hover))\",\n },\n ring: \"hsl(var(--ring))\",\n divider: \"hsl(var(--divider))\",\n\n // Toggle/switch track\n \"toggle-track\": {\n DEFAULT: \"hsl(var(--toggle-track))\",\n foreground: \"hsl(var(--toggle-track-foreground))\",\n },\n\n // Chip\n chip: {\n DEFAULT: \"hsl(var(--chip))\",\n foreground: \"hsl(var(--chip-foreground))\",\n },\n\n // Chart colors\n chart: {\n 1: \"hsl(var(--chart-1))\",\n 2: \"hsl(var(--chart-2))\",\n 3: \"hsl(var(--chart-3))\",\n 4: \"hsl(var(--chart-4))\",\n 5: \"hsl(var(--chart-5))\",\n 6: \"hsl(var(--chart-6))\",\n 7: \"hsl(var(--chart-7))\",\n 8: \"hsl(var(--chart-8))\",\n 9: \"hsl(var(--chart-9))\",\n 10: \"hsl(var(--chart-10))\",\n 11: \"hsl(var(--chart-11))\",\n 12: \"hsl(var(--chart-12))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
@@ -54,6 +54,7 @@ var optiUiPreset = {
54
54
  },
55
55
  // Border, input, ring
56
56
  border: "hsl(var(--border))",
57
+ "popover-border": "hsl(var(--popover-border))",
57
58
  input: {
58
59
  DEFAULT: "hsl(var(--input))",
59
60
  hover: "hsl(var(--input-hover))"
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.js","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n * presets: [optiUiPreset],\n * content: [\n * './src/**\\/*.{js,ts,jsx,tsx}',\n * './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n * ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n darkMode: [\"class\"],\n theme: {\n extend: {\n colors: {\n // Background colors\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n\n // Card\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n\n // Popover\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n\n // Primary\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n\n // Secondary\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n\n // Muted\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n\n // Accent\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n\n // Destructive\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n\n // Success\n success: {\n DEFAULT: \"hsl(var(--success))\",\n foreground: \"hsl(var(--success-foreground))\",\n },\n\n // Warning\n warning: {\n DEFAULT: \"hsl(var(--warning))\",\n foreground: \"hsl(var(--warning-foreground))\",\n },\n\n // Border, input, ring\n border: \"hsl(var(--border))\",\n input: {\n DEFAULT: \"hsl(var(--input))\",\n hover: \"hsl(var(--input-hover))\",\n },\n ring: \"hsl(var(--ring))\",\n divider: \"hsl(var(--divider))\",\n\n // Toggle/switch track\n \"toggle-track\": {\n DEFAULT: \"hsl(var(--toggle-track))\",\n foreground: \"hsl(var(--toggle-track-foreground))\",\n },\n\n // Chip\n chip: {\n DEFAULT: \"hsl(var(--chip))\",\n foreground: \"hsl(var(--chip-foreground))\",\n },\n\n // Chart colors\n chart: {\n 1: \"hsl(var(--chart-1))\",\n 2: \"hsl(var(--chart-2))\",\n 3: \"hsl(var(--chart-3))\",\n 4: \"hsl(var(--chart-4))\",\n 5: \"hsl(var(--chart-5))\",\n 6: \"hsl(var(--chart-6))\",\n 7: \"hsl(var(--chart-7))\",\n 8: \"hsl(var(--chart-8))\",\n 9: \"hsl(var(--chart-9))\",\n 10: \"hsl(var(--chart-10))\",\n 11: \"hsl(var(--chart-11))\",\n 12: \"hsl(var(--chart-12))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
1
+ {"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.js","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n * presets: [optiUiPreset],\n * content: [\n * './src/**\\/*.{js,ts,jsx,tsx}',\n * './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n * ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n darkMode: [\"class\"],\n theme: {\n extend: {\n colors: {\n // Background colors\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n\n // Card\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n\n // Popover\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n\n // Primary\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n\n // Secondary\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n\n // Muted\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n\n // Accent\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n\n // Destructive\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n\n // Success\n success: {\n DEFAULT: \"hsl(var(--success))\",\n foreground: \"hsl(var(--success-foreground))\",\n },\n\n // Warning\n warning: {\n DEFAULT: \"hsl(var(--warning))\",\n foreground: \"hsl(var(--warning-foreground))\",\n },\n\n // Border, input, ring\n border: \"hsl(var(--border))\",\n \"popover-border\": \"hsl(var(--popover-border))\",\n input: {\n DEFAULT: \"hsl(var(--input))\",\n hover: \"hsl(var(--input-hover))\",\n },\n ring: \"hsl(var(--ring))\",\n divider: \"hsl(var(--divider))\",\n\n // Toggle/switch track\n \"toggle-track\": {\n DEFAULT: \"hsl(var(--toggle-track))\",\n foreground: \"hsl(var(--toggle-track-foreground))\",\n },\n\n // Chip\n chip: {\n DEFAULT: \"hsl(var(--chip))\",\n foreground: \"hsl(var(--chip-foreground))\",\n },\n\n // Chart colors\n chart: {\n 1: \"hsl(var(--chart-1))\",\n 2: \"hsl(var(--chart-2))\",\n 3: \"hsl(var(--chart-3))\",\n 4: \"hsl(var(--chart-4))\",\n 5: \"hsl(var(--chart-5))\",\n 6: \"hsl(var(--chart-6))\",\n 7: \"hsl(var(--chart-7))\",\n 8: \"hsl(var(--chart-8))\",\n 9: \"hsl(var(--chart-9))\",\n 10: \"hsl(var(--chart-10))\",\n 11: \"hsl(var(--chart-11))\",\n 12: \"hsl(var(--chart-12))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@optilogic/core",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "Core UI components for Optilogic - A professional React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -143,14 +143,19 @@ function Calendar({
143
143
  "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
144
144
  week: "flex w-full mt-2",
145
145
  day: cn(
146
- "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
146
+ "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
147
+ "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
148
+ // Override the button's ghost text color when day is selected (data-selected is on the td, not the button)
149
+ "[&[data-selected]>button]:bg-primary [&[data-selected]>button]:text-primary-foreground",
150
+ "[&[data-selected]>button]:hover:bg-primary/90 [&[data-selected]>button]:hover:text-primary-foreground",
151
+ "[&[data-selected]>button]:focus:bg-primary [&[data-selected]>button]:focus:text-primary-foreground",
147
152
  props.mode === "range"
148
153
  ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
149
154
  : "[&:has([aria-selected])]:rounded-md"
150
155
  ),
151
156
  day_button: cn(
152
157
  buttonVariants({ variant: "ghost" }),
153
- "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
158
+ "h-9 w-9 p-0 font-normal"
154
159
  ),
155
160
  range_start: "day-range-start rounded-l-md",
156
161
  range_end: "day-range-end rounded-r-md",
@@ -217,7 +217,7 @@ function MenuItem({ item, onClose, depth = 0 }: MenuItemProps) {
217
217
  <div
218
218
  className={cn(
219
219
  "fixed z-[60] min-w-[180px] max-w-[280px]",
220
- "rounded-md border border-border",
220
+ "rounded-md border border-popover-border",
221
221
  "bg-popover text-popover-foreground",
222
222
  "shadow-lg",
223
223
  "animate-in fade-in-0 zoom-in-95",
@@ -337,7 +337,7 @@ export function ContextMenu({
337
337
  ref={menuRef}
338
338
  className={cn(
339
339
  "fixed z-50 min-w-[180px] max-w-[280px]",
340
- "rounded-md border border-border",
340
+ "rounded-md border border-popover-border",
341
341
  "bg-popover text-popover-foreground",
342
342
  "shadow-lg",
343
343
  "animate-in fade-in-0 zoom-in-95",
@@ -756,7 +756,7 @@ export function DataGrid<T = Record<string, CellValue>>({
756
756
  {/* Tooltip for long content */}
757
757
  {hoveredCell && (
758
758
  <div
759
- className="fixed z-[200] p-3 bg-popover text-popover-foreground border border-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none"
759
+ className="fixed z-[200] p-3 bg-popover text-popover-foreground border border-popover-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none"
760
760
  style={{
761
761
  left: `${hoveredCell.x}px`,
762
762
  top: `${hoveredCell.y}px`,
@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
50
50
  <DropdownMenuPrimitive.SubContent
51
51
  ref={ref}
52
52
  className={cn(
53
- "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg",
53
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border border-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
54
54
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
55
55
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
56
56
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -73,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
73
73
  ref={ref}
74
74
  sideOffset={sideOffset}
75
75
  className={cn(
76
- "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
76
+ "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
77
77
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
78
78
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
79
79
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -44,7 +44,7 @@ const PopoverContent = React.forwardRef<
44
44
  align={align}
45
45
  sideOffset={sideOffset}
46
46
  className={cn(
47
- "z-50 w-auto max-w-[90vw] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
47
+ "z-50 w-auto max-w-[90vw] rounded-md border border-popover-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
48
48
  // Animation
49
49
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
50
50
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
76
76
  <SelectPrimitive.Content
77
77
  ref={ref}
78
78
  className={cn(
79
- "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
79
+ "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
80
80
  position === "popper" &&
81
81
  "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
82
82
  className
@@ -53,11 +53,11 @@ const TooltipContent = React.forwardRef<
53
53
  "px-2.5 py-1.5 rounded-md",
54
54
  // Colors
55
55
  "bg-popover text-popover-foreground",
56
- "border border-border",
56
+ "border border-popover-border",
57
57
  // Typography
58
58
  "text-xs font-medium",
59
59
  // Shadow
60
- "shadow-md",
60
+ "shadow-lg",
61
61
  // Animation
62
62
  "animate-in fade-in-0 zoom-in-95",
63
63
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
package/src/index.ts CHANGED
@@ -380,16 +380,11 @@ export {
380
380
  type ThemeHSL,
381
381
  type ColorFieldConfig,
382
382
  // Presets
383
- GREEN_THEME,
384
383
  OPTILOGIC_LEGACY_THEME,
385
- FUTURISTIC_THEME,
386
- NATURE_THEME,
387
- SCIFI_THEME,
388
- OCEAN_THEME,
389
- SUNSET_THEME,
390
- FOREST_THEME,
391
- CYBERPUNK_THEME,
384
+ OPTILOGIC_DARK_THEME,
385
+ MODERN_LIGHT_THEME,
392
386
  MINIMALIST_LIGHT_THEME,
387
+ MODERN_DARK_THEME,
393
388
  DARK_ELEGANT_THEME,
394
389
  PRESET_THEMES,
395
390
  ALL_THEMES,
package/src/styles.css CHANGED
@@ -17,94 +17,98 @@
17
17
 
18
18
  @layer base {
19
19
  :root {
20
+ /* Matches OPTILOGIC_LEGACY_THEME */
20
21
  --background: 0 0% 100%;
21
- --foreground: 222.2 84% 4.9%;
22
- --card: 0 0% 100%;
23
- --card-foreground: 222.2 84% 4.9%;
22
+ --foreground: 243 82% 20%;
23
+ --card: 0 0% 98%;
24
+ --card-foreground: 243 82% 20%;
24
25
  --popover: 0 0% 100%;
25
- --popover-foreground: 222.2 84% 4.9%;
26
- --primary: 222.2 47.4% 11.2%;
27
- --primary-foreground: 210 40% 98%;
28
- --secondary: 210 40% 96.1%;
29
- --secondary-foreground: 222.2 47.4% 11.2%;
30
- --muted: 210 40% 96.1%;
31
- --muted-foreground: 215.4 16.3% 46.9%;
32
- --accent: 210 40% 96.1%;
33
- --accent-foreground: 222.2 47.4% 11.2%;
34
- --destructive: 0 84.2% 60.2%;
35
- --destructive-foreground: 210 40% 98%;
36
- --success: 142 76% 36%;
37
- --success-foreground: 210 40% 98%;
38
- --warning: 38 92% 50%;
39
- --warning-foreground: 222.2 47.4% 11.2%;
40
- --border: 214.3 31.8% 91.4%;
41
- --input: 214.3 31.8% 91.4%;
42
- --ring: 222.2 84% 4.9%;
43
- --toggle-track: var(--muted);
44
- --toggle-track-foreground: var(--background);
45
- --input-hover: var(--foreground);
46
- --divider: 214.3 31.8% 91.4%;
47
- --chip: 210 40% 96.1%;
48
- --chip-foreground: 222.2 47.4% 11.2%;
26
+ --popover-foreground: 243 82% 20%;
27
+ --primary: 243 82% 20%;
28
+ --primary-foreground: 0 0% 100%;
29
+ --secondary: 234 86% 67%;
30
+ --secondary-foreground: 0 0% 100%;
31
+ --muted: 216 27% 92%;
32
+ --muted-foreground: 0 1% 45%;
33
+ --accent: 229 87% 90%;
34
+ --accent-foreground: 243 82% 20%;
35
+ --destructive: 0 72% 51%;
36
+ --destructive-foreground: 0 0% 100%;
37
+ --success: 151 48% 50%;
38
+ --success-foreground: 0 0% 100%;
39
+ --warning: 45 90% 62%;
40
+ --warning-foreground: 243 82% 20%;
41
+ --border: 0 0% 82%;
42
+ --input: 0 0% 82%;
43
+ --ring: 234 86% 67%;
44
+ --popover-border: var(--border);
45
+ --toggle-track: 0 0% 82%;
46
+ --toggle-track-foreground: 0 0% 100%;
47
+ --input-hover: 234 86% 67%;
48
+ --divider: 0 0% 82%;
49
+ --chip: 227 88% 85%;
50
+ --chip-foreground: 243 82% 20%;
49
51
  --disabled-opacity: 0.5;
50
52
  --radius: 0.5rem;
51
- --chart-1: 12 76% 61%;
52
- --chart-2: 173 58% 39%;
53
- --chart-3: 197 37% 24%;
54
- --chart-4: 43 74% 66%;
55
- --chart-5: 27 87% 67%;
56
- --chart-6: 262 60% 55%;
57
- --chart-7: 142 60% 45%;
58
- --chart-8: 350 65% 55%;
59
- --chart-9: 200 70% 50%;
60
- --chart-10: 60 65% 50%;
61
- --chart-11: 310 55% 50%;
62
- --chart-12: 180 50% 45%;
53
+ --chart-1: 100 63% 51%;
54
+ --chart-2: 45 90% 62%;
55
+ --chart-3: 234 86% 67%;
56
+ --chart-4: 151 48% 50%;
57
+ --chart-5: 233 80% 76%;
58
+ --chart-6: 0 72% 51%;
59
+ --chart-7: 24 73% 55%;
60
+ --chart-8: 170 69% 46%;
61
+ --chart-9: 25 38% 44%;
62
+ --chart-10: 174 100% 34%;
63
+ --chart-11: 266 54% 50%;
64
+ --chart-12: 326 72% 55%;
63
65
  }
64
66
 
65
67
  .dark {
66
- --background: 222.2 84% 4.9%;
67
- --foreground: 210 40% 98%;
68
- --card: 222.2 84% 4.9%;
69
- --card-foreground: 210 40% 98%;
70
- --popover: 222.2 84% 4.9%;
71
- --popover-foreground: 210 40% 98%;
72
- --primary: 210 40% 98%;
73
- --primary-foreground: 222.2 47.4% 11.2%;
74
- --secondary: 217.2 32.6% 17.5%;
75
- --secondary-foreground: 210 40% 98%;
76
- --muted: 217.2 32.6% 17.5%;
77
- --muted-foreground: 215 20.2% 65.1%;
78
- --accent: 217.2 32.6% 17.5%;
79
- --accent-foreground: 210 40% 98%;
80
- --destructive: 0 62.8% 30.6%;
81
- --destructive-foreground: 210 40% 98%;
82
- --success: 142 76% 36%;
83
- --success-foreground: 210 40% 98%;
84
- --warning: 38 92% 50%;
85
- --warning-foreground: 222.2 47.4% 11.2%;
86
- --border: 217.2 32.6% 17.5%;
87
- --input: 217.2 32.6% 17.5%;
88
- --ring: 212.7 26.8% 83.9%;
89
- --toggle-track: var(--muted);
90
- --toggle-track-foreground: var(--background);
91
- --input-hover: var(--foreground);
92
- --divider: 217.2 32.6% 17.5%;
93
- --chip: 217.2 32.6% 17.5%;
94
- --chip-foreground: 210 40% 98%;
68
+ /* Matches MODERN_DARK_THEME */
69
+ --background: 240 6% 4%;
70
+ --foreground: 0 0% 98%;
71
+ --card: 240 6% 10%;
72
+ --card-foreground: 0 0% 98%;
73
+ --popover: 240 6% 10%;
74
+ --popover-foreground: 0 0% 98%;
75
+ --primary: 217 91% 60%;
76
+ --primary-foreground: 0 0% 100%;
77
+ --secondary: 240 4% 16%;
78
+ --secondary-foreground: 0 0% 98%;
79
+ --muted: 240 4% 16%;
80
+ --muted-foreground: 240 5% 65%;
81
+ --accent: 240 4% 16%;
82
+ --accent-foreground: 0 0% 98%;
83
+ --destructive: 0 84% 60%;
84
+ --destructive-foreground: 0 0% 100%;
85
+ --success: 142 71% 45%;
86
+ --success-foreground: 0 0% 100%;
87
+ --warning: 48 96% 53%;
88
+ --warning-foreground: 240 6% 4%;
89
+ --border: 240 4% 26%;
90
+ --input: 240 4% 26%;
91
+ --ring: 217 91% 60%;
92
+ --popover-border: 240 4% 34%;
93
+ --toggle-track: 240 4% 26%;
94
+ --toggle-track-foreground: 0 0% 98%;
95
+ --input-hover: 217 91% 60%;
96
+ --divider: 240 4% 26%;
97
+ --chip: 240 4% 16%;
98
+ --chip-foreground: 240 5% 83%;
95
99
  --disabled-opacity: 0.5;
96
- --chart-1: 220 70% 50%;
97
- --chart-2: 160 60% 45%;
98
- --chart-3: 30 80% 55%;
99
- --chart-4: 280 65% 60%;
100
- --chart-5: 340 75% 55%;
101
- --chart-6: 120 55% 50%;
102
- --chart-7: 200 75% 55%;
103
- --chart-8: 50 80% 55%;
104
- --chart-9: 0 70% 55%;
105
- --chart-10: 260 65% 60%;
106
- --chart-11: 180 60% 50%;
107
- --chart-12: 90 55% 55%;
100
+ --chart-1: 217 91% 60%;
101
+ --chart-2: 142 71% 45%;
102
+ --chart-3: 38 92% 50%;
103
+ --chart-4: 0 84% 60%;
104
+ --chart-5: 270 60% 60%;
105
+ --chart-6: 174 60% 50%;
106
+ --chart-7: 24 95% 53%;
107
+ --chart-8: 330 80% 60%;
108
+ --chart-9: 199 89% 48%;
109
+ --chart-10: 48 96% 53%;
110
+ --chart-11: 162 63% 41%;
111
+ --chart-12: 292 84% 61%;
108
112
  }
109
113
  }
110
114
 
@@ -83,6 +83,7 @@ export const optiUiPreset: Partial<Config> = {
83
83
 
84
84
  // Border, input, ring
85
85
  border: "hsl(var(--border))",
86
+ "popover-border": "hsl(var(--popover-border))",
86
87
  input: {
87
88
  DEFAULT: "hsl(var(--input))",
88
89
  hover: "hsl(var(--input-hover))",
@@ -9,16 +9,11 @@ export type { Theme, ThemeHex, ThemeHSL, ColorFieldConfig } from "./types";
9
9
 
10
10
  // Presets
11
11
  export {
12
- GREEN_THEME,
13
12
  OPTILOGIC_LEGACY_THEME,
14
- FUTURISTIC_THEME,
15
- NATURE_THEME,
16
- SCIFI_THEME,
17
- OCEAN_THEME,
18
- SUNSET_THEME,
19
- FOREST_THEME,
20
- CYBERPUNK_THEME,
13
+ OPTILOGIC_DARK_THEME,
14
+ MODERN_LIGHT_THEME,
21
15
  MINIMALIST_LIGHT_THEME,
16
+ MODERN_DARK_THEME,
22
17
  DARK_ELEGANT_THEME,
23
18
  PRESET_THEMES,
24
19
  ALL_THEMES,