@oxyhq/bloom 0.40.0 → 0.42.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/lib/commonjs/theme/BloomThemeProvider.js +18 -7
- package/lib/commonjs/theme/BloomThemeProvider.js.map +1 -1
- package/lib/commonjs/theme/apply-dark-class.js +2 -2
- package/lib/commonjs/theme/apply-dark-class.js.map +1 -1
- package/lib/commonjs/theme/build-theme-from-seed.js +17 -5
- package/lib/commonjs/theme/build-theme-from-seed.js.map +1 -1
- package/lib/commonjs/theme/build-theme.js +9 -6
- package/lib/commonjs/theme/build-theme.js.map +1 -1
- package/lib/commonjs/theme/color-engine/index.js +8 -1
- package/lib/commonjs/theme/color-engine/index.js.map +1 -1
- package/lib/commonjs/theme/color-engine/scheme-variants.js +62 -15
- package/lib/commonjs/theme/color-engine/scheme-variants.js.map +1 -1
- package/lib/commonjs/theme/color-engine/seed-from-image.js +11 -1
- package/lib/commonjs/theme/color-engine/seed-from-image.js.map +1 -1
- package/lib/commonjs/theme/color-presets.js +13 -13
- package/lib/commonjs/theme/color-presets.js.map +1 -1
- package/lib/commonjs/theme/color-scope/seed-scope.js +4 -1
- package/lib/commonjs/theme/color-scope/seed-scope.js.map +1 -1
- package/lib/commonjs/theme/color-scope/style-builder.js +2 -2
- package/lib/commonjs/theme/color-scope/style-builder.js.map +1 -1
- package/lib/commonjs/theme/index.js.map +1 -1
- package/lib/commonjs/theme/native-root-vars.js +1 -1
- package/lib/commonjs/theme/native-root-vars.js.map +1 -1
- package/lib/commonjs/theme/native-root-vars.native.js +2 -2
- package/lib/commonjs/theme/native-root-vars.native.js.map +1 -1
- package/lib/commonjs/theme/native-root-vars.web.js +1 -1
- package/lib/commonjs/theme/native-root-vars.web.js.map +1 -1
- package/lib/commonjs/theme/preset-vars.js +16 -2
- package/lib/commonjs/theme/preset-vars.js.map +1 -1
- package/lib/commonjs/theme/token-registry.js +2 -2
- package/lib/commonjs/theme/token-registry.js.map +1 -1
- package/lib/module/theme/BloomThemeProvider.js +18 -7
- package/lib/module/theme/BloomThemeProvider.js.map +1 -1
- package/lib/module/theme/apply-dark-class.js +2 -2
- package/lib/module/theme/apply-dark-class.js.map +1 -1
- package/lib/module/theme/build-theme-from-seed.js +18 -5
- package/lib/module/theme/build-theme-from-seed.js.map +1 -1
- package/lib/module/theme/build-theme.js +9 -6
- package/lib/module/theme/build-theme.js.map +1 -1
- package/lib/module/theme/color-engine/index.js +8 -1
- package/lib/module/theme/color-engine/index.js.map +1 -1
- package/lib/module/theme/color-engine/scheme-variants.js +62 -15
- package/lib/module/theme/color-engine/scheme-variants.js.map +1 -1
- package/lib/module/theme/color-engine/seed-from-image.js +11 -1
- package/lib/module/theme/color-engine/seed-from-image.js.map +1 -1
- package/lib/module/theme/color-presets.js +13 -13
- package/lib/module/theme/color-presets.js.map +1 -1
- package/lib/module/theme/color-scope/seed-scope.js +4 -1
- package/lib/module/theme/color-scope/seed-scope.js.map +1 -1
- package/lib/module/theme/color-scope/style-builder.js +2 -2
- package/lib/module/theme/color-scope/style-builder.js.map +1 -1
- package/lib/module/theme/index.js.map +1 -1
- package/lib/module/theme/native-root-vars.js +1 -1
- package/lib/module/theme/native-root-vars.js.map +1 -1
- package/lib/module/theme/native-root-vars.native.js +2 -2
- package/lib/module/theme/native-root-vars.native.js.map +1 -1
- package/lib/module/theme/native-root-vars.web.js +1 -1
- package/lib/module/theme/native-root-vars.web.js.map +1 -1
- package/lib/module/theme/preset-vars.js +17 -2
- package/lib/module/theme/preset-vars.js.map +1 -1
- package/lib/module/theme/token-registry.js +2 -2
- package/lib/module/theme/token-registry.js.map +1 -1
- package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts +15 -1
- package/lib/typescript/commonjs/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/apply-dark-class.d.ts +2 -1
- package/lib/typescript/commonjs/theme/apply-dark-class.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/build-theme-from-seed.d.ts +13 -2
- package/lib/typescript/commonjs/theme/build-theme-from-seed.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/build-theme.d.ts +2 -1
- package/lib/typescript/commonjs/theme/build-theme.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-engine/index.d.ts +17 -1
- package/lib/typescript/commonjs/theme/color-engine/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-engine/scheme-variants.d.ts +34 -7
- package/lib/typescript/commonjs/theme/color-engine/scheme-variants.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-engine/seed-from-image.d.ts +11 -1
- package/lib/typescript/commonjs/theme/color-engine/seed-from-image.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-presets.d.ts +14 -0
- package/lib/typescript/commonjs/theme/color-presets.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-scope/seed-scope.d.ts +15 -2
- package/lib/typescript/commonjs/theme/color-scope/seed-scope.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts +2 -1
- package/lib/typescript/commonjs/theme/color-scope/style-builder.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/index.d.ts +3 -1
- package/lib/typescript/commonjs/theme/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/native-root-vars.d.ts +2 -1
- package/lib/typescript/commonjs/theme/native-root-vars.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/native-root-vars.native.d.ts +2 -1
- package/lib/typescript/commonjs/theme/native-root-vars.native.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/native-root-vars.web.d.ts +2 -1
- package/lib/typescript/commonjs/theme/native-root-vars.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/preset-vars.d.ts +12 -1
- package/lib/typescript/commonjs/theme/preset-vars.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/token-registry.d.ts +2 -1
- package/lib/typescript/commonjs/theme/token-registry.d.ts.map +1 -1
- package/lib/typescript/module/theme/BloomThemeProvider.d.ts +15 -1
- package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map +1 -1
- package/lib/typescript/module/theme/apply-dark-class.d.ts +2 -1
- package/lib/typescript/module/theme/apply-dark-class.d.ts.map +1 -1
- package/lib/typescript/module/theme/build-theme-from-seed.d.ts +13 -2
- package/lib/typescript/module/theme/build-theme-from-seed.d.ts.map +1 -1
- package/lib/typescript/module/theme/build-theme.d.ts +2 -1
- package/lib/typescript/module/theme/build-theme.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-engine/index.d.ts +17 -1
- package/lib/typescript/module/theme/color-engine/index.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-engine/scheme-variants.d.ts +34 -7
- package/lib/typescript/module/theme/color-engine/scheme-variants.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-engine/seed-from-image.d.ts +11 -1
- package/lib/typescript/module/theme/color-engine/seed-from-image.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-presets.d.ts +14 -0
- package/lib/typescript/module/theme/color-presets.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-scope/seed-scope.d.ts +15 -2
- package/lib/typescript/module/theme/color-scope/seed-scope.d.ts.map +1 -1
- package/lib/typescript/module/theme/color-scope/style-builder.d.ts +2 -1
- package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map +1 -1
- package/lib/typescript/module/theme/index.d.ts +3 -1
- package/lib/typescript/module/theme/index.d.ts.map +1 -1
- package/lib/typescript/module/theme/native-root-vars.d.ts +2 -1
- package/lib/typescript/module/theme/native-root-vars.d.ts.map +1 -1
- package/lib/typescript/module/theme/native-root-vars.native.d.ts +2 -1
- package/lib/typescript/module/theme/native-root-vars.native.d.ts.map +1 -1
- package/lib/typescript/module/theme/native-root-vars.web.d.ts +2 -1
- package/lib/typescript/module/theme/native-root-vars.web.d.ts.map +1 -1
- package/lib/typescript/module/theme/preset-vars.d.ts +12 -1
- package/lib/typescript/module/theme/preset-vars.d.ts.map +1 -1
- package/lib/typescript/module/theme/token-registry.d.ts +2 -1
- package/lib/typescript/module/theme/token-registry.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/theme.test.ts +3 -0
- package/src/theme/BloomThemeProvider.tsx +38 -8
- package/src/theme/__tests__/__fixtures__/golden-resolved-tokens.json +74 -74
- package/src/theme/__tests__/__snapshots__/visual-gallery.test.tsx.snap +68 -68
- package/src/theme/__tests__/explicit-accents.test.ts +129 -0
- package/src/theme/apply-dark-class.ts +7 -2
- package/src/theme/build-theme-from-seed.ts +25 -2
- package/src/theme/build-theme.ts +9 -3
- package/src/theme/color-engine/index.ts +27 -1
- package/src/theme/color-engine/scheme-variants.ts +131 -24
- package/src/theme/color-engine/seed-from-image.ts +11 -1
- package/src/theme/color-presets.ts +27 -13
- package/src/theme/color-scope/seed-scope.ts +18 -2
- package/src/theme/color-scope/style-builder.ts +3 -1
- package/src/theme/index.ts +3 -1
- package/src/theme/native-root-vars.native.ts +7 -2
- package/src/theme/native-root-vars.ts +6 -1
- package/src/theme/native-root-vars.web.ts +6 -1
- package/src/theme/preset-vars.ts +19 -0
- package/src/theme/token-registry.ts +3 -2
|
@@ -11,7 +11,7 @@ export { Hct } from './hct';
|
|
|
11
11
|
export { TonalPalette } from './tonal-palette';
|
|
12
12
|
export { DynamicScheme } from './dynamic-scheme';
|
|
13
13
|
export { buildScheme, schemeVibrant, schemeExpressive, schemeTonalSpot, schemeNeutral } from './scheme-variants';
|
|
14
|
-
export type { SchemeVariant } from './scheme-variants';
|
|
14
|
+
export type { SchemeVariant, AccentSources } from './scheme-variants';
|
|
15
15
|
export { Roles } from './color-roles';
|
|
16
16
|
export type { RoleName } from './color-roles';
|
|
17
17
|
export { ColorRole } from './color-role';
|
|
@@ -35,10 +35,26 @@ export interface GenerateOptions {
|
|
|
35
35
|
isDark?: boolean;
|
|
36
36
|
/** −1 (low) … 0 (normal) … 1 (high). */
|
|
37
37
|
contrastLevel?: number;
|
|
38
|
+
/**
|
|
39
|
+
* Optional explicit secondary-accent seed, `#rrggbb`. When set, the secondary
|
|
40
|
+
* palette is pinned to THIS colour's hue + chroma (M3 role tones still apply)
|
|
41
|
+
* instead of the variant's derived hue-rotation of the primary seed. Omit for
|
|
42
|
+
* the current derived behaviour.
|
|
43
|
+
*/
|
|
44
|
+
secondarySeed?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Optional explicit tertiary-accent seed, `#rrggbb`. Same semantics as
|
|
47
|
+
* {@link GenerateOptions.secondarySeed} for the tertiary palette.
|
|
48
|
+
*/
|
|
49
|
+
tertiarySeed?: string;
|
|
38
50
|
}
|
|
39
51
|
/**
|
|
40
52
|
* Generate the full role set from ANY seed colour — the dynamic-theming entry
|
|
41
53
|
* point. Presets are just fixed seeds; a user-picked colour works identically.
|
|
54
|
+
*
|
|
55
|
+
* `secondarySeed` / `tertiarySeed` optionally PIN those accent families to real
|
|
56
|
+
* brand colours (e.g. a blue-primary brand with a yellow secondary); omitted, the
|
|
57
|
+
* accents are derived as the variant's hue-rotations — byte-identical to before.
|
|
42
58
|
*/
|
|
43
59
|
export declare function generateRoleColors(opts: GenerateOptions): RoleColors;
|
|
44
60
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACjH,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACjH,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGtF,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEpE,sEAAsE;AACtE,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,uCAAuC;AACvC,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAKhD;AAED,yDAAyD;AACzD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,eAAe,GAAG,UAAU,CAuBpE"}
|
|
@@ -9,15 +9,42 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import { DynamicScheme } from './dynamic-scheme';
|
|
11
11
|
import type { Hct } from './hct';
|
|
12
|
-
export type SchemeVariant = 'vibrant' | 'expressive' | 'tonalSpot' | 'neutral';
|
|
12
|
+
export type SchemeVariant = 'vivid' | 'vibrant' | 'expressive' | 'tonalSpot' | 'neutral';
|
|
13
|
+
/**
|
|
14
|
+
* Optional explicit accent seeds for a scheme. When a source HCT is supplied, its
|
|
15
|
+
* palette is built from that colour itself (keeping the brand hue + chroma) instead
|
|
16
|
+
* of the derived hue-rotation — so a brand with a distinct secondary/tertiary accent
|
|
17
|
+
* (e.g. blue primary + yellow secondary) can PIN its real accent family. The M3 role
|
|
18
|
+
* tones still apply on top (a pinned yellow yields a yellow-hued secondary family:
|
|
19
|
+
* light container, dark on-colour) — that is correct M3 behaviour.
|
|
20
|
+
*/
|
|
21
|
+
export interface AccentSources {
|
|
22
|
+
secondarySource?: Hct;
|
|
23
|
+
tertiarySource?: Hct;
|
|
24
|
+
}
|
|
13
25
|
/** Maxed-out colourfulness at each position of the primary palette. */
|
|
14
|
-
export declare function schemeVibrant(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
|
|
26
|
+
export declare function schemeVibrant(source: Hct, isDark: boolean, contrastLevel: number, accents?: AccentSources): DynamicScheme;
|
|
15
27
|
/** Playful, intentionally detached from the seed hue (primary rotated 240°). */
|
|
16
|
-
|
|
28
|
+
/**
|
|
29
|
+
* Bloom's own brand-vivid scheme. Same vibrant base (max-chroma primary) but the
|
|
30
|
+
* secondary and tertiary accents keep MUCH more chroma than canonical M3 (which
|
|
31
|
+
* intentionally desaturates supporting accents). Neutrals stay low-chroma so
|
|
32
|
+
* surfaces read as clean tinted light/dark. This is what the presets use — the
|
|
33
|
+
* old hand-authored palette felt more vivid than pure M3, and this restores that
|
|
34
|
+
* across the whole primary/secondary/tertiary trio.
|
|
35
|
+
*/
|
|
36
|
+
export declare function schemeVivid(source: Hct, isDark: boolean, contrastLevel: number, accents?: AccentSources): DynamicScheme;
|
|
37
|
+
export declare function schemeExpressive(source: Hct, isDark: boolean, contrastLevel: number, accents?: AccentSources): DynamicScheme;
|
|
17
38
|
/** The Material You default — a calm, balanced treatment of the seed. */
|
|
18
|
-
export declare function schemeTonalSpot(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
|
|
39
|
+
export declare function schemeTonalSpot(source: Hct, isDark: boolean, contrastLevel: number, accents?: AccentSources): DynamicScheme;
|
|
19
40
|
/** Near-greyscale — the seed hue is present only as a whisper. */
|
|
20
|
-
export declare function schemeNeutral(source: Hct, isDark: boolean, contrastLevel: number): DynamicScheme;
|
|
21
|
-
/**
|
|
22
|
-
|
|
41
|
+
export declare function schemeNeutral(source: Hct, isDark: boolean, contrastLevel: number, accents?: AccentSources): DynamicScheme;
|
|
42
|
+
/**
|
|
43
|
+
* Build a scheme by variant name.
|
|
44
|
+
*
|
|
45
|
+
* `accents` optionally pins the secondary and/or tertiary palette to an explicit
|
|
46
|
+
* brand colour (see {@link AccentSources}); omitted accents keep the variant's
|
|
47
|
+
* derived hue-rotation, so existing callers get byte-identical output.
|
|
48
|
+
*/
|
|
49
|
+
export declare function buildScheme(variant: SchemeVariant, source: Hct, isDark: boolean, contrastLevel?: number, accents?: AccentSources): DynamicScheme;
|
|
23
50
|
//# sourceMappingURL=scheme-variants.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scheme-variants.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/scheme-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"scheme-variants.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/scheme-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;AAEzF;;;;;;;GAOG;AACH,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB;AAoBD,uEAAuE;AACvE,wBAAgB,aAAa,CAC3B,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAsBf;AAED,gFAAgF;AAChF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAsBf;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAsBf;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAC7B,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAgBf;AAED,kEAAkE;AAClE,wBAAgB,aAAa,CAC3B,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,EAAE,MAAM,EACrB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAgBf;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,OAAO,EACf,aAAa,SAAI,EACjB,OAAO,GAAE,aAAkB,GAC1B,aAAa,CAEf"}
|
|
@@ -6,7 +6,17 @@ import { type ScoreOptions } from './score';
|
|
|
6
6
|
* same result.
|
|
7
7
|
*/
|
|
8
8
|
export declare function quantizeImage(pixels: number[], maxColors?: number): Map<number, number>;
|
|
9
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* Ranked seed candidates (best first) extracted from an image's pixels (ARGB).
|
|
11
|
+
*
|
|
12
|
+
* The top result (`seeds[0]`) is the primary seed for `generateRoleColors({ seed })`.
|
|
13
|
+
* To derive a richer, brand-accurate theme from artwork, a caller can additionally
|
|
14
|
+
* pin distinct accents from the ranked list: pass `hexFromArgb(seeds[1])` as
|
|
15
|
+
* `secondarySeed` and `hexFromArgb(seeds[2])` as `tertiarySeed` to
|
|
16
|
+
* `generateRoleColors` / `buildSeedScopeVars` / `buildThemeFromSeed` so the
|
|
17
|
+
* secondary and tertiary families reflect the artwork's real supporting colours
|
|
18
|
+
* instead of hue-rotations of the primary.
|
|
19
|
+
*/
|
|
10
20
|
export declare function seedsFromImagePixels(pixels: number[], options?: ScoreOptions): number[];
|
|
11
21
|
/** The single best seed colour from an image, as `#rrggbb`. */
|
|
12
22
|
export declare function seedHexFromImagePixels(pixels: number[]): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seed-from-image.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/seed-from-image.ts"],"names":[],"mappings":"AAcA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,SAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CA6BpF;AAED
|
|
1
|
+
{"version":3,"file":"seed-from-image.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-engine/seed-from-image.ts"],"names":[],"mappings":"AAcA,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,SAAM,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CA6BpF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,CAEvF;AAED,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAI/D"}
|
|
@@ -17,6 +17,20 @@ export interface AppColorPreset {
|
|
|
17
17
|
hex: string;
|
|
18
18
|
/** The tonal scheme variant the engine derives roles with. */
|
|
19
19
|
variant: SchemeVariant;
|
|
20
|
+
/**
|
|
21
|
+
* Optional explicit secondary-accent seed, `#rrggbb`. When set, the secondary
|
|
22
|
+
* palette is PINNED to this brand colour (hue + chroma preserved; M3 role tones
|
|
23
|
+
* still apply) instead of the derived hue-rotation of {@link AppColorPreset.hex}.
|
|
24
|
+
* Bloom's built-in presets do NOT set this, so their generated output is
|
|
25
|
+
* unchanged; a consumer brand with a distinct accent (blue primary + yellow
|
|
26
|
+
* secondary) sets it to pin its real accent family.
|
|
27
|
+
*/
|
|
28
|
+
secondaryHex?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Optional explicit tertiary-accent seed, `#rrggbb`. Same semantics as
|
|
31
|
+
* {@link AppColorPreset.secondaryHex} for the tertiary palette.
|
|
32
|
+
*/
|
|
33
|
+
tertiaryHex?: string;
|
|
20
34
|
}
|
|
21
35
|
/**
|
|
22
36
|
* Historically each preset carried a full light/dark map of raw HSL triples.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,CAAC;AAEf;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,kFAAkF;IAClF,GAAG,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,OAAO,EAAE,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../../../src/theme/color-presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,QAAQ,GACR,MAAM,GACN,KAAK,GACL,UAAU,CAAC;AAEf;;;;;;;;;;GAUG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,YAAY,CAAC;IACnB,kFAAkF;IAClF,GAAG,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,OAAO,EAAE,aAAa,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,eAAe,EAAE,SAAS,YAAY,EAAsH,CAAC;AAE1K,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,EAAE,SAAS,YAAY,EAAwB,CAAC;AAEhF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAczD,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAE3D;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,cAAc,CAclE,CAAC"}
|
|
@@ -20,12 +20,25 @@ export interface SeedScopeOptions {
|
|
|
20
20
|
seed: string;
|
|
21
21
|
mode: 'light' | 'dark';
|
|
22
22
|
/**
|
|
23
|
-
* The tonal scheme variant. Defaults to `'
|
|
24
|
-
* named Bloom preset uses, so a preset's seed reproduces that preset exactly
|
|
23
|
+
* The tonal scheme variant. Defaults to `'vivid'` — the same variant every
|
|
24
|
+
* named Bloom preset uses, so a preset's seed reproduces that preset exactly
|
|
25
|
+
* (and an artwork-extracted seed gets the same brand-vivid feel as the app).
|
|
25
26
|
*/
|
|
26
27
|
variant?: SchemeVariant;
|
|
27
28
|
/** −1 (low) … 0 (normal) … 1 (high). Defaults to 0. */
|
|
28
29
|
contrastLevel?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Optional explicit secondary-accent seed, `#rrggbb`. Pins the secondary palette
|
|
32
|
+
* to this brand colour instead of the derived rotation (M3 role tones still
|
|
33
|
+
* apply). Handy for an artwork-extracted theme: pass the second-ranked seed from
|
|
34
|
+
* `seedsFromImagePixels` (`seeds[1]`) as a distinct secondary accent.
|
|
35
|
+
*/
|
|
36
|
+
secondarySeed?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Optional explicit tertiary-accent seed, `#rrggbb`. Same semantics; pass
|
|
39
|
+
* `seedsFromImagePixels`' `seeds[2]` for a third artwork-derived accent.
|
|
40
|
+
*/
|
|
41
|
+
tertiarySeed?: string;
|
|
29
42
|
}
|
|
30
43
|
/**
|
|
31
44
|
* Build the CSS custom-property map for an ARBITRARY seed colour — the dynamic
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seed-scope.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/seed-scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG1F;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0C9E;AAED,mEAAmE;AACnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB
|
|
1
|
+
{"version":3,"file":"seed-scope.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/seed-scope.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG1F;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0C9E;AAED,mEAAmE;AACnE,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAoBpF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
3
|
import type { AppColorName } from '../color-presets';
|
|
4
|
+
import type { ExplicitAccents } from '../preset-vars';
|
|
4
5
|
/**
|
|
5
6
|
* Component that provides inline CSS variables to a subtree via NativeWind's
|
|
6
7
|
* (react-native-css's) real `VariableContext`. The runtime strips the leading
|
|
@@ -21,7 +22,7 @@ export type VariableContextProviderComponent = React.ComponentType<{
|
|
|
21
22
|
* inherited custom properties like `--color-primary: var(--primary)` compute at
|
|
22
23
|
* the document root and would otherwise keep pointing at the app-wide preset.
|
|
23
24
|
*/
|
|
24
|
-
export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
|
|
25
|
+
export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark', accents?: ExplicitAccents): Record<string, string>;
|
|
25
26
|
/**
|
|
26
27
|
* Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
|
|
27
28
|
* react-native-css v3 API for providing inline CSS variables to a subtree. It
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,eAAe,GACxB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
|
|
@@ -7,9 +7,10 @@ export type { BloomSeedScopeProps } from './seed-scope';
|
|
|
7
7
|
export { buildSeedScopeVars, roleColorsToPresetTokens } from './color-scope/seed-scope';
|
|
8
8
|
export type { SeedScopeOptions } from './color-scope/seed-scope';
|
|
9
9
|
export { generateRoleColors, seedHexFromImagePixels, seedsFromImagePixels, quantizeImage, argbFromHex, hexFromArgb, argbFromRgb, redFromArgb, greenFromArgb, blueFromArgb, } from './color-engine';
|
|
10
|
-
export type { RoleColors, GenerateOptions, RoleName, SchemeVariant } from './color-engine';
|
|
10
|
+
export type { RoleColors, GenerateOptions, RoleName, SchemeVariant, AccentSources } from './color-engine';
|
|
11
11
|
export { buildTheme, STATUS_COLORS } from './build-theme';
|
|
12
12
|
export { buildThemeFromSeed, buildColorsFromSeed } from './build-theme-from-seed';
|
|
13
|
+
export type { SeedAccents } from './build-theme-from-seed';
|
|
13
14
|
export { THEME_GRADIENTS } from './gradients';
|
|
14
15
|
export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
|
|
15
16
|
export { useNavigationTheme } from './use-navigation-theme';
|
|
@@ -20,6 +21,7 @@ export { APP_COLOR_NAMES, PREMIUM_COLOR_NAMES, APP_COLOR_PRESETS, HEX_TO_APP_COL
|
|
|
20
21
|
export { parseRgb, withAlpha } from './color-utils';
|
|
21
22
|
export type { RgbChannels } from './color-utils';
|
|
22
23
|
export { getPresetVars, applyPresetVarsToDocument } from './preset-vars';
|
|
24
|
+
export type { ExplicitAccents } from './preset-vars';
|
|
23
25
|
export { applyDarkClass } from './apply-dark-class';
|
|
24
26
|
export { setColorSchemeSafe } from './set-color-scheme-safe';
|
|
25
27
|
export { initCssInteropDarkMode } from './init-css-interop';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACpE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,YAAY,GACb,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AACnF,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC5F,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AACzE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AppColorName } from './color-presets';
|
|
2
|
+
import type { ExplicitAccents } from './preset-vars';
|
|
2
3
|
/**
|
|
3
4
|
* Platform-neutral DEFAULT variant of `applyNativeRootVars` — a no-op.
|
|
4
5
|
*
|
|
@@ -29,5 +30,5 @@ import { type AppColorName } from './color-presets';
|
|
|
29
30
|
* The signature is intentionally identical to those variants so the import site in
|
|
30
31
|
* `BloomThemeProvider` is platform-agnostic.
|
|
31
32
|
*/
|
|
32
|
-
export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
|
|
33
|
+
export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark', _accents?: ExplicitAccents): void;
|
|
33
34
|
//# sourceMappingURL=native-root-vars.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,EACvB,QAAQ,CAAC,EAAE,eAAe,GACzB,IAAI,CAGN"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AppColorName } from './color-presets';
|
|
2
|
+
import type { ExplicitAccents } from './preset-vars';
|
|
2
3
|
/**
|
|
3
4
|
* Publish the active color preset's CSS custom properties into react-native-css's
|
|
4
5
|
* GLOBAL root-variable family so they reach the ENTIRE native app tree — including
|
|
@@ -100,5 +101,5 @@ import { type AppColorName } from './color-presets';
|
|
|
100
101
|
* Defensive guard: if a host ships a react-native-css build that doesn't expose
|
|
101
102
|
* `rootVariables` as a callable (it always does on @3), we bail rather than throw.
|
|
102
103
|
*/
|
|
103
|
-
export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
|
|
104
|
+
export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark', accents?: ExplicitAccents): void;
|
|
104
105
|
//# sourceMappingURL=native-root-vars.native.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-root-vars.native.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.native.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"native-root-vars.native.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.native.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,eAAe,GACxB,IAAI,CASN"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AppColorName } from './color-presets';
|
|
2
|
+
import type { ExplicitAccents } from './preset-vars';
|
|
2
3
|
/**
|
|
3
4
|
* Web fork of `applyNativeRootVars` — a no-op.
|
|
4
5
|
*
|
|
@@ -16,5 +17,5 @@ import { type AppColorName } from './color-presets';
|
|
|
16
17
|
* The signature is intentionally identical to the plain variant so the import
|
|
17
18
|
* site in `BloomThemeProvider` is platform-agnostic.
|
|
18
19
|
*/
|
|
19
|
-
export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
|
|
20
|
+
export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark', _accents?: ExplicitAccents): void;
|
|
20
21
|
//# sourceMappingURL=native-root-vars.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-root-vars.web.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"native-root-vars.web.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,EACvB,QAAQ,CAAC,EAAE,eAAe,GACzB,IAAI,CAEN"}
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
import { type AppColorName, type PresetTokens } from './color-presets';
|
|
2
|
+
/**
|
|
3
|
+
* Optional explicit accent-colour overrides (`#rrggbb`) that PIN the secondary
|
|
4
|
+
* and/or tertiary palette app-wide, regardless of the active preset's own seed.
|
|
5
|
+
* Threaded from `BloomThemeProvider`'s `secondaryColor` / `tertiaryColor` props
|
|
6
|
+
* down through the whole token pipeline. When both are omitted, the preset's own
|
|
7
|
+
* (usually derived) accents are used — output is unchanged.
|
|
8
|
+
*/
|
|
9
|
+
export interface ExplicitAccents {
|
|
10
|
+
secondaryHex?: string;
|
|
11
|
+
tertiaryHex?: string;
|
|
12
|
+
}
|
|
2
13
|
/**
|
|
3
14
|
* Map a preset (seed + variant) and mode onto Bloom's canonical CSS-var token
|
|
4
15
|
* set, sourcing EVERY colour from the colour engine's Material-3 role output.
|
|
@@ -16,7 +27,7 @@ import { type AppColorName, type PresetTokens } from './color-presets';
|
|
|
16
27
|
* This is the single source of truth for extended theming vars — consumer apps
|
|
17
28
|
* must not redefine these per-app.
|
|
18
29
|
*/
|
|
19
|
-
export declare function getPresetVars(colorName: AppColorName, mode: 'light' | 'dark'): PresetTokens;
|
|
30
|
+
export declare function getPresetVars(colorName: AppColorName, mode: 'light' | 'dark', accents?: ExplicitAccents): PresetTokens;
|
|
20
31
|
/**
|
|
21
32
|
* Apply a preset's extended vars to `document.documentElement`. Web-only no-op
|
|
22
33
|
* on native. `BloomThemeProvider` already writes the base preset vars on web;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1F;;;;;;GAMG;AACH,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,eAAe,GACxB,YAAY,CA8Dd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,IAAI,CAYN"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { APP_COLOR_NAMES, type AppColorName } from './color-presets';
|
|
2
|
+
import { type ExplicitAccents } from './preset-vars';
|
|
2
3
|
/**
|
|
3
4
|
* The canonical set of Bloom theme token names — WITHOUT the leading `--`.
|
|
4
5
|
*
|
|
@@ -48,6 +49,6 @@ export declare function hslToSrgb(triple: string): string;
|
|
|
48
49
|
* (`__fixtures__/golden-resolved-tokens.json`), guaranteeing the visible palette
|
|
49
50
|
* matches the previous resolved-color pipeline byte-for-byte.
|
|
50
51
|
*/
|
|
51
|
-
export declare function getResolvedTokens(preset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
|
|
52
|
+
export declare function getResolvedTokens(preset: AppColorName, mode: 'light' | 'dark', accents?: ExplicitAccents): Record<string, string>;
|
|
52
53
|
export { APP_COLOR_NAMES };
|
|
53
54
|
//# sourceMappingURL=token-registry.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"token-registry.d.ts","sourceRoot":"","sources":["../../../../src/theme/token-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"token-registry.d.ts","sourceRoot":"","sources":["../../../../src/theme/token-registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEpE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,6jBAqCnB,CAAC;AAEX,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAW/D;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CA+ChD;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,eAAe,GACxB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAOxB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -158,6 +158,9 @@ function createMockColors(): ThemeColors {
|
|
|
158
158
|
primaryLight: '#e0f7fa',
|
|
159
159
|
primaryDark: '#003d44',
|
|
160
160
|
secondary: '#005c67',
|
|
161
|
+
secondaryForeground: '#FFFFFF',
|
|
162
|
+
tertiary: '#7a4b3a',
|
|
163
|
+
tertiaryForeground: '#FFFFFF',
|
|
161
164
|
tint: '#005c67',
|
|
162
165
|
icon: '#666',
|
|
163
166
|
iconActive: '#005c67',
|
|
@@ -37,6 +37,7 @@ import {
|
|
|
37
37
|
type BloomThemeStorage,
|
|
38
38
|
type SyncReadResult,
|
|
39
39
|
} from './persistence';
|
|
40
|
+
import type { ExplicitAccents } from './preset-vars';
|
|
40
41
|
import { setColorSchemeSafe } from './set-color-scheme-safe';
|
|
41
42
|
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
|
|
42
43
|
import type { Theme, ThemeMode } from './types';
|
|
@@ -135,6 +136,21 @@ export interface BloomThemeProviderProps {
|
|
|
135
136
|
*/
|
|
136
137
|
nativeWrapperStyle?: StyleProp<ViewStyle>;
|
|
137
138
|
|
|
139
|
+
/**
|
|
140
|
+
* Optional app-wide secondary-accent colour, `#rrggbb`. When set, the whole
|
|
141
|
+
* theme's secondary family (`--secondary`, `bg-secondary`, `colors.secondary`,
|
|
142
|
+
* plus the container / on-colour roles) is PINNED to this brand colour instead
|
|
143
|
+
* of the derived hue-rotation of the active preset's seed — for a brand with a
|
|
144
|
+
* distinct accent (e.g. blue primary + yellow secondary). M3 role tones still
|
|
145
|
+
* apply. Omit to keep the preset's derived accent.
|
|
146
|
+
*/
|
|
147
|
+
secondaryColor?: string;
|
|
148
|
+
/**
|
|
149
|
+
* Optional app-wide tertiary-accent colour, `#rrggbb`. Same semantics as
|
|
150
|
+
* {@link BloomThemeProviderProps.secondaryColor} for the tertiary family.
|
|
151
|
+
*/
|
|
152
|
+
tertiaryColor?: string;
|
|
153
|
+
|
|
138
154
|
children: React.ReactNode;
|
|
139
155
|
}
|
|
140
156
|
|
|
@@ -296,10 +312,24 @@ export function BloomThemeProvider({
|
|
|
296
312
|
fonts = true,
|
|
297
313
|
onFontsLoading,
|
|
298
314
|
nativeWrapperStyle,
|
|
315
|
+
secondaryColor,
|
|
316
|
+
tertiaryColor,
|
|
299
317
|
children,
|
|
300
318
|
}: BloomThemeProviderProps) {
|
|
301
319
|
const rnScheme = useRNColorScheme();
|
|
302
320
|
|
|
321
|
+
// The app-wide pinned accents, if any. Memoized so its identity only changes
|
|
322
|
+
// when a prop changes (keeps the effect/memo deps below stable). Left
|
|
323
|
+
// `undefined` when neither is set so every downstream call is byte-identical
|
|
324
|
+
// to the no-accent path.
|
|
325
|
+
const explicitAccents = useMemo<ExplicitAccents | undefined>(
|
|
326
|
+
() =>
|
|
327
|
+
secondaryColor === undefined && tertiaryColor === undefined
|
|
328
|
+
? undefined
|
|
329
|
+
: { secondaryHex: secondaryColor, tertiaryHex: tertiaryColor },
|
|
330
|
+
[secondaryColor, tertiaryColor],
|
|
331
|
+
);
|
|
332
|
+
|
|
303
333
|
const { mode, colorPreset, setMode, setColorPreset, resetTheme, hydrated } = useThemeState({
|
|
304
334
|
controlledMode,
|
|
305
335
|
controlledPreset,
|
|
@@ -322,8 +352,8 @@ export function BloomThemeProvider({
|
|
|
322
352
|
useIsomorphicLayoutEffect(() => {
|
|
323
353
|
setColorSchemeSafe(effectiveMode);
|
|
324
354
|
applyDarkClass(resolved);
|
|
325
|
-
applyColorPresetVars(colorPreset, resolved);
|
|
326
|
-
}, [effectiveMode, resolved, colorPreset]);
|
|
355
|
+
applyColorPresetVars(colorPreset, resolved, explicitAccents);
|
|
356
|
+
}, [effectiveMode, resolved, colorPreset, explicitAccents]);
|
|
327
357
|
|
|
328
358
|
// Native only: publish the preset vars into react-native-css's GLOBAL root
|
|
329
359
|
// variable family so they reach the ENTIRE app tree — navigator screens and
|
|
@@ -333,19 +363,19 @@ export function BloomThemeProvider({
|
|
|
333
363
|
// there. Runs before paint via `useIsomorphicLayoutEffect`, matching the
|
|
334
364
|
// sibling `applyColorPresetVars` side effect.
|
|
335
365
|
useIsomorphicLayoutEffect(() => {
|
|
336
|
-
applyNativeRootVars(colorPreset, resolved);
|
|
337
|
-
}, [colorPreset, resolved]);
|
|
366
|
+
applyNativeRootVars(colorPreset, resolved, explicitAccents);
|
|
367
|
+
}, [colorPreset, resolved, explicitAccents]);
|
|
338
368
|
|
|
339
369
|
const contextValue = useMemo<BloomThemeContextValue>(
|
|
340
370
|
() => ({
|
|
341
|
-
theme: buildTheme(colorPreset, resolved, isAdaptive),
|
|
371
|
+
theme: buildTheme(colorPreset, resolved, isAdaptive, explicitAccents),
|
|
342
372
|
mode,
|
|
343
373
|
colorPreset,
|
|
344
374
|
setMode,
|
|
345
375
|
setColorPreset,
|
|
346
376
|
resetTheme,
|
|
347
377
|
}),
|
|
348
|
-
[colorPreset, resolved, isAdaptive, mode, setMode, setColorPreset, resetTheme],
|
|
378
|
+
[colorPreset, resolved, isAdaptive, explicitAccents, mode, setMode, setColorPreset, resetTheme],
|
|
349
379
|
);
|
|
350
380
|
|
|
351
381
|
const shouldAwait = awaitHydration ?? Boolean(persistKey && storage);
|
|
@@ -356,8 +386,8 @@ export function BloomThemeProvider({
|
|
|
356
386
|
// etc. through react-native-css's real VariableContext. Web writes these to
|
|
357
387
|
// `document.documentElement` via `applyColorPresetVars`, so it's unused there.
|
|
358
388
|
const nativeVars = useMemo(
|
|
359
|
-
() => (Platform.OS === 'web' ? null : buildScopeVars(colorPreset, resolved)),
|
|
360
|
-
[colorPreset, resolved],
|
|
389
|
+
() => (Platform.OS === 'web' ? null : buildScopeVars(colorPreset, resolved, explicitAccents)),
|
|
390
|
+
[colorPreset, resolved, explicitAccents],
|
|
361
391
|
);
|
|
362
392
|
const VariableProvider = getVariableContextProvider();
|
|
363
393
|
|