@adecore/ui 0.38.0 → 0.39.0

package/dist/index.d.ts

@@ -82,6 +82,7 @@ export { UI_NAMESPACE, UI_RESOURCES } from './locales.ts';
 export { matchScore } from './match.ts';
 export { isApplePlatform } from './platform.ts';
 export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { tintStyle } from './tint.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
 export { UNDO_MS, createToastStore, type Toast, type ToastAction, type ToastDeadline, type ToastInput, type ToastKind, type ToastPatch, type ToastStore, type ToastStoreHook } from './toast-store.ts';

package/dist/index.js

@@ -76,6 +76,7 @@ export { UI_NAMESPACE, UI_RESOURCES } from './locales.js';
 export { matchScore } from './match.js';
 export { isApplePlatform } from './platform.js';
 export { prefetcher } from './prefetch.js';
+export { tintStyle } from './tint.js';
 export { selectAllWithin, selectionWithin } from './selection.js';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts } from './shortcut.js';
 export { UNDO_MS, createToastStore } from './toast-store.js';

package/dist/tint.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare function tintStyle(color: string, ground?: string): CSSProperties;

package/dist/tint.js

@@ -0,0 +1,13 @@
+/*
+ * The custom properties that let what stands on a colored ground follow its color: the hover of a
+ * button and a separator. The theme's utilities read `--surface-hover` and `--border` themselves
+ * (`@theme inline`), so a host sets this on the colored element and its buttons and separators
+ * take it. `--border` is mixed from `--border-strong`, since a property that reads itself is no
+ * value at all.
+ */
+export function tintStyle(color, ground = 'var(--surface-raised)') {
+  return {
+    '--surface-hover': `color-mix(in srgb, ${color} 34%, ${ground})`,
+    '--border': `color-mix(in srgb, ${color} 35%, var(--border-strong))`
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/index.ts

@@ -98,6 +98,7 @@ export { UI_NAMESPACE, UI_RESOURCES } from './locales.ts';
 export { matchScore } from './match.ts';
 export { isApplePlatform } from './platform.ts';
 export { prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { tintStyle } from './tint.ts';
 export { selectAllWithin, selectionWithin } from './selection.ts';
 export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
 export {

package/src/tint.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+
+/*
+ * The custom properties that let what stands on a colored ground follow its color: the hover of a
+ * button and a separator. The theme's utilities read `--surface-hover` and `--border` themselves
+ * (`@theme inline`), so a host sets this on the colored element and its buttons and separators
+ * take it. `--border` is mixed from `--border-strong`, since a property that reads itself is no
+ * value at all.
+ */
+export function tintStyle(color: string, ground = 'var(--surface-raised)'): CSSProperties {
+    return {
+        '--surface-hover': `color-mix(in srgb, ${color} 34%, ${ground})`,
+        '--border': `color-mix(in srgb, ${color} 35%, var(--border-strong))`
+    } as CSSProperties;
+}