@bridgeline-digital/hawk-app-ui 0.1.0 → 0.1.1-dev.20261021024847
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/README.md +2 -2
- package/dist/css/hawk.css +7 -2
- package/dist/theme/index.d.ts +4 -1
- package/dist/theme/index.js +32 -6
- package/dist/theme/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -91,9 +91,9 @@ see it in a real one). `<HawkAppProvider preview={{ mode: 'dark' }}>` renders wi
|
|
|
91
91
|
| Part | From |
|
|
92
92
|
|---|---|
|
|
93
93
|
| Typography (Montserrat, 14 px base, h1–h3, `featuredValue`), breakpoints (`sm` 640 … `2xl` 1536), spacing, card and list overrides | Spark's theme (`sparkThemeOptions`) |
|
|
94
|
-
| Primary color and its text, backgrounds, text colors, dividers, border radius, light or dark | The host's theme tokens (`color-button-accent-background`, `color-background`, `color-background-container`, `color-text-default`, `color-text-secondary`, `color-border-default`, `border-radius`, `mode`), else Spark's |
|
|
94
|
+
| Primary color and its text, backgrounds, text colors, dividers, border radius, light or dark | The host's theme tokens (`color-button-accent-background`, `color-background`, `color-background-container`, `color-text-default`, `color-text-secondary`, `color-border-default`, `border-radius`, `mode`), else Spark's. A `color-border-default` too faint to see on the host's surface (contrast under 1.2, such as HawkSearch's `#f5f7fa` on white) is left out, so dividers, table rows and outlined cards keep MUI's divider |
|
|
95
95
|
| Dialogs and snackbars in the part of the frame the user can see | The kit (`frameThemeOptions`, from the bridge's `--hawk-visible-*` variables) |
|
|
96
|
-
| Table rows and header (borders in the divider color, a header row on the page background) | The kit (`tableThemeOptions`) |
|
|
96
|
+
| Table rows and header (borders in the divider color, a header row on the page background, rows 10px above and below, every other body row tinted; the stylesheet's `.hawk-table` alike) | The kit (`tableThemeOptions`) |
|
|
97
97
|
|
|
98
98
|
The font is always Spark's, whatever the host uses, so apps look the same in HawkSearch and Spark.
|
|
99
99
|
|
package/dist/css/hawk.css
CHANGED
|
@@ -227,10 +227,12 @@ hawk-kpi[highlight] .hawk-kpi {
|
|
|
227
227
|
border-collapse: collapse;
|
|
228
228
|
font-variant-numeric: tabular-nums;
|
|
229
229
|
}
|
|
230
|
+
/* Rows: 10px above and below; lines that show even when the host's border color is too faint to see on its own
|
|
231
|
+
(HawkSearch's is #f5f7fa), and every other body row tinted with the text color (light and dark alike). */
|
|
230
232
|
.hawk-table th,
|
|
231
233
|
.hawk-table td {
|
|
232
|
-
padding:
|
|
233
|
-
border-bottom: 1px solid var(--hawk-ui-border);
|
|
234
|
+
padding: 10px 16px;
|
|
235
|
+
border-bottom: 1px solid color-mix(in srgb, var(--hawk-ui-text) 12%, var(--hawk-ui-border));
|
|
234
236
|
text-align: left;
|
|
235
237
|
vertical-align: middle;
|
|
236
238
|
}
|
|
@@ -254,6 +256,9 @@ hawk-kpi[highlight] .hawk-kpi {
|
|
|
254
256
|
font-weight: 700;
|
|
255
257
|
border-bottom: 0;
|
|
256
258
|
}
|
|
259
|
+
.hawk-table tbody tr:nth-of-type(even) {
|
|
260
|
+
background: color-mix(in srgb, var(--hawk-ui-text) 3%, transparent);
|
|
261
|
+
}
|
|
257
262
|
.hawk-table tbody tr.is-clickable {
|
|
258
263
|
cursor: pointer;
|
|
259
264
|
}
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -11,11 +11,14 @@ export declare const frameThemeOptions: ThemeOptions;
|
|
|
11
11
|
* Tables that read as tables in a frame: MUI draws cell borders in the divider lightened by 88%, which is nearly white
|
|
12
12
|
* with a host's light border color, so rows ran together. Cells use the divider as is, the header row gets the page
|
|
13
13
|
* background and semibold secondary text, and the last row has no border (the outlined Paper around a table draws it).
|
|
14
|
+
* Rows are a little taller than MUI's small size (10px above and below, not 6px) and every other body row is tinted
|
|
15
|
+
* with the text color (so it works in light and dark); a clickable row's hover still shows over the tint.
|
|
14
16
|
*/
|
|
15
17
|
export declare const tableThemeOptions: ThemeOptions;
|
|
16
18
|
/**
|
|
17
19
|
* The palette from the host's theme tokens (`context.theme.tokens`, the same names as the `--hawk-*` CSS variables):
|
|
18
|
-
* backgrounds, text, borders and the accent color. Missing or unreadable tokens keep Spark's
|
|
20
|
+
* backgrounds, text, borders and the accent color. Missing or unreadable tokens keep Spark's, and so does a border color
|
|
21
|
+
* too faint to see on the host's surface.
|
|
19
22
|
*/
|
|
20
23
|
export declare function hostPalette(theme: HawkTheme | null | undefined): PaletteOptions;
|
|
21
24
|
/**
|
package/dist/theme/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createTheme } from '@mui/material/styles';
|
|
1
|
+
import { alpha, createTheme, getContrastRatio } from '@mui/material/styles';
|
|
2
2
|
import { sparkPalette, sparkThemeOptions } from './spark.js';
|
|
3
3
|
export { SPARK_SOURCE, sparkFontFamily, sparkPalette, sparkThemeOptions } from './spark.js';
|
|
4
4
|
/**
|
|
@@ -29,6 +29,8 @@ export const frameThemeOptions = {
|
|
|
29
29
|
* Tables that read as tables in a frame: MUI draws cell borders in the divider lightened by 88%, which is nearly white
|
|
30
30
|
* with a host's light border color, so rows ran together. Cells use the divider as is, the header row gets the page
|
|
31
31
|
* background and semibold secondary text, and the last row has no border (the outlined Paper around a table draws it).
|
|
32
|
+
* Rows are a little taller than MUI's small size (10px above and below, not 6px) and every other body row is tinted
|
|
33
|
+
* with the text color (so it works in light and dark); a clickable row's hover still shows over the tint.
|
|
32
34
|
*/
|
|
33
35
|
export const tableThemeOptions = {
|
|
34
36
|
components: {
|
|
@@ -40,11 +42,16 @@ export const tableThemeOptions = {
|
|
|
40
42
|
color: theme.palette.text.secondary,
|
|
41
43
|
fontWeight: 600,
|
|
42
44
|
}),
|
|
45
|
+
sizeSmall: { paddingTop: 10, paddingBottom: 10 },
|
|
43
46
|
},
|
|
44
47
|
},
|
|
45
48
|
MuiTableRow: {
|
|
46
49
|
styleOverrides: {
|
|
47
|
-
root: {
|
|
50
|
+
root: ({ theme }) => ({
|
|
51
|
+
'&:last-child > td, &:last-child > th[scope="row"]': { borderBottom: 0 },
|
|
52
|
+
'.MuiTableBody-root > &:nth-of-type(even)': { backgroundColor: alpha(theme.palette.text.primary, 0.03) },
|
|
53
|
+
'.MuiTableBody-root > &.MuiTableRow-hover:hover': { backgroundColor: theme.palette.action.hover },
|
|
54
|
+
}),
|
|
48
55
|
},
|
|
49
56
|
},
|
|
50
57
|
},
|
|
@@ -62,19 +69,38 @@ function radius(tokens) {
|
|
|
62
69
|
function defined(value) {
|
|
63
70
|
return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined && !(typeof v === 'object' && v !== null && Object.keys(v).length === 0)));
|
|
64
71
|
}
|
|
72
|
+
/**
|
|
73
|
+
* The least contrast a host's border color needs against the surface to be used as the divider. HawkSearch's
|
|
74
|
+
* `color-border-default` (#f5f7fa) is about 1.07 on white: table rows and outlined cards would have no visible lines.
|
|
75
|
+
*/
|
|
76
|
+
const MIN_DIVIDER_CONTRAST = 1.2;
|
|
77
|
+
/** The host's border color when it shows on `surface`; else undefined (MUI's divider then, which always does). */
|
|
78
|
+
function visibleBorder(border, surface) {
|
|
79
|
+
if (!border)
|
|
80
|
+
return undefined;
|
|
81
|
+
try {
|
|
82
|
+
return getContrastRatio(border, surface) >= MIN_DIVIDER_CONTRAST ? border : undefined;
|
|
83
|
+
}
|
|
84
|
+
catch {
|
|
85
|
+
return border;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
65
88
|
/**
|
|
66
89
|
* The palette from the host's theme tokens (`context.theme.tokens`, the same names as the `--hawk-*` CSS variables):
|
|
67
|
-
* backgrounds, text, borders and the accent color. Missing or unreadable tokens keep Spark's
|
|
90
|
+
* backgrounds, text, borders and the accent color. Missing or unreadable tokens keep Spark's, and so does a border color
|
|
91
|
+
* too faint to see on the host's surface.
|
|
68
92
|
*/
|
|
69
93
|
export function hostPalette(theme) {
|
|
70
94
|
const tokens = theme?.tokens ?? {};
|
|
71
95
|
const accent = color(tokens, 'color-button-accent-background');
|
|
96
|
+
const dark = theme?.mode === 'dark';
|
|
97
|
+
const paper = color(tokens, 'color-background-container');
|
|
72
98
|
return defined({
|
|
73
|
-
mode:
|
|
99
|
+
mode: dark ? 'dark' : 'light',
|
|
74
100
|
primary: accent ? defined({ main: accent, contrastText: color(tokens, 'color-button-accent-text') }) : undefined,
|
|
75
|
-
background: defined({ default: color(tokens, 'color-background'), paper
|
|
101
|
+
background: defined({ default: color(tokens, 'color-background'), paper }),
|
|
76
102
|
text: defined({ primary: color(tokens, 'color-text-default'), secondary: color(tokens, 'color-text-secondary') }),
|
|
77
|
-
divider: color(tokens, 'color-border-default'),
|
|
103
|
+
divider: visibleBorder(color(tokens, 'color-border-default'), paper ?? (dark ? '#121212' : '#ffffff')),
|
|
78
104
|
});
|
|
79
105
|
}
|
|
80
106
|
/**
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAsD,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAsD,MAAM,sBAAsB,CAAC;AAChI,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE7D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE5F;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC3C,UAAU,EAAE;QACR,SAAS,EAAE;YACP,cAAc,EAAE;gBACZ,SAAS,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,8BAA8B,EAAE,MAAM,EAAE,kCAAkC,EAAE,KAAK,EAAE,MAAM,EAAE;aACtI;SACJ;QACD,WAAW,EAAE;YACT,cAAc,EAAE;gBACZ,wBAAwB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,+EAA+E,EAAE;gBAClI,sBAAsB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,+EAA+E,EAAE;gBAChI,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,+EAA+E,EAAE;gBACjI,qBAAqB,EAAE,EAAE,GAAG,EAAE,2CAA2C,EAAE;gBAC3E,mBAAmB,EAAE,EAAE,GAAG,EAAE,2CAA2C,EAAE;gBACzE,oBAAoB,EAAE,EAAE,GAAG,EAAE,2CAA2C,EAAE;aAC7E;SACJ;KACJ;CACJ,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC3C,UAAU,EAAE;QACR,YAAY,EAAE;YACV,cAAc,EAAE;gBACZ,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;gBAC7E,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;oBAClB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;oBACjD,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;oBACnC,UAAU,EAAE,GAAG;iBAClB,CAAC;gBACF,SAAS,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;aACnD;SACJ;QACD,WAAW,EAAE;YACT,cAAc,EAAE;gBACZ,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;oBAClB,mDAAmD,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;oBACxE,0CAA0C,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE;oBACxG,gDAAgD,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;iBACpG,CAAC;aACL;SACJ;KACJ;CACJ,CAAC;AAEF,uGAAuG;AACvG,SAAS,KAAK,CAAC,MAA8B,EAAE,IAAY;IACvD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;IACnC,OAAO,KAAK,IAAI,mDAAmD,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AACxG,CAAC;AAED,uFAAuF;AACvF,SAAS,MAAM,CAAC,MAA8B;IAC1C,MAAM,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChF,OAAO,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AAChD,CAAC;AAED,SAAS,OAAO,CAAmB,KAAQ;IACvC,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAe,CAAC;AAC/K,CAAC;AAED;;;GAGG;AACH,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAEjC,kHAAkH;AAClH,SAAS,aAAa,CAAC,MAA0B,EAAE,OAAe;IAC9D,IAAI,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IAC9B,IAAI,CAAC;QACD,OAAO,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1F,CAAC;IAAC,MAAM,CAAC;QACL,OAAO,MAAM,CAAC;IAClB,CAAC;AACL,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAmC;IAC3D,MAAM,MAAM,GAAG,KAAK,EAAE,MAAM,IAAI,EAAE,CAAC;IACnC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE,gCAAgC,CAAC,CAAC;IAC/D,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,4BAA4B,CAAC,CAAC;IAC1D,OAAO,OAAO,CAAC;QACX,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAC7B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,EAAE,0BAA0B,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;QAChH,UAAU,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,kBAAkB,CAAC,EAAE,KAAK,EAAE,CAAC;QAC1E,IAAI,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,oBAAoB,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,EAAE,sBAAsB,CAAC,EAAE,CAAC;QACjH,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,MAAM,EAAE,sBAAsB,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;KACzG,CAAmB,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,SAA4B,EAAE,GAAG,SAAyB;IACtF,MAAM,IAAI,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;IAClC,qHAAqH;IACrH,MAAM,IAAI,GAAmB,IAAI,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC;IACxH,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC;IAC9C,wGAAwG;IACxG,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,iBAAiB,CAAC;IAC5D,OAAO,WAAW,CACd,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EACjB;QACI,OAAO,EAAE;YACL,GAAG,IAAI;YACP,GAAG,IAAI;YACP,OAAO,EAAE,EAAE,GAAI,IAAI,CAAC,OAAkB,EAAE,GAAI,IAAI,CAAC,OAAkB,EAAE;YACrE,UAAU,EAAE,EAAE,GAAI,IAAI,CAAC,UAAqB,EAAE,GAAI,IAAI,CAAC,UAAqB,EAAE;SAC/D;QACnB,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACrE,EACD,GAAG,SAAS,CACf,CAAC;AACN,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bridgeline-digital/hawk-app-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1-dev.20261021024847",
|
|
4
4
|
"description": "For Bridgeline developers: the Spark look for Hawk Apps: for React + MUI, the theme (following the host's colors and mode), the app provider and shared components; for any app (vanilla, Preact, React, Next), a stylesheet and custom elements.",
|
|
5
5
|
"author": "Bridgeline Digital",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"@fontsource/montserrat": "^5.3.0"
|
|
94
94
|
},
|
|
95
95
|
"peerDependencies": {
|
|
96
|
-
"@bridgeline-digital/hawk-app-bridge": "
|
|
96
|
+
"@bridgeline-digital/hawk-app-bridge": "0.1.1-dev.20261021024847",
|
|
97
97
|
"@emotion/react": "^11.14.0",
|
|
98
98
|
"@emotion/styled": "^11.14.1",
|
|
99
99
|
"@mui/material": "^9.3.1",
|