@toolr/ui-design 0.1.11 → 0.1.12
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/agent-rules.json +1 -1
- package/components/lib/theme-engine.ts +1 -5
- package/dist/index.d.ts +0 -5
- package/dist/tokens/semantic.css +1 -1
- package/package.json +1 -1
- package/tokens/semantic.css +1 -1
package/agent-rules.json
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"color": "#fb923c",
|
|
55
55
|
"rules": [
|
|
56
56
|
{ "type": "do", "text": "Select, Tooltip, Modal all render via createPortal to document.body — parent overflow:hidden and z-index don't affect them" },
|
|
57
|
-
{ "type": "do", "text": "Popover background is rgba(0,0,0,0.
|
|
57
|
+
{ "type": "do", "text": "Popover background is rgba(0,0,0,0.9) — semi-transparent by design, which is why body background matters" },
|
|
58
58
|
{ "type": "dont", "text": "Never wrap portal components in overflow:hidden expecting to clip them — they escape to document.body" }
|
|
59
59
|
]
|
|
60
60
|
},
|
|
@@ -140,11 +140,6 @@ export function isLightTheme(themeId: ThemeId): boolean {
|
|
|
140
140
|
/**
|
|
141
141
|
* Apply a theme to the document by setting CSS custom properties on the root element.
|
|
142
142
|
*
|
|
143
|
-
* IMPORTANT — body background: Portal-based components (Select, Tooltip) render at
|
|
144
|
-
* document.body via createPortal. Their backgrounds use --popover which is semi-transparent
|
|
145
|
-
* (rgba(0,0,0,0.8)). If <body> has no background-color, the browser default (white) bleeds
|
|
146
|
-
* through, making dropdowns/tooltips appear gray instead of dark.
|
|
147
|
-
*
|
|
148
143
|
* Consuming apps MUST set: body { background-color: var(--background); }
|
|
149
144
|
*/
|
|
150
145
|
export function applyTheme(themeId: ThemeId, accentHue: number | null, dims: Record<SurfaceKey, number> = DEFAULT_DIMS, outline: number = DEFAULT_OUTLINE, root: HTMLElement = document.documentElement): void {
|
|
@@ -186,4 +181,5 @@ export function applyTheme(themeId: ThemeId, accentHue: number | null, dims: Rec
|
|
|
186
181
|
root.style.setProperty('--surface-hover', `${glassBase}${alphaToHex(10 / 100)}`)
|
|
187
182
|
}
|
|
188
183
|
|
|
184
|
+
|
|
189
185
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -58,11 +58,6 @@ declare function isLightTheme(themeId: ThemeId): boolean;
|
|
|
58
58
|
/**
|
|
59
59
|
* Apply a theme to the document by setting CSS custom properties on the root element.
|
|
60
60
|
*
|
|
61
|
-
* IMPORTANT — body background: Portal-based components (Select, Tooltip) render at
|
|
62
|
-
* document.body via createPortal. Their backgrounds use --popover which is semi-transparent
|
|
63
|
-
* (rgba(0,0,0,0.8)). If <body> has no background-color, the browser default (white) bleeds
|
|
64
|
-
* through, making dropdowns/tooltips appear gray instead of dark.
|
|
65
|
-
*
|
|
66
61
|
* Consuming apps MUST set: body { background-color: var(--background); }
|
|
67
62
|
*/
|
|
68
63
|
declare function applyTheme(themeId: ThemeId, accentHue: number | null, dims?: Record<SurfaceKey, number>, outline?: number, root?: HTMLElement): void;
|
package/dist/tokens/semantic.css
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
--dialog-backdrop: rgba(0, 0, 0, 0.95);
|
|
25
25
|
|
|
26
26
|
/* Popover: floating panels, dropdown menus */
|
|
27
|
-
--popover: rgba(0, 0, 0, 0.
|
|
27
|
+
--popover: rgba(0, 0, 0, 0.9);
|
|
28
28
|
--popover-foreground: rgba(255, 255, 255, 0.83);
|
|
29
29
|
|
|
30
30
|
/* Muted: subdued elements, disabled states */
|
package/package.json
CHANGED
package/tokens/semantic.css
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
--dialog-backdrop: rgba(0, 0, 0, 0.95);
|
|
25
25
|
|
|
26
26
|
/* Popover: floating panels, dropdown menus */
|
|
27
|
-
--popover: rgba(0, 0, 0, 0.
|
|
27
|
+
--popover: rgba(0, 0, 0, 0.9);
|
|
28
28
|
--popover-foreground: rgba(255, 255, 255, 0.83);
|
|
29
29
|
|
|
30
30
|
/* Muted: subdued elements, disabled states */
|