@optilogic/core 1.1.0 → 1.2.1
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/index.cjs +285 -488
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +50 -34
- package/dist/index.d.ts +50 -34
- package/dist/index.js +283 -481
- package/dist/index.js.map +1 -1
- package/dist/styles.css +84 -80
- package/dist/tailwind-preset.cjs +1 -0
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.js +1 -0
- package/dist/tailwind-preset.js.map +1 -1
- package/package.json +1 -1
- package/src/components/calendar.tsx +7 -2
- package/src/components/context-menu.tsx +2 -2
- package/src/components/data-grid/DataGrid.tsx +1 -1
- package/src/components/dropdown-menu.tsx +2 -2
- package/src/components/file-view/components/HtmlRenderer.tsx +108 -2
- package/src/components/popover.tsx +1 -1
- package/src/components/select.tsx +1 -1
- package/src/components/tooltip.tsx +2 -2
- package/src/index.ts +3 -8
- package/src/styles.css +84 -80
- package/src/tailwind-preset.ts +1 -0
- package/src/theme/index.ts +3 -8
- package/src/theme/presets.ts +211 -497
- package/src/theme/types.ts +10 -0
- package/src/theme/utils.ts +24 -0
package/src/theme/types.ts
CHANGED
|
@@ -54,6 +54,12 @@ export interface Theme {
|
|
|
54
54
|
input: string; // --input
|
|
55
55
|
ring: string; // --ring (focus ring)
|
|
56
56
|
|
|
57
|
+
/** Elevated surface border (optional, with fallback) */
|
|
58
|
+
popoverBorder?: string; // --popover-border (floating surface border; fallback: border)
|
|
59
|
+
|
|
60
|
+
/** Divider/separator color (optional, with fallback) */
|
|
61
|
+
divider?: string; // --divider (separator line color; fallback: border)
|
|
62
|
+
|
|
57
63
|
/** Interactive control colors (optional, with fallbacks) */
|
|
58
64
|
toggleTrack?: string; // --toggle-track (switch track bg when off; fallback: muted)
|
|
59
65
|
toggleTrackForeground?: string; // --toggle-track-foreground (switch thumb when off; fallback: background)
|
|
@@ -120,6 +126,8 @@ export interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
|
|
|
120
126
|
border: string;
|
|
121
127
|
input: string;
|
|
122
128
|
ring: string;
|
|
129
|
+
popoverBorder?: string;
|
|
130
|
+
divider?: string;
|
|
123
131
|
toggleTrack?: string;
|
|
124
132
|
toggleTrackForeground?: string;
|
|
125
133
|
inputHover?: string;
|
|
@@ -163,6 +171,8 @@ type ThemeColorFields = {
|
|
|
163
171
|
border: string;
|
|
164
172
|
input: string;
|
|
165
173
|
ring: string;
|
|
174
|
+
popoverBorder?: string;
|
|
175
|
+
divider?: string;
|
|
166
176
|
toggleTrack?: string;
|
|
167
177
|
toggleTrackForeground?: string;
|
|
168
178
|
inputHover?: string;
|
package/src/theme/utils.ts
CHANGED
|
@@ -85,6 +85,10 @@ export function themeToHsl(theme: Theme): ThemeHSL {
|
|
|
85
85
|
border: hexToHsl(theme.border),
|
|
86
86
|
input: hexToHsl(theme.input),
|
|
87
87
|
ring: hexToHsl(theme.ring),
|
|
88
|
+
popoverBorder: theme.popoverBorder
|
|
89
|
+
? hexToHsl(theme.popoverBorder)
|
|
90
|
+
: undefined,
|
|
91
|
+
divider: theme.divider ? hexToHsl(theme.divider) : undefined,
|
|
88
92
|
toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : undefined,
|
|
89
93
|
toggleTrackForeground: theme.toggleTrackForeground
|
|
90
94
|
? hexToHsl(theme.toggleTrackForeground)
|
|
@@ -162,6 +166,16 @@ export function applyTheme(theme: Theme, targetElement?: HTMLElement): void {
|
|
|
162
166
|
element.style.setProperty("--input", hslTheme.input);
|
|
163
167
|
element.style.setProperty("--ring", hslTheme.ring);
|
|
164
168
|
|
|
169
|
+
// Elevated surface & divider tokens (with fallbacks)
|
|
170
|
+
element.style.setProperty(
|
|
171
|
+
"--popover-border",
|
|
172
|
+
hslTheme.popoverBorder ?? hslTheme.border
|
|
173
|
+
);
|
|
174
|
+
element.style.setProperty(
|
|
175
|
+
"--divider",
|
|
176
|
+
hslTheme.divider ?? hslTheme.border
|
|
177
|
+
);
|
|
178
|
+
|
|
165
179
|
// Interactive control tokens (with fallbacks)
|
|
166
180
|
element.style.setProperty(
|
|
167
181
|
"--toggle-track",
|
|
@@ -313,6 +327,8 @@ export function areThemesEqual(theme1: Theme, theme2: Theme): boolean {
|
|
|
313
327
|
"border",
|
|
314
328
|
"input",
|
|
315
329
|
"ring",
|
|
330
|
+
"popoverBorder",
|
|
331
|
+
"divider",
|
|
316
332
|
"toggleTrack",
|
|
317
333
|
"toggleTrackForeground",
|
|
318
334
|
"inputHover",
|
|
@@ -502,6 +518,14 @@ export function validateThemeContrast(theme: Theme): ContrastWarning[] {
|
|
|
502
518
|
labelB: "background",
|
|
503
519
|
minRatio: 3,
|
|
504
520
|
},
|
|
521
|
+
// Popover border vs popover background (elevated surface boundary — 3:1)
|
|
522
|
+
{
|
|
523
|
+
a: theme.popoverBorder ?? theme.border,
|
|
524
|
+
b: theme.popover,
|
|
525
|
+
labelA: "popoverBorder",
|
|
526
|
+
labelB: "popover",
|
|
527
|
+
minRatio: 3,
|
|
528
|
+
},
|
|
505
529
|
// Muted foreground on muted bg
|
|
506
530
|
{
|
|
507
531
|
a: theme.mutedForeground,
|