@multiplatform.one/keycloak-theme 7.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/LICENSE +201 -0
- package/README.md +94 -0
- package/package.json +65 -0
- package/src/SpringboardStyles.tsx +84 -0
- package/src/css.ts +655 -0
- package/src/glyph.ts +109 -0
- package/src/index.ts +47 -0
- package/src/themeName.ts +69 -0
- package/src/tokens.ts +260 -0
- package/types/SpringboardStyles.d.ts +49 -0
- package/types/SpringboardStyles.d.ts.map +1 -0
- package/types/css.d.ts +72 -0
- package/types/css.d.ts.map +1 -0
- package/types/glyph.d.ts +73 -0
- package/types/glyph.d.ts.map +1 -0
- package/types/index.d.ts +22 -0
- package/types/index.d.ts.map +1 -0
- package/types/themeName.d.ts +54 -0
- package/types/themeName.d.ts.map +1 -0
- package/types/tokens.d.ts +245 -0
- package/types/tokens.d.ts.map +1 -0
package/types/glyph.d.ts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THE SPRINGBOARD'S APP GLYPH, TRANSCRIBED FOR KEYCLOAK.
|
|
3
|
+
*
|
|
4
|
+
* ★ PROVENANCE: selfhosted-cloud/shc `packages/springboard-ui/src/glyph.ts`,
|
|
5
|
+
* function for function. See ./tokens.ts for why the values are copied
|
|
6
|
+
* across repositories rather than imported.
|
|
7
|
+
*
|
|
8
|
+
* ★ WHY A LOGIN PAGE WANTS THIS AT ALL. The springboard draws every stack
|
|
9
|
+
* as a rounded square carrying a two-letter monogram over a hue hashed
|
|
10
|
+
* from the app's name, so a user recognises an app by its colour before
|
|
11
|
+
* they read its label. The login page is the surface they land on BEFORE
|
|
12
|
+
* the springboard, and it is per-realm — so seeding the same hash with the
|
|
13
|
+
* realm name puts the estate's own colour on its front door, and the tile
|
|
14
|
+
* a user then sees in the launcher is the same shape they just signed in
|
|
15
|
+
* under. Nothing here is decorative-only: it is the one piece of continuity
|
|
16
|
+
* between the two surfaces that costs no configuration.
|
|
17
|
+
*
|
|
18
|
+
* ★ THE HASH MUST STAY BIT-IDENTICAL TO shc's. Two renderers agreeing on
|
|
19
|
+
* a colour is the entire point, and they agree only because both run
|
|
20
|
+
* FNV-1a 32-bit over the same seed with the same 62%/42% HSL pair.
|
|
21
|
+
* `./glyph.spec.ts` pins concrete seed→hue outputs rather than just
|
|
22
|
+
* asserting determinism, so a "harmless" rewrite of the mixing step fails
|
|
23
|
+
* instead of quietly recolouring one half of the product.
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* FNV-1a 32-bit over the seed string. Stable across platforms (pure
|
|
27
|
+
* integer math), well-distributed enough for hue spacing.
|
|
28
|
+
*/
|
|
29
|
+
export declare function stableHash(seed: string): number;
|
|
30
|
+
/** Deterministic hue (0–359) for a glyph seed. */
|
|
31
|
+
export declare function glyphHue(seed: string): number;
|
|
32
|
+
/**
|
|
33
|
+
* Two-letter monogram: first letters of the first two words when the name
|
|
34
|
+
* has separators (dashes/underscores/spaces/dots), else the first two
|
|
35
|
+
* characters. Uppercased; empty name renders "?".
|
|
36
|
+
*/
|
|
37
|
+
export declare function glyphMonogram(name: string): string;
|
|
38
|
+
export interface GlyphColors {
|
|
39
|
+
/** Tile fill. */
|
|
40
|
+
background: string;
|
|
41
|
+
/** Monogram color. */
|
|
42
|
+
foreground: string;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* HSL pair for the glyph: a saturated mid-dark fill with a near-white
|
|
46
|
+
* monogram — legible in both color schemes without consulting the theme.
|
|
47
|
+
*/
|
|
48
|
+
export declare function glyphColors(seed: string): GlyphColors;
|
|
49
|
+
/** Everything the stylesheet needs to draw one glyph plate. */
|
|
50
|
+
export interface GlyphMark extends GlyphColors {
|
|
51
|
+
/** The two-letter monogram, already uppercased. */
|
|
52
|
+
monogram: string;
|
|
53
|
+
/** The hue the fill was generated from — exposed for tests and tooling. */
|
|
54
|
+
hue: number;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Resolve a realm (or client, or estate) name into the mark its login page
|
|
58
|
+
* should wear.
|
|
59
|
+
*
|
|
60
|
+
* ★ SEED THE HASH WITH THE NAME, LABEL WITH THE DISPLAY NAME. Keycloak
|
|
61
|
+
* realms carry both a `name` (the stable slug in every URL) and a
|
|
62
|
+
* `displayName` (free text an admin retypes at will). The springboard
|
|
63
|
+
* hashes app IDENTITY, not app labels — `glyphSeed()` in shc prefers the
|
|
64
|
+
* deployment's `app_name` over the stack's display name for exactly this
|
|
65
|
+
* reason — so the hue is seeded from the slug and stays put when somebody
|
|
66
|
+
* fixes a capital letter in the display name. The monogram is drawn from
|
|
67
|
+
* whichever string a human would read.
|
|
68
|
+
*/
|
|
69
|
+
export declare function glyphMark(params: {
|
|
70
|
+
name: string;
|
|
71
|
+
displayName?: string;
|
|
72
|
+
}): GlyphMark;
|
|
73
|
+
//# sourceMappingURL=glyph.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../src/glyph.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ/C;AAED,kDAAkD;AAClD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQlD;AAED,MAAM,WAAW,WAAW;IAC1B,iBAAiB;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAMrD;AAED,+DAA+D;AAC/D,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,CASnF"}
|
package/types/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @multiplatform.one/keycloak-theme — the SHC springboard as a Keycloak
|
|
3
|
+
* login skin.
|
|
4
|
+
*
|
|
5
|
+
* The design values are transcribed from the SHC console's springboard
|
|
6
|
+
* package; ./tokens.ts carries the provenance and the reason the copy is
|
|
7
|
+
* deliberate. Nothing here renders a Keycloak page: the skin is one
|
|
8
|
+
* stylesheet, hooked onto the class names and ids keycloakify's own pages
|
|
9
|
+
* already emit, so no flow, form or field is owned by this package.
|
|
10
|
+
*
|
|
11
|
+
* Typical wiring, inside a keycloakify `KcPage`:
|
|
12
|
+
*
|
|
13
|
+
* import { SpringboardStyles, isSpringboardTheme } from "@multiplatform.one/keycloak-theme";
|
|
14
|
+
*
|
|
15
|
+
* {isSpringboardTheme(kcContext) && <SpringboardStyles realm={kcContext.realm} />}
|
|
16
|
+
*/
|
|
17
|
+
export { buildSpringboardCss, type SpringboardCssOptions } from "./css";
|
|
18
|
+
export { glyphColors, glyphHue, glyphMark, glyphMonogram, stableHash, type GlyphColors, type GlyphMark, } from "./glyph";
|
|
19
|
+
export { resolveMark, SpringboardStyles, type SpringboardRealm, type SpringboardStylesProps, } from "./SpringboardStyles";
|
|
20
|
+
export { houseThemeName, isSpringboardTheme, springboardThemeName } from "./themeName";
|
|
21
|
+
export { accent, caption, field, fontFamily, icon, ink, plate, status, trigger, wallpaperColors, wallpaperLayers, } from "./tokens";
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,mBAAmB,EAAE,KAAK,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,aAAa,EACb,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,SAAS,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,GAC5B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACvF,OAAO,EACL,MAAM,EACN,OAAO,EACP,KAAK,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,GAChB,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* WHICH THEME IS THIS PAGE WEARING.
|
|
3
|
+
*
|
|
4
|
+
* ★ ONE BUILD, TWO THEME NAMES. `keycloakify build` accepts an array for
|
|
5
|
+
* `themeName` and writes one `theme/<name>/` tree per entry into the same
|
|
6
|
+
* JAR, from the same bundle. That is what lets the springboard skin ship
|
|
7
|
+
* beside the existing house look instead of replacing it:
|
|
8
|
+
*
|
|
9
|
+
* platform-keycloak the house look — tamagui ramps, light and dark,
|
|
10
|
+
* what every existing realm already points at.
|
|
11
|
+
* shc-springboard this skin — the launcher's wallpaper and plate,
|
|
12
|
+
* one dark surface in both schemes.
|
|
13
|
+
*
|
|
14
|
+
* A realm chooses between them with one field (`loginTheme`), which is a
|
|
15
|
+
* value an operator can change and change back without a redeploy. The
|
|
16
|
+
* alternative — restyling `platform-keycloak` in place — would have made
|
|
17
|
+
* the springboard the front door of every estate and every product realm
|
|
18
|
+
* that already points at it, in the same commit, with no way back short of
|
|
19
|
+
* a revert and an image rebuild.
|
|
20
|
+
*
|
|
21
|
+
* ★ HOW A PAGE KNOWS WHICH ONE IT IS. Keycloak serves a theme's own assets
|
|
22
|
+
* from `/resources/<resourceVersion>/<themeType>/<themeName>` and hands the
|
|
23
|
+
* page that prefix as `url.resourcesPath`. The last segment is therefore
|
|
24
|
+
* the name of the theme Keycloak actually loaded — not a build-time guess,
|
|
25
|
+
* and not something the two JAR entries could disagree about, because it
|
|
26
|
+
* is the path the browser fetched this very bundle from.
|
|
27
|
+
*
|
|
28
|
+
* ★ WHY NOT A BUILD-TIME FLAG. keycloakify's `environmentVariables` and
|
|
29
|
+
* `extraThemeProperties` are properties of the BUILD, not of a theme name,
|
|
30
|
+
* so both trees would receive the same value and neither could tell itself
|
|
31
|
+
* apart. There is no per-name build hook. The served path is the only
|
|
32
|
+
* signal that differs, which makes it the right one rather than merely an
|
|
33
|
+
* available one.
|
|
34
|
+
*/
|
|
35
|
+
/** The theme name this skin is published under. */
|
|
36
|
+
export declare const springboardThemeName = "shc-springboard";
|
|
37
|
+
/** The theme name the house look keeps. */
|
|
38
|
+
export declare const houseThemeName = "platform-keycloak";
|
|
39
|
+
/**
|
|
40
|
+
* True when Keycloak served this page from the springboard theme.
|
|
41
|
+
*
|
|
42
|
+
* Accepts the whole context or just the url block — callers in a page have
|
|
43
|
+
* the first, callers in a story have the second. An absent or unparseable
|
|
44
|
+
* path answers `false`: the skin is the opt-in surface, so the house look
|
|
45
|
+
* is what an unknown answer degrades to.
|
|
46
|
+
*/
|
|
47
|
+
export declare function isSpringboardTheme(kcContext: {
|
|
48
|
+
url?: {
|
|
49
|
+
resourcesPath?: string;
|
|
50
|
+
};
|
|
51
|
+
} | {
|
|
52
|
+
resourcesPath?: string;
|
|
53
|
+
} | undefined): boolean;
|
|
54
|
+
//# sourceMappingURL=themeName.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeName.d.ts","sourceRoot":"","sources":["../src/themeName.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,mDAAmD;AACnD,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD,2CAA2C;AAC3C,eAAO,MAAM,cAAc,sBAAsB,CAAC;AASlD;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE;IAAE,GAAG,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,GACvF,OAAO,CAUT"}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THE SPRINGBOARD'S DESIGN VALUES, TRANSCRIBED FOR KEYCLOAK.
|
|
3
|
+
*
|
|
4
|
+
* ★ PROVENANCE. Every constant below is copied, by value, from the SHC
|
|
5
|
+
* console's springboard package:
|
|
6
|
+
*
|
|
7
|
+
* selfhosted-cloud/shc packages/springboard-ui/src/wallpaper.ts
|
|
8
|
+
* selfhosted-cloud/shc packages/springboard-ui/src/launcherGeometry.ts
|
|
9
|
+
* selfhosted-cloud/shc packages/springboard-ui/src/glyph.ts
|
|
10
|
+
*
|
|
11
|
+
* which are themselves a second copy of `dress()` in that repo's
|
|
12
|
+
* `traefik/plugin/menu_homescreen.go` and `traefik/plugin/menu.go`. So
|
|
13
|
+
* this file is the THIRD writing of the same numbers, and the duplication
|
|
14
|
+
* is deliberate at every hop for the same reason the shc header gives:
|
|
15
|
+
* the launcher is hand-written ES5 interpreted by yaegi inside Traefik and
|
|
16
|
+
* can never import a TypeScript module. This hop adds one more constraint
|
|
17
|
+
* on top of that — a Keycloak login page is served by Quarkus from a JAR
|
|
18
|
+
* baked into an image, in a different repository, at a different release
|
|
19
|
+
* cadence. A cross-repo import would couple the SHC console's release
|
|
20
|
+
* train to Keycloak's image build for the sake of eight colours.
|
|
21
|
+
*
|
|
22
|
+
* ★ WHAT KEEPS THIS HONEST. Nothing automatic, and that is stated rather
|
|
23
|
+
* than hidden. shc's `launcherGeometry.spec.ts` reads the Go payload and
|
|
24
|
+
* fails when a dimension drifts; there is no equivalent tripwire across
|
|
25
|
+
* repositories. `./tokens.spec.ts` therefore pins every value below as a
|
|
26
|
+
* literal, so a change here is a deliberate edit to a failing test and
|
|
27
|
+
* never a silent drift. When the springboard moves, the sequence is:
|
|
28
|
+
* change shc, change this file, change the spec.
|
|
29
|
+
*
|
|
30
|
+
* ★ THE UNITS ARE CSS PIXELS AT K=1 — the launcher's own. `P(n)` in the
|
|
31
|
+
* payload is `Math.round(n * K)` where K undoes a host page's
|
|
32
|
+
* down-scaling; a Keycloak login page is a document of its own and is
|
|
33
|
+
* never injected into a foreign one, so it has no K to apply, exactly as
|
|
34
|
+
* the console does not.
|
|
35
|
+
*/
|
|
36
|
+
/**
|
|
37
|
+
* The wallpaper: two coloured glows over a navy→indigo diagonal.
|
|
38
|
+
*
|
|
39
|
+
* Transcribed from shc `packages/springboard-ui/src/wallpaper.ts`
|
|
40
|
+
* (`WALLPAPER_LAYERS`). Ready to drop straight into `background-image`.
|
|
41
|
+
*/
|
|
42
|
+
export declare const wallpaperLayers: string;
|
|
43
|
+
/**
|
|
44
|
+
* The springboard's flat surface colours.
|
|
45
|
+
*
|
|
46
|
+
* ★ THERE IS NO LIGHT VARIANT, AND THAT IS THE RULING RATHER THAN AN
|
|
47
|
+
* OVERSIGHT. shc's wallpaper.ts spends a paragraph on it: the first cut
|
|
48
|
+
* painted the wallpaper from the theme ramp so it would flip with dark
|
|
49
|
+
* mode, and in the light theme that resolved to a near-white page with no
|
|
50
|
+
* wallpaper and no depth. "The springboard is not a themed page with icons
|
|
51
|
+
* on it; it is a HOME SCREEN, and a home screen has one dark wallpaper in
|
|
52
|
+
* both modes, exactly as iPadOS and the launcher do."
|
|
53
|
+
*
|
|
54
|
+
* A Keycloak login page is the same kind of surface — it is the estate's
|
|
55
|
+
* front door, not a page inside an app — so the sheet built from these
|
|
56
|
+
* values overrides BOTH colour schemes and never consults
|
|
57
|
+
* `prefers-color-scheme`.
|
|
58
|
+
*/
|
|
59
|
+
export declare const wallpaperColors: {
|
|
60
|
+
/** Flat base beneath the gradient stack. `WALLPAPER_BASE`. */
|
|
61
|
+
readonly base: "#0b1220";
|
|
62
|
+
/** Indigo glow, top-right. `WALLPAPER_GLOW_A`. */
|
|
63
|
+
readonly glowA: "rgba(99,102,241,0.26)";
|
|
64
|
+
/** Sky glow, bottom-left. `WALLPAPER_GLOW_B`. */
|
|
65
|
+
readonly glowB: "rgba(56,189,248,0.24)";
|
|
66
|
+
/** Text drawn directly on the wallpaper. `ON_WALLPAPER_TEXT`. */
|
|
67
|
+
readonly text: "#ffffff";
|
|
68
|
+
/** The halo that keeps that text legible over either glow. `ON_WALLPAPER_SHADOW`. */
|
|
69
|
+
readonly textShadow: "#000000";
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* The dock's glass shelf — the springboard's PLATE material, and the one
|
|
73
|
+
* the login card is built from.
|
|
74
|
+
*
|
|
75
|
+
* ★ WHY THE DOCK AND NOT THE SPOTLIGHT PANEL. The console has two
|
|
76
|
+
* surfaces that float above the wallpaper: the dock shelf, whose colours
|
|
77
|
+
* are these constants, and the Spotlight dialog, which is fully themed
|
|
78
|
+
* from the tamagui ramp (shc wallpaper.ts: "Chrome that sits on PANELS
|
|
79
|
+
* above the wallpaper … stays fully themed"). A login page cannot take
|
|
80
|
+
* the second one — it has no ThemeProvider ramp of its own that is
|
|
81
|
+
* guaranteed to resolve dark, and a light Spotlight panel on a dark
|
|
82
|
+
* wallpaper is the exact defect that ruling was written against. The dock
|
|
83
|
+
* shelf is the springboard's one plate with fixed, wallpaper-aware
|
|
84
|
+
* colours, so it is the one a login card can be cut from.
|
|
85
|
+
*/
|
|
86
|
+
export declare const plate: {
|
|
87
|
+
/** `DOCK_SHELF_FILL` — the translucent slab. */
|
|
88
|
+
readonly fill: "rgba(16,20,32,0.48)";
|
|
89
|
+
/** `DOCK_SHELF_HIGHLIGHT` — the 1px inner highlight along the top edge. */
|
|
90
|
+
readonly highlight: "rgba(255,255,255,0.27)";
|
|
91
|
+
/** `launcherDock.radius`. */
|
|
92
|
+
readonly radius: 26;
|
|
93
|
+
/** `launcherDock.paddingVertical` / `.paddingHorizontal`. */
|
|
94
|
+
readonly paddingVertical: 12;
|
|
95
|
+
readonly paddingHorizontal: 16;
|
|
96
|
+
/** `launcherDock.gap`. */
|
|
97
|
+
readonly gap: 18;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* One app icon — the launcher's `face()` squircle.
|
|
101
|
+
*
|
|
102
|
+
* ★ ONE SIZE, EVERY VIEWPORT. Owner ruling 2026-08-19, quoted in shc's
|
|
103
|
+
* launcherGeometry.ts: "the scale and sizing on floating menu seems more
|
|
104
|
+
* correct". The console had a responsive 64/76/84 ladder and deleted it;
|
|
105
|
+
* a home-screen icon is the same size on a phone and a desktop. The login
|
|
106
|
+
* page draws exactly one of these, so the ruling reaches it for free.
|
|
107
|
+
*/
|
|
108
|
+
export declare const icon: {
|
|
109
|
+
/** `launcherIcon.size` — applied to the squircle AND the art inside it. */
|
|
110
|
+
readonly size: 60;
|
|
111
|
+
/** `launcherIcon.radius` — 0.2333 of the box, not tamagui's 0.22. */
|
|
112
|
+
readonly radius: 14;
|
|
113
|
+
/** `launcherIcon.shadowOffsetY` / `.shadowBlur` — `0 3px 8px #0006`. */
|
|
114
|
+
readonly shadowOffsetY: 3;
|
|
115
|
+
readonly shadowBlur: 8;
|
|
116
|
+
readonly shadowColor: "#0006";
|
|
117
|
+
};
|
|
118
|
+
/**
|
|
119
|
+
* The caption under an icon.
|
|
120
|
+
*
|
|
121
|
+
* ★ THE LINE BOX IS LOAD-BEARING, NOT TIDY. shc's launcherGeometry.ts
|
|
122
|
+
* carries the reading: the owner saw "hulv" and "openreplav" on his phone
|
|
123
|
+
* because a caption box with no line-height of its own inherited one from
|
|
124
|
+
* the host document and clipped the descenders off `y`. An 11px face in a
|
|
125
|
+
* 15px line box carries the descender of every Latin glyph. A Keycloak
|
|
126
|
+
* page has no host document to inherit from either, but it renders the
|
|
127
|
+
* same names at the same size and gets the same box for the same reason.
|
|
128
|
+
*/
|
|
129
|
+
export declare const caption: {
|
|
130
|
+
/** `launcherCaption.fontSize`. */
|
|
131
|
+
readonly fontSize: 11;
|
|
132
|
+
/** `launcherCaption.lineHeight`. */
|
|
133
|
+
readonly lineHeight: 15;
|
|
134
|
+
/** `launcherCaption.marginTop` — squircle to label. */
|
|
135
|
+
readonly marginTop: 6;
|
|
136
|
+
/** StackTile.tsx: `textShadowOffset={{ width: 0, height: 1 }}`, radius 3. */
|
|
137
|
+
readonly shadowOffsetY: 1;
|
|
138
|
+
readonly shadowBlur: 3;
|
|
139
|
+
/** StackTile.tsx: `fontWeight="600"`. */
|
|
140
|
+
readonly fontWeight: 600;
|
|
141
|
+
};
|
|
142
|
+
/**
|
|
143
|
+
* The floating trigger — `trig()` in shc's `traefik/plugin/menu.go`, and
|
|
144
|
+
* the launcher's LARGER elevation.
|
|
145
|
+
*
|
|
146
|
+
* ★ WHAT THIS IS FOR HERE. The login card is plate-sized, not icon-sized,
|
|
147
|
+
* and `icon.shadow*` (`0 3px 8px`) under a 400px card reads as no shadow
|
|
148
|
+
* at all. The trigger is the only other elevation the launcher declares,
|
|
149
|
+
* it is the one the owner has quoted a number for out loud ("a 52px
|
|
150
|
+
* control becomes a 20px one"), and borrowing its shadow keeps the card
|
|
151
|
+
* inside the springboard's two-step elevation scale instead of inventing
|
|
152
|
+
* a third.
|
|
153
|
+
*/
|
|
154
|
+
export declare const trigger: {
|
|
155
|
+
readonly size: 52;
|
|
156
|
+
readonly radius: 16;
|
|
157
|
+
readonly inset: 16;
|
|
158
|
+
readonly shadowOffsetY: 6;
|
|
159
|
+
readonly shadowBlur: 20;
|
|
160
|
+
};
|
|
161
|
+
/**
|
|
162
|
+
* The accent pair, taken from the wallpaper's own two glows.
|
|
163
|
+
*
|
|
164
|
+
* ★ THESE ARE DERIVED, NOT TRANSCRIBED, and the derivation is one step:
|
|
165
|
+
* the opaque form of `wallpaperColors.glowA` / `.glowB`, i.e. the same
|
|
166
|
+
* `rgb()` triples with the alpha dropped. The springboard itself never
|
|
167
|
+
* needs an opaque accent — its only saturated fills are per-app generated
|
|
168
|
+
* hues (see ./glyph.ts) and fixed system-app hues from the tamagui ramp,
|
|
169
|
+
* and a login page has neither an app to hash nor a ramp to resolve. It
|
|
170
|
+
* does need one call-to-action colour, and taking it from the wallpaper
|
|
171
|
+
* is the only choice that cannot drift away from the wallpaper.
|
|
172
|
+
*
|
|
173
|
+
* rgba(99,102,241,.26) -> #6366f1 (indigo — the primary CTA)
|
|
174
|
+
* rgba(56,189,248,.24) -> #38bdf8 (sky — links and focus)
|
|
175
|
+
*/
|
|
176
|
+
export declare const accent: {
|
|
177
|
+
/** Opaque `wallpaperColors.glowA`. Primary buttons. */
|
|
178
|
+
readonly indigo: "#6366f1";
|
|
179
|
+
/** One step down for :hover — the same hue, 8% darker. */
|
|
180
|
+
readonly indigoHover: "#5457dd";
|
|
181
|
+
/** One step further for :active. */
|
|
182
|
+
readonly indigoPress: "#484bc4";
|
|
183
|
+
/** Opaque `wallpaperColors.glowB`. Links and the focus ring. */
|
|
184
|
+
readonly sky: "#38bdf8";
|
|
185
|
+
};
|
|
186
|
+
/**
|
|
187
|
+
* Ink levels for text ON the plate.
|
|
188
|
+
*
|
|
189
|
+
* ★ NOT TRANSCRIBED — the springboard has no equivalent, because it has
|
|
190
|
+
* no dense text on a plate. Its captions sit straight on the wallpaper
|
|
191
|
+
* (`wallpaperColors.text` plus a halo) and its panels are themed. A login
|
|
192
|
+
* form is mostly labels, helper text and error text, which the springboard
|
|
193
|
+
* simply never renders. These are the wallpaper's white stepped down by
|
|
194
|
+
* opacity so that every level stays the SAME colour as the caption and can
|
|
195
|
+
* only differ in weight — which is the property the springboard does have
|
|
196
|
+
* and the one worth preserving.
|
|
197
|
+
*/
|
|
198
|
+
export declare const ink: {
|
|
199
|
+
/** Headings and input values. `wallpaperColors.text`. */
|
|
200
|
+
readonly primary: "#ffffff";
|
|
201
|
+
/** Labels. */
|
|
202
|
+
readonly secondary: "rgba(255,255,255,0.82)";
|
|
203
|
+
/** Helper text, captions, the muted half of a row. */
|
|
204
|
+
readonly muted: "rgba(255,255,255,0.62)";
|
|
205
|
+
/** Placeholders and disabled labels. */
|
|
206
|
+
readonly faint: "rgba(255,255,255,0.42)";
|
|
207
|
+
};
|
|
208
|
+
/**
|
|
209
|
+
* Field chrome on the plate — hairlines cut from the plate's own
|
|
210
|
+
* highlight so a field reads as an inset in the slab rather than a
|
|
211
|
+
* borrowed control.
|
|
212
|
+
*/
|
|
213
|
+
export declare const field: {
|
|
214
|
+
/** Input fill: the plate darkened, so a field sits INTO the slab. */
|
|
215
|
+
readonly background: "rgba(8,11,20,0.55)";
|
|
216
|
+
/** Resting hairline — `plate.highlight` at half strength. */
|
|
217
|
+
readonly border: "rgba(255,255,255,0.14)";
|
|
218
|
+
readonly borderHover: "rgba(255,255,255,0.24)";
|
|
219
|
+
readonly borderFocus: "#38bdf8";
|
|
220
|
+
/** Divider rules (the social-provider separator). */
|
|
221
|
+
readonly divider: "rgba(255,255,255,0.12)";
|
|
222
|
+
/** Secondary/ghost button fill. */
|
|
223
|
+
readonly ghost: "rgba(255,255,255,0.08)";
|
|
224
|
+
readonly ghostHover: "rgba(255,255,255,0.14)";
|
|
225
|
+
};
|
|
226
|
+
/** Feedback hues for the alert rail. Tailwind-family, matched to the glows. */
|
|
227
|
+
export declare const status: {
|
|
228
|
+
readonly error: "#f87171";
|
|
229
|
+
readonly warning: "#fbbf24";
|
|
230
|
+
readonly success: "#34d399";
|
|
231
|
+
readonly info: "#38bdf8";
|
|
232
|
+
};
|
|
233
|
+
/**
|
|
234
|
+
* The default body face.
|
|
235
|
+
*
|
|
236
|
+
* ★ NO WEBFONT, DELIBERATELY. The springboard renders in Inter because
|
|
237
|
+
* tamagui's `@tamagui/font-inter` is already in the console bundle. A
|
|
238
|
+
* Keycloak login page is the front door of an estate that may have no
|
|
239
|
+
* egress at all, and a `@font-face` pointing at a CDN is a render-blocking
|
|
240
|
+
* request to a host an air-gapped install cannot reach. Inter first for
|
|
241
|
+
* the machines that have it, the platform UI stack behind it for the ones
|
|
242
|
+
* that do not.
|
|
243
|
+
*/
|
|
244
|
+
export declare const fontFamily = "Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
|
|
245
|
+
//# sourceMappingURL=tokens.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAIhB,CAAC;AAEb;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe;IAC1B,8DAA8D;;IAE9D,kDAAkD;;IAElD,iDAAiD;;IAEjD,iEAAiE;;IAEjE,qFAAqF;;CAE7E,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;IAChB,gDAAgD;;IAEhD,2EAA2E;;IAE3E,6BAA6B;;IAE7B,6DAA6D;;;IAG7D,0BAA0B;;CAElB,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI;IACf,2EAA2E;;IAE3E,qEAAqE;;IAErE,wEAAwE;;;;CAIhE,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;IAClB,kCAAkC;;IAElC,oCAAoC;;IAEpC,uDAAuD;;IAEvD,6EAA6E;;;IAG7E,yCAAyC;;CAEjC,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM;IACjB,uDAAuD;;IAEvD,0DAA0D;;IAE1D,oCAAoC;;IAEpC,gEAAgE;;CAExD,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG;IACd,yDAAyD;;IAEzD,cAAc;;IAEd,sDAAsD;;IAEtD,wCAAwC;;CAEhC,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,KAAK;IAChB,qEAAqE;;IAErE,6DAA6D;;;;IAI7D,qDAAqD;;IAErD,mCAAmC;;;CAG3B,CAAC;AAEX,+EAA+E;AAC/E,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,qHACyF,CAAC"}
|