@advui/theme 0.7.0 → 0.11.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/dist/config.d.ts +4 -3
- package/dist/config.d.ts.map +1 -1
- package/dist/config.js +5 -1
- package/dist/config.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/material.d.ts.map +1 -1
- package/dist/material.js +3 -2
- package/dist/material.js.map +1 -1
- package/dist/subThemes.d.ts +33 -0
- package/dist/subThemes.d.ts.map +1 -0
- package/dist/subThemes.js +80 -0
- package/dist/subThemes.js.map +1 -0
- package/dist/themes.d.ts +6 -6
- package/dist/themes.d.ts.map +1 -1
- package/dist/themes.js +6 -4
- package/dist/themes.js.map +1 -1
- package/package.json +2 -2
- package/src/config.ts +7 -3
- package/src/index.ts +1 -0
- package/src/material.ts +3 -2
- package/src/subThemes.ts +108 -0
- package/src/themes.ts +8 -8
package/dist/config.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type FontFamilies, type FontScale } from './fonts';
|
|
2
2
|
import { type ThemePresetName } from './presets';
|
|
3
|
-
import { type
|
|
3
|
+
import { type ModeThemes, type SubThemes } from './subThemes';
|
|
4
|
+
import { type ThemeColorsInput } from './themes';
|
|
4
5
|
import { type RadiusInput } from './tokens';
|
|
5
6
|
export interface UniversalConfigOptions {
|
|
6
7
|
/** Starting color preset. Individual `colors` win over the preset. Default: `indigo`. */
|
|
@@ -19,7 +20,7 @@ export interface UniversalConfigOptions {
|
|
|
19
20
|
* Complete light and dark themes, e.g. from `material()` in
|
|
20
21
|
* `@advui/theme/material`. Replaces `preset` and `colors`.
|
|
21
22
|
*/
|
|
22
|
-
themes?:
|
|
23
|
+
themes?: ModeThemes & Partial<SubThemes>;
|
|
23
24
|
/**
|
|
24
25
|
* Android only: pressing a button, chip, tab or list row shows the native
|
|
25
26
|
* ripple instead of darkening it. `material()` turns it on. Default: false.
|
|
@@ -273,7 +274,7 @@ export declare function createUniversalConfig(options?: UniversalConfigOptions):
|
|
|
273
274
|
readonly black: import("tamagui").Variable<"#ffffff" | "#000000" | "rgba(0, 0, 0, 0)">;
|
|
274
275
|
readonly transparent: import("tamagui").Variable<"#ffffff" | "#000000" | "rgba(0, 0, 0, 0)">;
|
|
275
276
|
};
|
|
276
|
-
}, "color" | "zIndex" | "radius" | "space" | "size">, GeneratedThemes, {
|
|
277
|
+
}, "color" | "zIndex" | "radius" | "space" | "size">, import("./themes").GeneratedThemes, {
|
|
277
278
|
readonly text: "textAlign";
|
|
278
279
|
readonly b: "bottom";
|
|
279
280
|
readonly bg: "backgroundColor";
|
package/dist/config.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAwB,MAAM,SAAS,CAAA;AAEjF,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,WAAW,CAAA;AAE9D,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAwB,MAAM,SAAS,CAAA;AAEjF,OAAO,EAAE,KAAK,eAAe,EAAgB,MAAM,WAAW,CAAA;AAE9D,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAiB,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,KAAK,WAAW,EAAyB,MAAM,UAAU,CAAA;AAElE,MAAM,WAAW,sBAAsB;IACrC,yFAAyF;IACzF,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC9B,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,CAAA;IACxC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,OAAO,CAAA;CACvB;AAID,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,GAAG,iBAAiB,CAEtE;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,sBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BzE;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA"}
|
package/dist/config.js
CHANGED
|
@@ -4,6 +4,7 @@ import { createUniversalFonts } from './fonts';
|
|
|
4
4
|
import { media, mediaQueryDefaultActive } from './media';
|
|
5
5
|
import { themePresets } from './presets';
|
|
6
6
|
import { shorthands } from './shorthands';
|
|
7
|
+
import { withSubThemes } from './subThemes';
|
|
7
8
|
import { createThemeColors } from './themes';
|
|
8
9
|
import { createUniversalTokens } from './tokens';
|
|
9
10
|
const defaultSettings = { androidRipple: false };
|
|
@@ -20,7 +21,10 @@ export function getUniversalSettings(config) {
|
|
|
20
21
|
*/
|
|
21
22
|
export function createUniversalConfig(options = {}) {
|
|
22
23
|
const { preset = 'indigo', colors, radius = 'md', fontScale = 'default', fonts } = options;
|
|
23
|
-
|
|
24
|
+
// Hand-made light and dark themes get the primary and inverse sub-themes too.
|
|
25
|
+
const themes = options.themes
|
|
26
|
+
? withSubThemes(options.themes)
|
|
27
|
+
: createThemeColors({ ...themePresets[preset].colors, ...colors });
|
|
24
28
|
const config = createTamagui({
|
|
25
29
|
tokens: createUniversalTokens({ radius }),
|
|
26
30
|
themes,
|
package/dist/config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAqC,oBAAoB,EAAE,MAAM,SAAS,CAAA;AACjF,OAAO,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,EAAwB,YAAY,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAqC,oBAAoB,EAAE,MAAM,SAAS,CAAA;AACjF,OAAO,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,EAAwB,YAAY,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAmC,aAAa,EAAE,MAAM,aAAa,CAAA;AAC5E,OAAO,EAAyB,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAgClE,MAAM,eAAe,GAAsB,EAAE,aAAa,EAAE,KAAK,EAAE,CAAA;AAEnE,6EAA6E;AAC7E,MAAM,UAAU,oBAAoB,CAAC,MAAc;IACjD,OAAQ,MAAwC,CAAC,KAAK,IAAI,eAAe,CAAA;AAC3E,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CAAC,UAAkC,EAAE;IACxE,MAAM,EAAE,MAAM,GAAG,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,GAAG,OAAO,CAAA;IAC1F,8EAA8E;IAC9E,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM;QAC3B,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;QAC/B,CAAC,CAAC,iBAAiB,CAAC,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;IAEpE,MAAM,MAAM,GAAG,aAAa,CAAC;QAC3B,MAAM,EAAE,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;QACzC,MAAM;QACN,KAAK,EAAE,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;QAClE,KAAK;QACL,UAAU;QACV,UAAU;QACV,eAAe,EAAE,CAAC,KAAK,EAAE,EAAE,CACzB,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI;QAC5F,QAAQ,EAAE;YACR,WAAW,EAAE,MAAM;YACnB,uBAAuB;YACvB,gBAAgB,EAAE,IAAI;YACtB,2BAA2B,EAAE,IAAI;YACjC,iBAAiB,EAAE,MAAM;YACzB,kBAAkB,EAAE,qBAAqB;YACzC,mBAAmB,EAAE,KAAK;YAC1B,WAAW,EAAE,KAAK;SACnB;KACF,CAAC,CAAA;IACF,yEAAyE;IACzE,yEAAyE;IACzE,MAAM,KAAK,GAAsB,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,IAAI,KAAK,EAAE,CAAA;IAClF,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,CAAA;AACzC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { generateScale, neutralScaleNames, resolveScale, scales, type ColorScale
|
|
|
7
7
|
export { themePresetNames, themePresets, type ThemePreset, type ThemePresetName } from './presets';
|
|
8
8
|
export { shadows, type ShadowName } from './shadows';
|
|
9
9
|
export { shorthands } from './shorthands';
|
|
10
|
+
export { primarySurfaceTheme, withSubThemes, type ModeThemes, type SubThemes } from './subThemes';
|
|
10
11
|
export { createThemeColors, defaultThemeColors, type ColorMode, type GeneratedThemes, type ThemeColorsInput, type ThemeKey, type ThemeValues, } from './themes';
|
|
11
12
|
export { colorTokens, createRadius, createUniversalTokens, radiusScales, size, space, zIndex, type RadiusInput, type RadiusOverrides, type RadiusScale, type RadiusToken, } from './tokens';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,WAAW,GACjB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,MAAM,EACN,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,aAAa,CAAA;AACjG,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,WAAW,GACjB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export { generateScale, neutralScaleNames, resolveScale, scales, } from './palet
|
|
|
7
7
|
export { themePresetNames, themePresets } from './presets';
|
|
8
8
|
export { shadows } from './shadows';
|
|
9
9
|
export { shorthands } from './shorthands';
|
|
10
|
+
export { primarySurfaceTheme, withSubThemes } from './subThemes';
|
|
10
11
|
export { createThemeColors, defaultThemeColors, } from './themes';
|
|
11
12
|
export { colorTokens, createRadius, createUniversalTokens, radiusScales, size, space, zIndex, } from './tokens';
|
|
12
13
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,GAIrB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAqC,MAAM,SAAS,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,MAAM,GAMP,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAA0C,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,OAAO,EAAmB,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GAMnB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,MAAM,GAKP,MAAM,UAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACnD,OAAO,EACL,qBAAqB,EACrB,oBAAoB,GAIrB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAqC,MAAM,SAAS,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACrE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,MAAM,GAMP,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAA0C,MAAM,WAAW,CAAA;AAClG,OAAO,EAAE,OAAO,EAAmB,MAAM,WAAW,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAmC,MAAM,aAAa,CAAA;AACjG,OAAO,EACL,iBAAiB,EACjB,kBAAkB,GAMnB,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,WAAW,EACX,YAAY,EACZ,qBAAqB,EACrB,YAAY,EACZ,IAAI,EACJ,KAAK,EACL,MAAM,GAKP,MAAM,UAAU,CAAA"}
|
package/dist/material.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../src/material.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../src/material.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAG3C,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,8DAA8D;AAC9D,eAAO,MAAM,sBAAsB,YAAY,CAAA;AAE/C,MAAM,WAAW,eAAe;IAC9B,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9D,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;IAC5D,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAiKD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,eAAoB,GAAG,eAAe,CAsBnF;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,eAW3B,CAAA;AAKD,iFAAiF;AACjF,eAAO,MAAM,aAAa,EAAE,YAAgD,CAAA;AAE5E;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,OAAO,GAAE,eAAoB,GAAG,sBAAsB,CAO9E"}
|
package/dist/material.js
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import { Hct, SchemeTonalSpot, argbFromHex, customColor, hexFromArgb, } from '@material/material-color-utilities';
|
|
12
12
|
import { ensureContrast, parseColor, toHex, withAlpha } from '@advui/utils';
|
|
13
13
|
import { chartColors } from './chart';
|
|
14
|
+
import { withSubThemes } from './subThemes';
|
|
14
15
|
/** Material's baseline purple, used when no seed is given. */
|
|
15
16
|
export const MATERIAL_BASELINE_SEED = '#6750A4';
|
|
16
17
|
const defaultStatus = { success: '#2e7d32', warning: '#b26a00', info: '#0061a4' };
|
|
@@ -178,10 +179,10 @@ export function createMaterialThemes(options = {}) {
|
|
|
178
179
|
info: customColor(source, { name: 'info', value: argbFromHex(colors.info), blend: true }),
|
|
179
180
|
};
|
|
180
181
|
const scheme = (isDark) => new SchemeTonalSpot(Hct.fromInt(source), isDark, 0);
|
|
181
|
-
return {
|
|
182
|
+
return withSubThemes({
|
|
182
183
|
light: { ...buildMode(scheme(false), 'light', status), ...options.overrides?.light },
|
|
183
184
|
dark: { ...buildMode(scheme(true), 'dark', status), ...options.overrides?.dark },
|
|
184
|
-
};
|
|
185
|
+
});
|
|
185
186
|
}
|
|
186
187
|
/**
|
|
187
188
|
* Material 3 shape scale on Adv UI's radius tokens: pill buttons, 4px fields,
|
package/dist/material.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"material.js","sourceRoot":"","sources":["../src/material.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAEL,GAAG,EACH,eAAe,EACf,WAAW,EACX,WAAW,EACX,WAAW,GACZ,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"material.js","sourceRoot":"","sources":["../src/material.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAEL,GAAG,EACH,eAAe,EACf,WAAW,EACX,WAAW,EACX,WAAW,GACZ,MAAM,oCAAoC,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAI3C,8DAA8D;AAC9D,MAAM,CAAC,MAAM,sBAAsB,GAAG,SAAS,CAAA;AAgB/C,MAAM,aAAa,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAA;AAEjF,iEAAiE;AACjE,MAAM,KAAK,GAAG,IAAI,CAAA;AAClB,MAAM,KAAK,GAAG,GAAG,CAAA;AAEjB,qFAAqF;AACrF,SAAS,KAAK,CAAC,IAAY,EAAE,OAAe,EAAE,OAAe;IAC3D,MAAM,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IAC1B,MAAM,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAC7B,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;IACtE,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,OAAO,CAAA;IACnE,OAAO,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;AACxE,CAAC;AAED,8EAA8E;AAC9E,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACvD,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;CAC7C,CAAA;AAEV,SAAS,SAAS,CAChB,CAAgB,EAChB,IAAe,EACf,MAA8E;IAE9E,MAAM,GAAG,GAAG,WAAW,CAAA;IACvB,MAAM,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;IAC9B,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAA;IAC3C,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAA;IACzC,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAE,CAAC,CAAC,CAAA;IAErF,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAClC,MAAM,gBAAgB,GAAG,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAChD,MAAM,kBAAkB,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACpD,MAAM,kBAAkB,GAAG,GAAG,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACpD,MAAM,oBAAoB,GAAG,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAA;IACxD,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC1B,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAC5C,MAAM,gBAAgB,GAAG,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9B,MAAM,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAE5C,MAAM,MAAM,GAAG,CAAC,KAAqC,EAAE,EAAE;QACvD,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAA;QAC3C,OAAO;YACL,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;YACnB,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;YAC1B,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC;YAC3B,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YAC9E,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;SACzD,CAAA;IACH,CAAC,CAAA;IACD,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACtC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAEhC,OAAO;QACL,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QACjD,eAAe,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QACjD,eAAe,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QACjD,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC;QACzC,qBAAqB,EAAE,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC;QAC5C,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC;QACnC,UAAU,EAAE,SAAS;QACrB,gBAAgB,EAAE,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;QACzC,WAAW,EAAE,cAAc;QAC3B,gBAAgB,EAAE,OAAO;QACzB,gBAAgB,EAAE,OAAO;QACzB,gBAAgB,EAAE,OAAO;QACzB,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC;QACzC,YAAY,EAAE,OAAO;QACrB,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;QAClE,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,qBAAqB;QACxE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;QACf,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;QACjB,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;QAEjB,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,eAAe,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;QAC/D,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC;QAChC,cAAc,EAAE,SAAS;QACzB,OAAO;QACP,iBAAiB,EAAE,SAAS;QAC5B,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;QAEtC,MAAM,EAAE,cAAc;QACtB,YAAY,EAAE,OAAO;QACrB,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO;QAEb,OAAO;QACP,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QAC9C,YAAY,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QAC9C,iBAAiB,EAAE,SAAS;QAC5B,WAAW,EAAE,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC;QAC7C,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;QAChE,WAAW,EAAE,gBAAgB;QAC7B,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,KAAK,CAAC;QACpE,qBAAqB,EAAE,kBAAkB;QACzC,2BAA2B;QAC3B,SAAS,EAAE,kBAAkB;QAC7B,cAAc,EAAE,KAAK,CAAC,kBAAkB,EAAE,oBAAoB,EAAE,KAAK,CAAC;QACtE,cAAc,EAAE,KAAK,CAAC,kBAAkB,EAAE,oBAAoB,EAAE,KAAK,CAAC;QACtE,mBAAmB,EAAE,oBAAoB;QACzC,2EAA2E;QAC3E,2DAA2D;QAC3D,MAAM,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC;QACxC,WAAW,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC;QAC5C,gBAAgB,EAAE,SAAS;QAE3B,WAAW,EAAE,KAAK;QAClB,gBAAgB,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;QAC9C,gBAAgB,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC;QAC9C,qBAAqB,EAAE,OAAO;QAC9B,eAAe,EAAE,cAAc;QAC/B,yBAAyB,EAAE,gBAAgB;QAC3C,OAAO,EAAE,OAAO,CAAC,KAAK;QACtB,iBAAiB,EAAE,OAAO,CAAC,UAAU;QACrC,WAAW,EAAE,OAAO,CAAC,IAAI;QACzB,qBAAqB,EAAE,OAAO,CAAC,cAAc;QAC7C,aAAa,EAAE,OAAO,CAAC,MAAM;QAC7B,OAAO,EAAE,OAAO,CAAC,KAAK;QACtB,iBAAiB,EAAE,OAAO,CAAC,UAAU;QACrC,WAAW,EAAE,OAAO,CAAC,IAAI;QACzB,qBAAqB,EAAE,OAAO,CAAC,cAAc;QAC7C,aAAa,EAAE,OAAO,CAAC,MAAM;QAC7B,KAAK;QACL,eAAe,EAAE,OAAO;QACxB,SAAS,EAAE,cAAc;QACzB,mBAAmB,EAAE,gBAAgB;QACrC,WAAW,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC;QAC/C,IAAI,EAAE,IAAI,CAAC,KAAK;QAChB,cAAc,EAAE,IAAI,CAAC,UAAU;QAC/B,QAAQ,EAAE,IAAI,CAAC,IAAI;QACnB,kBAAkB,EAAE,IAAI,CAAC,cAAc;QACvC,UAAU,EAAE,IAAI,CAAC,MAAM;QAEvB,GAAG,WAAW,CAAC,IAAI,CAAC;KACrB,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAAC,UAA2B,EAAE;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,sBAAsB,CAAA;IACnD,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;IACvC,MAAM,MAAM,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAA;IACtD,MAAM,MAAM,GAAG;QACb,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE;YAC3B,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC;YAClC,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,IAAI,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;KAC1F,CAAA;IACD,MAAM,MAAM,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,IAAI,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;IACvF,OAAO,aAAa,CAAC;QACnB,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE;QACpF,IAAI,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE;KACjF,CAAC,CAAA;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAoB;IAC5C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,IAAI;IACZ,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,EAAE;CACX,CAAA;AAED,MAAM,MAAM,GACV,sHAAsH,CAAA;AAExH,iFAAiF;AACjF,MAAM,CAAC,MAAM,aAAa,GAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,CAAA;AAE5E;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ,CAAC,UAA2B,EAAE;IACpD,OAAO;QACL,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC;QACrC,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,aAAa;QACpB,aAAa,EAAE,OAAO,CAAC,aAAa,IAAI,IAAI;KAC7C,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ThemeValues } from './themes';
|
|
2
|
+
/**
|
|
3
|
+
* The light and dark themes every Adv UI config has. These are type aliases,
|
|
4
|
+
* not interfaces, because Tamagui's config needs an index signature.
|
|
5
|
+
*/
|
|
6
|
+
export type ModeThemes = {
|
|
7
|
+
light: ThemeValues;
|
|
8
|
+
dark: ThemeValues;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Sub-themes for surfaces that change the text color under them. Tamagui
|
|
12
|
+
* resolves `<Theme name="primary">` to `light_primary` or `dark_primary`, so
|
|
13
|
+
* the children of a primary or inverse Section stay readable in both modes,
|
|
14
|
+
* including during SSR.
|
|
15
|
+
*/
|
|
16
|
+
export type SubThemes = {
|
|
17
|
+
/** Content on a `$primary` surface, such as a call-to-action band. */
|
|
18
|
+
light_primary: ThemeValues;
|
|
19
|
+
dark_primary: ThemeValues;
|
|
20
|
+
/** Content on the other mode's surface: dark in light mode, light in dark mode. */
|
|
21
|
+
light_inverse: ThemeValues;
|
|
22
|
+
dark_inverse: ThemeValues;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* A theme for content on `t.primary`: its text is `primaryForeground`, raised
|
|
26
|
+
* surfaces and borders are mixed toward it, and a primary button inverts
|
|
27
|
+
* (foreground-colored fill, primary-colored text). Every text pair keeps
|
|
28
|
+
* WCAG AA contrast, because `primaryForeground` already does on `primary`.
|
|
29
|
+
*/
|
|
30
|
+
export declare function primarySurfaceTheme(t: ThemeValues): ThemeValues;
|
|
31
|
+
/** Adds the primary and inverse sub-themes to a pair of light and dark themes. */
|
|
32
|
+
export declare function withSubThemes<T extends ModeThemes>(themes: T): T & SubThemes;
|
|
33
|
+
//# sourceMappingURL=subThemes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"subThemes.d.ts","sourceRoot":"","sources":["../src/subThemes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,WAAW,CAAA;CAClB,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,sEAAsE;IACtE,aAAa,EAAE,WAAW,CAAA;IAC1B,YAAY,EAAE,WAAW,CAAA;IACzB,mFAAmF;IACnF,aAAa,EAAE,WAAW,CAAA;IAC1B,YAAY,EAAE,WAAW,CAAA;CAC1B,CAAA;AAgBD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,WAAW,CAgD/D;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAS5E"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { contrastRatio, mix, withAlpha } from '@advui/utils';
|
|
2
|
+
/**
|
|
3
|
+
* The furthest mix of `from` toward `to`, up to `max`, that keeps 4.5:1
|
|
4
|
+
* against every color in `against` (`from` itself when no step does). Moving
|
|
5
|
+
* along the mix keeps the hue, and unlike `ensureContrast` it works on
|
|
6
|
+
* mid-tone brand colors whichever way the text goes.
|
|
7
|
+
*/
|
|
8
|
+
function furthest(from, to, max, against) {
|
|
9
|
+
for (let amount = max; amount > 0; amount -= 0.01) {
|
|
10
|
+
const color = mix(from, to, amount);
|
|
11
|
+
if (against.every((other) => contrastRatio(other, color) >= 4.5))
|
|
12
|
+
return color;
|
|
13
|
+
}
|
|
14
|
+
return from;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* A theme for content on `t.primary`: its text is `primaryForeground`, raised
|
|
18
|
+
* surfaces and borders are mixed toward it, and a primary button inverts
|
|
19
|
+
* (foreground-colored fill, primary-colored text). Every text pair keeps
|
|
20
|
+
* WCAG AA contrast, because `primaryForeground` already does on `primary`.
|
|
21
|
+
*/
|
|
22
|
+
export function primarySurfaceTheme(t) {
|
|
23
|
+
const surface = t.primary;
|
|
24
|
+
const text = t.primaryForeground;
|
|
25
|
+
// Cards on the band are a step toward the text, as long as the text still reads on them.
|
|
26
|
+
const raised = furthest(surface, text, 0.12, [text]);
|
|
27
|
+
// Muted text is a step toward the band, readable on the band and on cards.
|
|
28
|
+
const muted = furthest(text, surface, 0.3, [surface, raised]);
|
|
29
|
+
const line = mix(surface, text, 0.35);
|
|
30
|
+
return {
|
|
31
|
+
...t,
|
|
32
|
+
background: surface,
|
|
33
|
+
backgroundHover: t.primaryHover,
|
|
34
|
+
backgroundPress: t.primaryPress,
|
|
35
|
+
backgroundFocus: t.primaryHover,
|
|
36
|
+
backgroundStrong: t.primaryPress,
|
|
37
|
+
backgroundTransparent: withAlpha(surface, 0),
|
|
38
|
+
color: text,
|
|
39
|
+
colorHover: text,
|
|
40
|
+
colorPress: muted,
|
|
41
|
+
colorFocus: text,
|
|
42
|
+
colorTransparent: withAlpha(text, 0),
|
|
43
|
+
borderColor: line,
|
|
44
|
+
borderColorHover: mix(surface, text, 0.5),
|
|
45
|
+
borderColorPress: mix(surface, text, 0.5),
|
|
46
|
+
borderColorFocus: text,
|
|
47
|
+
placeholderColor: muted,
|
|
48
|
+
outlineColor: text,
|
|
49
|
+
foreground: text,
|
|
50
|
+
muted: raised,
|
|
51
|
+
mutedForeground: muted,
|
|
52
|
+
card: raised,
|
|
53
|
+
cardForeground: text,
|
|
54
|
+
border: line,
|
|
55
|
+
borderStrong: mix(surface, text, 0.5),
|
|
56
|
+
input: mix(surface, text, 0.5),
|
|
57
|
+
ring: text,
|
|
58
|
+
primary: text,
|
|
59
|
+
primaryHover: mix(text, surface, 0.1),
|
|
60
|
+
primaryPress: mix(text, surface, 0.18),
|
|
61
|
+
primaryForeground: surface,
|
|
62
|
+
primaryText: text,
|
|
63
|
+
inversePrimary: surface,
|
|
64
|
+
primarySoft: raised,
|
|
65
|
+
primarySoftHover: mix(surface, text, 0.2),
|
|
66
|
+
primarySoftForeground: text,
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
/** Adds the primary and inverse sub-themes to a pair of light and dark themes. */
|
|
70
|
+
export function withSubThemes(themes) {
|
|
71
|
+
return {
|
|
72
|
+
light_primary: primarySurfaceTheme(themes.light),
|
|
73
|
+
dark_primary: primarySurfaceTheme(themes.dark),
|
|
74
|
+
light_inverse: themes.dark,
|
|
75
|
+
dark_inverse: themes.light,
|
|
76
|
+
// Sub-themes passed in win, so an app can design its own.
|
|
77
|
+
...themes,
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=subThemes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"subThemes.js","sourceRoot":"","sources":["../src/subThemes.ts"],"names":[],"mappings":"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"}
|
package/dist/themes.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type ColorScale, type ColorSource } from './palettes';
|
|
2
|
+
import { type ModeThemes, type SubThemes } from './subThemes';
|
|
2
3
|
export type ColorMode = 'light' | 'dark';
|
|
3
4
|
/**
|
|
4
5
|
* Every value a Adv UI theme defines. The first block is Tamagui's
|
|
@@ -125,14 +126,13 @@ export interface ThemeColorsInput {
|
|
|
125
126
|
/** Escape hatch: override any generated value per mode. */
|
|
126
127
|
overrides?: Partial<Record<ColorMode, Partial<ThemeValues>>>;
|
|
127
128
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
dark: ThemeValues;
|
|
131
|
-
};
|
|
129
|
+
/** Light and dark themes, plus the primary and inverse sub-themes (see `withSubThemes`). */
|
|
130
|
+
export type GeneratedThemes = ModeThemes & SubThemes;
|
|
132
131
|
export declare const defaultThemeColors: Required<Omit<ThemeColorsInput, 'overrides'>>;
|
|
133
132
|
/**
|
|
134
|
-
* Generates the light and dark theme objects
|
|
135
|
-
* fall back to the neutral scale so a
|
|
133
|
+
* Generates the light and dark theme objects, with their primary and inverse
|
|
134
|
+
* sub-themes. Missing `secondary`/`accent` fall back to the neutral scale so a
|
|
135
|
+
* single `primary` is enough to brand an app.
|
|
136
136
|
*/
|
|
137
137
|
export declare function createThemeColors(input?: ThemeColorsInput): GeneratedThemes;
|
|
138
138
|
export type { ColorScale };
|
package/dist/themes.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAiC,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"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"}
|
package/dist/themes.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { accessibleSolid, adjustLightness, ensureContrast, withAlpha } from '@advui/utils';
|
|
2
2
|
import { resolveScale } from './palettes';
|
|
3
3
|
import { chartColors } from './chart';
|
|
4
|
+
import { withSubThemes } from './subThemes';
|
|
4
5
|
const WHITE = '#ffffff';
|
|
5
6
|
function solid(background, darkText) {
|
|
6
7
|
const pair = accessibleSolid(background, { dark: darkText });
|
|
@@ -152,8 +153,9 @@ export const defaultThemeColors = {
|
|
|
152
153
|
monochrome: false,
|
|
153
154
|
};
|
|
154
155
|
/**
|
|
155
|
-
* Generates the light and dark theme objects
|
|
156
|
-
* fall back to the neutral scale so a
|
|
156
|
+
* Generates the light and dark theme objects, with their primary and inverse
|
|
157
|
+
* sub-themes. Missing `secondary`/`accent` fall back to the neutral scale so a
|
|
158
|
+
* single `primary` is enough to brand an app.
|
|
157
159
|
*/
|
|
158
160
|
export function createThemeColors(input = {}) {
|
|
159
161
|
const neutral = input.neutral ?? defaultThemeColors.neutral;
|
|
@@ -164,10 +166,10 @@ export function createThemeColors(input = {}) {
|
|
|
164
166
|
...stripUndefined(input),
|
|
165
167
|
neutral,
|
|
166
168
|
};
|
|
167
|
-
return {
|
|
169
|
+
return withSubThemes({
|
|
168
170
|
light: { ...buildMode('light', resolved), ...input.overrides?.light },
|
|
169
171
|
dark: { ...buildMode('dark', resolved), ...input.overrides?.dark },
|
|
170
|
-
};
|
|
172
|
+
});
|
|
171
173
|
}
|
|
172
174
|
function stripUndefined(value) {
|
|
173
175
|
return Object.fromEntries(Object.entries(value).filter(([key, v]) => v !== undefined && key !== 'overrides'));
|
package/dist/themes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1F,OAAO,EAAsD,YAAY,EAAE,MAAM,YAAY,CAAA;AAC7F,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@advui/theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"description": "Design tokens, color presets and the Tamagui config factory for Adv UI.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@advui/utils": "0.
|
|
38
|
+
"@advui/utils": "0.11.0",
|
|
39
39
|
"@material/material-color-utilities": "0.3.0",
|
|
40
40
|
"@tamagui/animations-css": "2.7.7",
|
|
41
41
|
"@tamagui/animations-react-native": "2.7.7",
|
package/src/config.ts
CHANGED
|
@@ -4,7 +4,8 @@ import { type FontFamilies, type FontScale, createUniversalFonts } from './fonts
|
|
|
4
4
|
import { media, mediaQueryDefaultActive } from './media'
|
|
5
5
|
import { type ThemePresetName, themePresets } from './presets'
|
|
6
6
|
import { shorthands } from './shorthands'
|
|
7
|
-
import { type
|
|
7
|
+
import { type ModeThemes, type SubThemes, withSubThemes } from './subThemes'
|
|
8
|
+
import { type ThemeColorsInput, createThemeColors } from './themes'
|
|
8
9
|
import { type RadiusInput, createUniversalTokens } from './tokens'
|
|
9
10
|
|
|
10
11
|
export interface UniversalConfigOptions {
|
|
@@ -24,7 +25,7 @@ export interface UniversalConfigOptions {
|
|
|
24
25
|
* Complete light and dark themes, e.g. from `material()` in
|
|
25
26
|
* `@advui/theme/material`. Replaces `preset` and `colors`.
|
|
26
27
|
*/
|
|
27
|
-
themes?:
|
|
28
|
+
themes?: ModeThemes & Partial<SubThemes>
|
|
28
29
|
/**
|
|
29
30
|
* Android only: pressing a button, chip, tab or list row shows the native
|
|
30
31
|
* ripple instead of darkening it. `material()` turns it on. Default: false.
|
|
@@ -53,7 +54,10 @@ export function getUniversalSettings(config: object): UniversalSettings {
|
|
|
53
54
|
*/
|
|
54
55
|
export function createUniversalConfig(options: UniversalConfigOptions = {}) {
|
|
55
56
|
const { preset = 'indigo', colors, radius = 'md', fontScale = 'default', fonts } = options
|
|
56
|
-
|
|
57
|
+
// Hand-made light and dark themes get the primary and inverse sub-themes too.
|
|
58
|
+
const themes = options.themes
|
|
59
|
+
? withSubThemes(options.themes)
|
|
60
|
+
: createThemeColors({ ...themePresets[preset].colors, ...colors })
|
|
57
61
|
|
|
58
62
|
const config = createTamagui({
|
|
59
63
|
tokens: createUniversalTokens({ radius }),
|
package/src/index.ts
CHANGED
|
@@ -23,6 +23,7 @@ export {
|
|
|
23
23
|
export { themePresetNames, themePresets, type ThemePreset, type ThemePresetName } from './presets'
|
|
24
24
|
export { shadows, type ShadowName } from './shadows'
|
|
25
25
|
export { shorthands } from './shorthands'
|
|
26
|
+
export { primarySurfaceTheme, withSubThemes, type ModeThemes, type SubThemes } from './subThemes'
|
|
26
27
|
export {
|
|
27
28
|
createThemeColors,
|
|
28
29
|
defaultThemeColors,
|
package/src/material.ts
CHANGED
|
@@ -20,6 +20,7 @@ import { ensureContrast, parseColor, toHex, withAlpha } from '@advui/utils'
|
|
|
20
20
|
import type { UniversalConfigOptions } from './config'
|
|
21
21
|
import type { FontFamilies } from './fonts'
|
|
22
22
|
import { chartColors } from './chart'
|
|
23
|
+
import { withSubThemes } from './subThemes'
|
|
23
24
|
import type { ColorMode, GeneratedThemes, ThemeValues } from './themes'
|
|
24
25
|
import type { RadiusOverrides } from './tokens'
|
|
25
26
|
|
|
@@ -221,10 +222,10 @@ export function createMaterialThemes(options: MaterialOptions = {}): GeneratedTh
|
|
|
221
222
|
info: customColor(source, { name: 'info', value: argbFromHex(colors.info), blend: true }),
|
|
222
223
|
}
|
|
223
224
|
const scheme = (isDark: boolean) => new SchemeTonalSpot(Hct.fromInt(source), isDark, 0)
|
|
224
|
-
return {
|
|
225
|
+
return withSubThemes({
|
|
225
226
|
light: { ...buildMode(scheme(false), 'light', status), ...options.overrides?.light },
|
|
226
227
|
dark: { ...buildMode(scheme(true), 'dark', status), ...options.overrides?.dark },
|
|
227
|
-
}
|
|
228
|
+
})
|
|
228
229
|
}
|
|
229
230
|
|
|
230
231
|
/**
|
package/src/subThemes.ts
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { contrastRatio, mix, withAlpha } from '@advui/utils'
|
|
2
|
+
import type { ThemeValues } from './themes'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* The light and dark themes every Adv UI config has. These are type aliases,
|
|
6
|
+
* not interfaces, because Tamagui's config needs an index signature.
|
|
7
|
+
*/
|
|
8
|
+
export type ModeThemes = {
|
|
9
|
+
light: ThemeValues
|
|
10
|
+
dark: ThemeValues
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Sub-themes for surfaces that change the text color under them. Tamagui
|
|
15
|
+
* resolves `<Theme name="primary">` to `light_primary` or `dark_primary`, so
|
|
16
|
+
* the children of a primary or inverse Section stay readable in both modes,
|
|
17
|
+
* including during SSR.
|
|
18
|
+
*/
|
|
19
|
+
export type SubThemes = {
|
|
20
|
+
/** Content on a `$primary` surface, such as a call-to-action band. */
|
|
21
|
+
light_primary: ThemeValues
|
|
22
|
+
dark_primary: ThemeValues
|
|
23
|
+
/** Content on the other mode's surface: dark in light mode, light in dark mode. */
|
|
24
|
+
light_inverse: ThemeValues
|
|
25
|
+
dark_inverse: ThemeValues
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* The furthest mix of `from` toward `to`, up to `max`, that keeps 4.5:1
|
|
30
|
+
* against every color in `against` (`from` itself when no step does). Moving
|
|
31
|
+
* along the mix keeps the hue, and unlike `ensureContrast` it works on
|
|
32
|
+
* mid-tone brand colors whichever way the text goes.
|
|
33
|
+
*/
|
|
34
|
+
function furthest(from: string, to: string, max: number, against: string[]) {
|
|
35
|
+
for (let amount = max; amount > 0; amount -= 0.01) {
|
|
36
|
+
const color = mix(from, to, amount)
|
|
37
|
+
if (against.every((other) => contrastRatio(other, color) >= 4.5)) return color
|
|
38
|
+
}
|
|
39
|
+
return from
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* A theme for content on `t.primary`: its text is `primaryForeground`, raised
|
|
44
|
+
* surfaces and borders are mixed toward it, and a primary button inverts
|
|
45
|
+
* (foreground-colored fill, primary-colored text). Every text pair keeps
|
|
46
|
+
* WCAG AA contrast, because `primaryForeground` already does on `primary`.
|
|
47
|
+
*/
|
|
48
|
+
export function primarySurfaceTheme(t: ThemeValues): ThemeValues {
|
|
49
|
+
const surface = t.primary
|
|
50
|
+
const text = t.primaryForeground
|
|
51
|
+
// Cards on the band are a step toward the text, as long as the text still reads on them.
|
|
52
|
+
const raised = furthest(surface, text, 0.12, [text])
|
|
53
|
+
// Muted text is a step toward the band, readable on the band and on cards.
|
|
54
|
+
const muted = furthest(text, surface, 0.3, [surface, raised])
|
|
55
|
+
const line = mix(surface, text, 0.35)
|
|
56
|
+
return {
|
|
57
|
+
...t,
|
|
58
|
+
background: surface,
|
|
59
|
+
backgroundHover: t.primaryHover,
|
|
60
|
+
backgroundPress: t.primaryPress,
|
|
61
|
+
backgroundFocus: t.primaryHover,
|
|
62
|
+
backgroundStrong: t.primaryPress,
|
|
63
|
+
backgroundTransparent: withAlpha(surface, 0),
|
|
64
|
+
color: text,
|
|
65
|
+
colorHover: text,
|
|
66
|
+
colorPress: muted,
|
|
67
|
+
colorFocus: text,
|
|
68
|
+
colorTransparent: withAlpha(text, 0),
|
|
69
|
+
borderColor: line,
|
|
70
|
+
borderColorHover: mix(surface, text, 0.5),
|
|
71
|
+
borderColorPress: mix(surface, text, 0.5),
|
|
72
|
+
borderColorFocus: text,
|
|
73
|
+
placeholderColor: muted,
|
|
74
|
+
outlineColor: text,
|
|
75
|
+
|
|
76
|
+
foreground: text,
|
|
77
|
+
muted: raised,
|
|
78
|
+
mutedForeground: muted,
|
|
79
|
+
card: raised,
|
|
80
|
+
cardForeground: text,
|
|
81
|
+
border: line,
|
|
82
|
+
borderStrong: mix(surface, text, 0.5),
|
|
83
|
+
input: mix(surface, text, 0.5),
|
|
84
|
+
ring: text,
|
|
85
|
+
|
|
86
|
+
primary: text,
|
|
87
|
+
primaryHover: mix(text, surface, 0.1),
|
|
88
|
+
primaryPress: mix(text, surface, 0.18),
|
|
89
|
+
primaryForeground: surface,
|
|
90
|
+
primaryText: text,
|
|
91
|
+
inversePrimary: surface,
|
|
92
|
+
primarySoft: raised,
|
|
93
|
+
primarySoftHover: mix(surface, text, 0.2),
|
|
94
|
+
primarySoftForeground: text,
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/** Adds the primary and inverse sub-themes to a pair of light and dark themes. */
|
|
99
|
+
export function withSubThemes<T extends ModeThemes>(themes: T): T & SubThemes {
|
|
100
|
+
return {
|
|
101
|
+
light_primary: primarySurfaceTheme(themes.light),
|
|
102
|
+
dark_primary: primarySurfaceTheme(themes.dark),
|
|
103
|
+
light_inverse: themes.dark,
|
|
104
|
+
dark_inverse: themes.light,
|
|
105
|
+
// Sub-themes passed in win, so an app can design its own.
|
|
106
|
+
...themes,
|
|
107
|
+
}
|
|
108
|
+
}
|
package/src/themes.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { accessibleSolid, adjustLightness, ensureContrast, withAlpha } from '@advui/utils'
|
|
2
2
|
import { type ColorScale, type ColorSource, type ScaleSteps, resolveScale } from './palettes'
|
|
3
3
|
import { chartColors } from './chart'
|
|
4
|
+
import { type ModeThemes, type SubThemes, withSubThemes } from './subThemes'
|
|
4
5
|
|
|
5
6
|
export type ColorMode = 'light' | 'dark'
|
|
6
7
|
|
|
@@ -143,10 +144,8 @@ export interface ThemeColorsInput {
|
|
|
143
144
|
overrides?: Partial<Record<ColorMode, Partial<ThemeValues>>>
|
|
144
145
|
}
|
|
145
146
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
dark: ThemeValues
|
|
149
|
-
}
|
|
147
|
+
/** Light and dark themes, plus the primary and inverse sub-themes (see `withSubThemes`). */
|
|
148
|
+
export type GeneratedThemes = ModeThemes & SubThemes
|
|
150
149
|
|
|
151
150
|
const WHITE = '#ffffff'
|
|
152
151
|
|
|
@@ -315,8 +314,9 @@ export const defaultThemeColors: Required<Omit<ThemeColorsInput, 'overrides'>> =
|
|
|
315
314
|
}
|
|
316
315
|
|
|
317
316
|
/**
|
|
318
|
-
* Generates the light and dark theme objects
|
|
319
|
-
* fall back to the neutral scale so a
|
|
317
|
+
* Generates the light and dark theme objects, with their primary and inverse
|
|
318
|
+
* sub-themes. Missing `secondary`/`accent` fall back to the neutral scale so a
|
|
319
|
+
* single `primary` is enough to brand an app.
|
|
320
320
|
*/
|
|
321
321
|
export function createThemeColors(input: ThemeColorsInput = {}): GeneratedThemes {
|
|
322
322
|
const neutral = input.neutral ?? defaultThemeColors.neutral
|
|
@@ -328,10 +328,10 @@ export function createThemeColors(input: ThemeColorsInput = {}): GeneratedThemes
|
|
|
328
328
|
neutral,
|
|
329
329
|
} as Required<Omit<ThemeColorsInput, 'overrides'>>
|
|
330
330
|
|
|
331
|
-
return {
|
|
331
|
+
return withSubThemes({
|
|
332
332
|
light: { ...buildMode('light', resolved), ...input.overrides?.light },
|
|
333
333
|
dark: { ...buildMode('dark', resolved), ...input.overrides?.dark },
|
|
334
|
-
}
|
|
334
|
+
})
|
|
335
335
|
}
|
|
336
336
|
|
|
337
337
|
function stripUndefined<T extends object>(value: T): Partial<T> {
|