@advui/theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +49 -0
- package/README.md +23 -0
- package/dist/animations.d.ts +18 -0
- package/dist/animations.d.ts.map +1 -0
- package/dist/animations.js +25 -0
- package/dist/animations.js.map +1 -0
- package/dist/animations.native.d.ts +75 -0
- package/dist/animations.native.d.ts.map +1 -0
- package/dist/animations.native.js +21 -0
- package/dist/animations.native.js.map +1 -0
- package/dist/config.d.ts +427 -0
- package/dist/config.d.ts.map +1 -0
- package/dist/config.js +39 -0
- package/dist/config.js.map +1 -0
- package/dist/fonts.d.ts +80 -0
- package/dist/fonts.d.ts.map +1 -0
- package/dist/fonts.js +54 -0
- package/dist/fonts.js.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +11 -0
- package/dist/index.js.map +1 -0
- package/dist/media.d.ts +59 -0
- package/dist/media.d.ts.map +1 -0
- package/dist/media.js +48 -0
- package/dist/media.js.map +1 -0
- package/dist/palettes.d.ts +46 -0
- package/dist/palettes.d.ts.map +1 -0
- package/dist/palettes.js +64 -0
- package/dist/palettes.js.map +1 -0
- package/dist/presets.d.ts +91 -0
- package/dist/presets.d.ts.map +1 -0
- package/dist/presets.js +54 -0
- package/dist/presets.js.map +1 -0
- package/dist/shadows.d.ts +60 -0
- package/dist/shadows.d.ts.map +1 -0
- package/dist/shadows.js +44 -0
- package/dist/shadows.js.map +1 -0
- package/dist/shorthands.d.ts +37 -0
- package/dist/shorthands.d.ts.map +1 -0
- package/dist/shorthands.js +37 -0
- package/dist/shorthands.js.map +1 -0
- package/dist/themes.d.ts +129 -0
- package/dist/themes.d.ts.map +1 -0
- package/dist/themes.js +169 -0
- package/dist/themes.js.map +1 -0
- package/dist/tokens.d.ts +359 -0
- package/dist/tokens.d.ts.map +1 -0
- package/dist/tokens.js +109 -0
- package/dist/tokens.js.map +1 -0
- package/package.json +63 -0
- package/src/animations.native.ts +21 -0
- package/src/animations.ts +26 -0
- package/src/config.ts +55 -0
- package/src/fonts.ts +89 -0
- package/src/index.ts +37 -0
- package/src/media.ts +55 -0
- package/src/palettes.ts +123 -0
- package/src/presets.ts +64 -0
- package/src/shadows.ts +45 -0
- package/src/shorthands.ts +36 -0
- package/src/themes.ts +324 -0
- package/src/tokens.ts +123 -0
|
@@ -0,0 +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,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,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC7B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC9B,KAAK,CAAC,EAAE,YAAY,CAAA;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,sBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAwBzE;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAA"}
|
package/dist/config.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { createTamagui } from 'tamagui';
|
|
2
|
+
import { animations } from './animations';
|
|
3
|
+
import { createUniversalFonts } from './fonts';
|
|
4
|
+
import { media, mediaQueryDefaultActive } from './media';
|
|
5
|
+
import { themePresets } from './presets';
|
|
6
|
+
import { shorthands } from './shorthands';
|
|
7
|
+
import { createThemeColors } from './themes';
|
|
8
|
+
import { createUniversalTokens } from './tokens';
|
|
9
|
+
/**
|
|
10
|
+
* Builds a complete Tamagui config (tokens, light/dark themes, fonts, media
|
|
11
|
+
* queries, animations). Call once at app startup and pass to `UniversalProvider`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* export const config = createUniversalConfig({ preset: 'violet', radius: 'lg' })
|
|
15
|
+
*/
|
|
16
|
+
export function createUniversalConfig(options = {}) {
|
|
17
|
+
const { preset = 'indigo', colors, radius = 'md', fontScale = 'default', fonts } = options;
|
|
18
|
+
const themes = createThemeColors({ ...themePresets[preset].colors, ...colors });
|
|
19
|
+
return createTamagui({
|
|
20
|
+
tokens: createUniversalTokens({ radius }),
|
|
21
|
+
themes,
|
|
22
|
+
fonts: createUniversalFonts({ scale: fontScale, families: fonts }),
|
|
23
|
+
media,
|
|
24
|
+
shorthands,
|
|
25
|
+
animations,
|
|
26
|
+
selectionStyles: (theme) => theme.primarySoft ? { backgroundColor: theme.primarySoft, color: theme.foreground } : null,
|
|
27
|
+
settings: {
|
|
28
|
+
defaultFont: 'body',
|
|
29
|
+
mediaQueryDefaultActive,
|
|
30
|
+
fastSchemeChange: true,
|
|
31
|
+
shouldAddPrefersColorThemes: true,
|
|
32
|
+
addThemeClassName: 'html',
|
|
33
|
+
allowedStyleValues: 'somewhat-strict-web',
|
|
34
|
+
onlyAllowShorthands: false,
|
|
35
|
+
styleCompat: 'web',
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=config.js.map
|
|
@@ -0,0 +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,EAAyB,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAclE;;;;;;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,MAAM,MAAM,GAAG,iBAAiB,CAAC,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,CAAA;IAE/E,OAAO,aAAa,CAAC;QACnB,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;AACJ,CAAC"}
|
package/dist/fonts.d.ts
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
export declare const fontScales: {
|
|
2
|
+
readonly compact: 0.9375;
|
|
3
|
+
readonly default: 1;
|
|
4
|
+
readonly large: 1.125;
|
|
5
|
+
};
|
|
6
|
+
export type FontScale = keyof typeof fontScales;
|
|
7
|
+
export interface FontFamilies {
|
|
8
|
+
/** CSS font stack on web. */
|
|
9
|
+
body?: string;
|
|
10
|
+
heading?: string;
|
|
11
|
+
mono?: string;
|
|
12
|
+
/** Loaded font family names on iOS/Android (defaults to the platform system font). */
|
|
13
|
+
native?: {
|
|
14
|
+
body?: string;
|
|
15
|
+
heading?: string;
|
|
16
|
+
mono?: string;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
export declare function createUniversalFonts({ scale, families, }?: {
|
|
20
|
+
scale?: FontScale | number;
|
|
21
|
+
families?: FontFamilies;
|
|
22
|
+
}): {
|
|
23
|
+
body: {
|
|
24
|
+
family: string;
|
|
25
|
+
size: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
26
|
+
lineHeight: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
27
|
+
weight: {
|
|
28
|
+
readonly 1: "400";
|
|
29
|
+
readonly 4: "400";
|
|
30
|
+
readonly 5: "500";
|
|
31
|
+
readonly 6: "600";
|
|
32
|
+
readonly 7: "700";
|
|
33
|
+
readonly true: "400";
|
|
34
|
+
};
|
|
35
|
+
letterSpacing: {
|
|
36
|
+
1: number;
|
|
37
|
+
true: number;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
heading: {
|
|
41
|
+
family: string;
|
|
42
|
+
size: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
43
|
+
lineHeight: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
44
|
+
weight: {
|
|
45
|
+
true: string;
|
|
46
|
+
1: "400";
|
|
47
|
+
4: "400";
|
|
48
|
+
5: "500";
|
|
49
|
+
6: "600";
|
|
50
|
+
7: "700";
|
|
51
|
+
};
|
|
52
|
+
letterSpacing: {
|
|
53
|
+
1: number;
|
|
54
|
+
6: number;
|
|
55
|
+
7: number;
|
|
56
|
+
8: number;
|
|
57
|
+
9: number;
|
|
58
|
+
10: number;
|
|
59
|
+
true: number;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
mono: {
|
|
63
|
+
family: string;
|
|
64
|
+
size: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
65
|
+
lineHeight: Record<1 | 10 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "true", number>;
|
|
66
|
+
weight: {
|
|
67
|
+
readonly 1: "400";
|
|
68
|
+
readonly 4: "400";
|
|
69
|
+
readonly 5: "500";
|
|
70
|
+
readonly 6: "600";
|
|
71
|
+
readonly 7: "700";
|
|
72
|
+
readonly true: "400";
|
|
73
|
+
};
|
|
74
|
+
letterSpacing: {
|
|
75
|
+
1: number;
|
|
76
|
+
true: number;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
//# sourceMappingURL=fonts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;CAIb,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAA;AA+B/C,MAAM,WAAW,YAAY;IAC3B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAiB,EACjB,QAAa,GACd,GAAE;IAAE,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,YAAY,CAAA;CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqC9D"}
|
package/dist/fonts.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { createFont, isWeb } from 'tamagui';
|
|
2
|
+
export const fontScales = {
|
|
3
|
+
compact: 0.9375,
|
|
4
|
+
default: 1,
|
|
5
|
+
large: 1.125,
|
|
6
|
+
};
|
|
7
|
+
/** Type scale in px: `$1` xs(12) · `$2` sm(14) · `$3` base(16) · … · `$10` 6xl(60). */
|
|
8
|
+
const baseSizes = {
|
|
9
|
+
1: 12,
|
|
10
|
+
2: 14,
|
|
11
|
+
3: 16,
|
|
12
|
+
4: 18,
|
|
13
|
+
5: 20,
|
|
14
|
+
6: 24,
|
|
15
|
+
7: 30,
|
|
16
|
+
8: 36,
|
|
17
|
+
9: 48,
|
|
18
|
+
10: 60,
|
|
19
|
+
true: 16,
|
|
20
|
+
};
|
|
21
|
+
const systemStack = '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
|
|
22
|
+
const monoStack = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace';
|
|
23
|
+
function mapSizes(fn) {
|
|
24
|
+
return Object.fromEntries(Object.entries(baseSizes).map(([key, px]) => [key, fn(px)]));
|
|
25
|
+
}
|
|
26
|
+
export function createUniversalFonts({ scale = 'default', families = {}, } = {}) {
|
|
27
|
+
const factor = typeof scale === 'number' ? scale : fontScales[scale];
|
|
28
|
+
const size = mapSizes((px) => Math.round(px * factor));
|
|
29
|
+
const pick = (web, native, fallback) => isWeb ? web : (native ?? fallback);
|
|
30
|
+
const weight = { 1: '400', 4: '400', 5: '500', 6: '600', 7: '700', true: '400' };
|
|
31
|
+
const body = createFont({
|
|
32
|
+
family: pick(families.body ?? systemStack, families.native?.body, 'System'),
|
|
33
|
+
size,
|
|
34
|
+
lineHeight: mapSizes((px) => Math.round(px * factor * (px <= 20 ? 1.5 : 1.3))),
|
|
35
|
+
weight,
|
|
36
|
+
letterSpacing: { 1: 0, true: 0 },
|
|
37
|
+
});
|
|
38
|
+
const heading = createFont({
|
|
39
|
+
family: pick(families.heading ?? families.body ?? systemStack, families.native?.heading, 'System'),
|
|
40
|
+
size,
|
|
41
|
+
lineHeight: mapSizes((px) => Math.round(px * factor * (px <= 20 ? 1.4 : 1.2))),
|
|
42
|
+
weight: { ...weight, true: '600' },
|
|
43
|
+
letterSpacing: { 1: 0, 6: -0.3, 7: -0.5, 8: -0.7, 9: -1, 10: -1.2, true: 0 },
|
|
44
|
+
});
|
|
45
|
+
const mono = createFont({
|
|
46
|
+
family: pick(families.mono ?? monoStack, families.native?.mono, 'monospace'),
|
|
47
|
+
size: mapSizes((px) => Math.round(px * factor * 0.92)),
|
|
48
|
+
lineHeight: mapSizes((px) => Math.round(px * factor * 1.6)),
|
|
49
|
+
weight,
|
|
50
|
+
letterSpacing: { 1: 0, true: 0 },
|
|
51
|
+
});
|
|
52
|
+
return { body, heading, mono };
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=fonts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { animations } from './animations';
|
|
2
|
+
export { createUniversalConfig, type UniversalConfig, type UniversalConfigOptions } from './config';
|
|
3
|
+
export { createUniversalFonts, fontScales, type FontFamilies, type FontScale } from './fonts';
|
|
4
|
+
export { breakpoints, media, mediaQueryDefaultActive } from './media';
|
|
5
|
+
export { generateScale, neutralScaleNames, resolveScale, scales, type ColorScale, type ColorSource, type NeutralScaleName, type ScaleName, type ScaleSteps, } from './palettes';
|
|
6
|
+
export { themePresetNames, themePresets, type ThemePreset, type ThemePresetName } from './presets';
|
|
7
|
+
export { shadows, type ShadowName } from './shadows';
|
|
8
|
+
export { shorthands } from './shorthands';
|
|
9
|
+
export { createThemeColors, defaultThemeColors, type ColorMode, type GeneratedThemes, type ThemeColorsInput, type ThemeKey, type ThemeValues, } from './themes';
|
|
10
|
+
export { colorTokens, createRadius, createUniversalTokens, radiusScales, size, space, zIndex, type RadiusScale, } from './tokens';
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +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,qBAAqB,EAAE,KAAK,eAAe,EAAE,KAAK,sBAAsB,EAAE,MAAM,UAAU,CAAA;AACnG,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,GACjB,MAAM,UAAU,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { animations } from './animations';
|
|
2
|
+
export { createUniversalConfig } from './config';
|
|
3
|
+
export { createUniversalFonts, fontScales } from './fonts';
|
|
4
|
+
export { breakpoints, media, mediaQueryDefaultActive } from './media';
|
|
5
|
+
export { generateScale, neutralScaleNames, resolveScale, scales, } from './palettes';
|
|
6
|
+
export { themePresetNames, themePresets } from './presets';
|
|
7
|
+
export { shadows } from './shadows';
|
|
8
|
+
export { shorthands } from './shorthands';
|
|
9
|
+
export { createThemeColors, defaultThemeColors, } from './themes';
|
|
10
|
+
export { colorTokens, createRadius, createUniversalTokens, radiusScales, size, space, zIndex, } from './tokens';
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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,qBAAqB,EAAqD,MAAM,UAAU,CAAA;AACnG,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,GAEP,MAAM,UAAU,CAAA"}
|
package/dist/media.d.ts
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/** Mobile-first breakpoints (px). `xxl` is the "2xl" breakpoint. */
|
|
2
|
+
export declare const breakpoints: {
|
|
3
|
+
readonly xs: 460;
|
|
4
|
+
readonly sm: 640;
|
|
5
|
+
readonly md: 768;
|
|
6
|
+
readonly lg: 1024;
|
|
7
|
+
readonly xl: 1280;
|
|
8
|
+
readonly xxl: 1536;
|
|
9
|
+
};
|
|
10
|
+
type MediaQuery = {
|
|
11
|
+
[key: string]: string | number;
|
|
12
|
+
};
|
|
13
|
+
export declare const media: {
|
|
14
|
+
readonly touchable: MediaQuery;
|
|
15
|
+
readonly hoverable: MediaQuery;
|
|
16
|
+
readonly 'max-xxl': MediaQuery;
|
|
17
|
+
readonly 'max-xl': MediaQuery;
|
|
18
|
+
readonly 'max-lg': MediaQuery;
|
|
19
|
+
readonly 'max-md': MediaQuery;
|
|
20
|
+
readonly 'max-sm': MediaQuery;
|
|
21
|
+
readonly 'max-xs': MediaQuery;
|
|
22
|
+
readonly xs: {
|
|
23
|
+
readonly minWidth: 460;
|
|
24
|
+
};
|
|
25
|
+
readonly sm: {
|
|
26
|
+
readonly minWidth: 640;
|
|
27
|
+
};
|
|
28
|
+
readonly md: {
|
|
29
|
+
readonly minWidth: 768;
|
|
30
|
+
};
|
|
31
|
+
readonly lg: {
|
|
32
|
+
readonly minWidth: 1024;
|
|
33
|
+
};
|
|
34
|
+
readonly xl: {
|
|
35
|
+
readonly minWidth: 1280;
|
|
36
|
+
};
|
|
37
|
+
readonly xxl: {
|
|
38
|
+
readonly minWidth: 1536;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
/** Assumed active queries during SSR / first render (a phone-sized viewport). */
|
|
42
|
+
export declare const mediaQueryDefaultActive: {
|
|
43
|
+
touchable: boolean;
|
|
44
|
+
hoverable: boolean;
|
|
45
|
+
'max-xxl': boolean;
|
|
46
|
+
'max-xl': boolean;
|
|
47
|
+
'max-lg': boolean;
|
|
48
|
+
'max-md': boolean;
|
|
49
|
+
'max-sm': boolean;
|
|
50
|
+
'max-xs': boolean;
|
|
51
|
+
xs: boolean;
|
|
52
|
+
sm: boolean;
|
|
53
|
+
md: boolean;
|
|
54
|
+
lg: boolean;
|
|
55
|
+
xl: boolean;
|
|
56
|
+
xxl: boolean;
|
|
57
|
+
};
|
|
58
|
+
export {};
|
|
59
|
+
//# sourceMappingURL=media.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../src/media.ts"],"names":[],"mappings":"AAEA,oEAAoE;AACpE,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAA;AAEV,KAAK,UAAU,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAKpD,eAAO,MAAM,KAAK;wBAEgD,UAAU;wBAEb,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;CAe/D,CAAA;AAEV,iFAAiF;AACjF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;CAenC,CAAA"}
|
package/dist/media.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { isWeb } from 'tamagui';
|
|
2
|
+
/** Mobile-first breakpoints (px). `xxl` is the "2xl" breakpoint. */
|
|
3
|
+
export const breakpoints = {
|
|
4
|
+
xs: 460,
|
|
5
|
+
sm: 640,
|
|
6
|
+
md: 768,
|
|
7
|
+
lg: 1024,
|
|
8
|
+
xl: 1280,
|
|
9
|
+
xxl: 1536,
|
|
10
|
+
};
|
|
11
|
+
const below = (px) => ({ maxWidth: px - (isWeb ? 0.02 : 1) });
|
|
12
|
+
// Order matters: later keys win when several queries match.
|
|
13
|
+
export const media = {
|
|
14
|
+
// always true on native (touch screens), pointer-based on web
|
|
15
|
+
touchable: (isWeb ? { pointer: 'coarse' } : { minWidth: 0 }),
|
|
16
|
+
// never true on native: hover-only UI must have a touch alternative
|
|
17
|
+
hoverable: (isWeb ? { hover: 'hover' } : { maxWidth: 0 }),
|
|
18
|
+
'max-xxl': below(breakpoints.xxl),
|
|
19
|
+
'max-xl': below(breakpoints.xl),
|
|
20
|
+
'max-lg': below(breakpoints.lg),
|
|
21
|
+
'max-md': below(breakpoints.md),
|
|
22
|
+
'max-sm': below(breakpoints.sm),
|
|
23
|
+
'max-xs': below(breakpoints.xs),
|
|
24
|
+
xs: { minWidth: breakpoints.xs },
|
|
25
|
+
sm: { minWidth: breakpoints.sm },
|
|
26
|
+
md: { minWidth: breakpoints.md },
|
|
27
|
+
lg: { minWidth: breakpoints.lg },
|
|
28
|
+
xl: { minWidth: breakpoints.xl },
|
|
29
|
+
xxl: { minWidth: breakpoints.xxl },
|
|
30
|
+
};
|
|
31
|
+
/** Assumed active queries during SSR / first render (a phone-sized viewport). */
|
|
32
|
+
export const mediaQueryDefaultActive = {
|
|
33
|
+
touchable: !isWeb,
|
|
34
|
+
hoverable: isWeb,
|
|
35
|
+
'max-xxl': true,
|
|
36
|
+
'max-xl': true,
|
|
37
|
+
'max-lg': true,
|
|
38
|
+
'max-md': true,
|
|
39
|
+
'max-sm': true,
|
|
40
|
+
'max-xs': false,
|
|
41
|
+
xs: true,
|
|
42
|
+
sm: false,
|
|
43
|
+
md: false,
|
|
44
|
+
lg: false,
|
|
45
|
+
xl: false,
|
|
46
|
+
xxl: false,
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=media.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media.js","sourceRoot":"","sources":["../src/media.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,oEAAoE;AACpE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACD,CAAA;AAIV,MAAM,KAAK,GAAG,CAAC,EAAU,EAAc,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;AAEjF,4DAA4D;AAC5D,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,8DAA8D;IAC9D,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAe;IAC1E,oEAAoE;IACpE,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAe;IAEvE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;IAE/B,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;IAChC,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE;IAChC,GAAG,EAAE,EAAE,QAAQ,EAAE,WAAW,CAAC,GAAG,EAAE;CAC1B,CAAA;AAEV,iFAAiF;AACjF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,SAAS,EAAE,CAAC,KAAK;IACjB,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,GAAG,EAAE,KAAK;CACX,CAAA"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
export type ScaleSteps = readonly [
|
|
2
|
+
string,
|
|
3
|
+
string,
|
|
4
|
+
string,
|
|
5
|
+
string,
|
|
6
|
+
string,
|
|
7
|
+
string,
|
|
8
|
+
string,
|
|
9
|
+
string,
|
|
10
|
+
string,
|
|
11
|
+
string,
|
|
12
|
+
string,
|
|
13
|
+
string
|
|
14
|
+
];
|
|
15
|
+
export interface ColorScale {
|
|
16
|
+
light: ScaleSteps;
|
|
17
|
+
dark: ScaleSteps;
|
|
18
|
+
}
|
|
19
|
+
export declare const scales: {
|
|
20
|
+
readonly indigo: ColorScale;
|
|
21
|
+
readonly blue: ColorScale;
|
|
22
|
+
readonly violet: ColorScale;
|
|
23
|
+
readonly green: ColorScale;
|
|
24
|
+
readonly teal: ColorScale;
|
|
25
|
+
readonly orange: ColorScale;
|
|
26
|
+
readonly amber: ColorScale;
|
|
27
|
+
readonly crimson: ColorScale;
|
|
28
|
+
readonly red: ColorScale;
|
|
29
|
+
readonly gray: ColorScale;
|
|
30
|
+
readonly slate: ColorScale;
|
|
31
|
+
readonly mauve: ColorScale;
|
|
32
|
+
readonly sage: ColorScale;
|
|
33
|
+
readonly sand: ColorScale;
|
|
34
|
+
};
|
|
35
|
+
export type ScaleName = keyof typeof scales;
|
|
36
|
+
export declare const neutralScaleNames: readonly ["gray", "slate", "mauve", "sage", "sand"];
|
|
37
|
+
export type NeutralScaleName = (typeof neutralScaleNames)[number];
|
|
38
|
+
/** A named built-in scale, a hex/rgb/hsl color string, or a complete custom scale. */
|
|
39
|
+
export type ColorSource = ScaleName | (string & {}) | ColorScale;
|
|
40
|
+
/**
|
|
41
|
+
* Generates a light + dark 12-step scale around a single brand color. Step 9
|
|
42
|
+
* is the exact input color in both modes, mirroring how Radix scales work.
|
|
43
|
+
*/
|
|
44
|
+
export declare function generateScale(color: string): ColorScale;
|
|
45
|
+
export declare function resolveScale(source: ColorSource): ColorScale;
|
|
46
|
+
//# sourceMappingURL=palettes.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.d.ts","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"AA2CA,MAAM,MAAM,UAAU,GAAG,SAAS;IAChC,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,CAAA;IACjB,IAAI,EAAE,UAAU,CAAA;CACjB;AAQD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAeT,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAA;AAE3C,eAAO,MAAM,iBAAiB,qDAAsD,CAAA;AACpF,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjE,sFAAsF;AACtF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,UAAU,CAAA;AAOhE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAUvD;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,UAAU,CAO5D"}
|
package/dist/palettes.js
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 12-step color scales. Built-in scales come from Radix Colors (MIT, shipped
|
|
3
|
+
* via `@tamagui/colors`), which are hand-tuned separately for light and dark
|
|
4
|
+
* mode — dark mode is designed, not inverted. Custom brand colors are turned
|
|
5
|
+
* into scales with `generateScale`.
|
|
6
|
+
*
|
|
7
|
+
* Step semantics (same as Radix):
|
|
8
|
+
* 1-2 app / subtle backgrounds 3-5 component backgrounds (rest/hover/active)
|
|
9
|
+
* 6-8 borders (subtle/default/hover) 9-10 solid fills (rest/hover)
|
|
10
|
+
* 11 low-contrast text 12 high-contrast text
|
|
11
|
+
*/
|
|
12
|
+
import { amber, amberDark, blue, blueDark, crimson, crimsonDark, gray, grayDark, green, greenDark, indigo, indigoDark, mauve, mauveDark, orange, orangeDark, red, redDark, sage, sageDark, sand, sandDark, slate, slateDark, teal, tealDark, violet, violetDark, } from '@tamagui/colors';
|
|
13
|
+
import { fromOklch, isValidColor, toOklch } from '@advui/utils';
|
|
14
|
+
const steps = (record) => Object.values(record);
|
|
15
|
+
const scale = (light, dark) => ({
|
|
16
|
+
light: steps(light),
|
|
17
|
+
dark: steps(dark),
|
|
18
|
+
});
|
|
19
|
+
export const scales = {
|
|
20
|
+
indigo: scale(indigo, indigoDark),
|
|
21
|
+
blue: scale(blue, blueDark),
|
|
22
|
+
violet: scale(violet, violetDark),
|
|
23
|
+
green: scale(green, greenDark),
|
|
24
|
+
teal: scale(teal, tealDark),
|
|
25
|
+
orange: scale(orange, orangeDark),
|
|
26
|
+
amber: scale(amber, amberDark),
|
|
27
|
+
crimson: scale(crimson, crimsonDark),
|
|
28
|
+
red: scale(red, redDark),
|
|
29
|
+
gray: scale(gray, grayDark),
|
|
30
|
+
slate: scale(slate, slateDark),
|
|
31
|
+
mauve: scale(mauve, mauveDark),
|
|
32
|
+
sage: scale(sage, sageDark),
|
|
33
|
+
sand: scale(sand, sandDark),
|
|
34
|
+
};
|
|
35
|
+
export const neutralScaleNames = ['gray', 'slate', 'mauve', 'sage', 'sand'];
|
|
36
|
+
// Target OKLCH lightness per step, and chroma as a fraction of the base chroma.
|
|
37
|
+
const LIGHT_L = [0.993, 0.982, 0.956, 0.93, 0.9, 0.865, 0.815, 0.745, 0, 0, 0.5, 0.29];
|
|
38
|
+
const DARK_L = [0.175, 0.205, 0.255, 0.295, 0.335, 0.38, 0.44, 0.52, 0, 0, 0.8, 0.93];
|
|
39
|
+
const CHROMA = [0.02, 0.05, 0.12, 0.2, 0.28, 0.36, 0.46, 0.62, 1, 1, 0.85, 0.45];
|
|
40
|
+
/**
|
|
41
|
+
* Generates a light + dark 12-step scale around a single brand color. Step 9
|
|
42
|
+
* is the exact input color in both modes, mirroring how Radix scales work.
|
|
43
|
+
*/
|
|
44
|
+
export function generateScale(color) {
|
|
45
|
+
const base = toOklch(color);
|
|
46
|
+
const build = (targets, hoverShift) => targets.map((l, i) => {
|
|
47
|
+
if (i === 8)
|
|
48
|
+
return fromOklch({ ...base, a: 1 });
|
|
49
|
+
if (i === 9)
|
|
50
|
+
return fromOklch({ ...base, l: base.l + hoverShift, a: 1 });
|
|
51
|
+
return fromOklch({ l, c: base.c * CHROMA[i], h: base.h });
|
|
52
|
+
});
|
|
53
|
+
return { light: build(LIGHT_L, -0.05), dark: build(DARK_L, 0.05) };
|
|
54
|
+
}
|
|
55
|
+
export function resolveScale(source) {
|
|
56
|
+
if (typeof source === 'object')
|
|
57
|
+
return source;
|
|
58
|
+
if (source in scales)
|
|
59
|
+
return scales[source];
|
|
60
|
+
if (isValidColor(source))
|
|
61
|
+
return generateScale(source);
|
|
62
|
+
throw new Error(`[advui] Unknown color "${source}". Use a scale name (${Object.keys(scales).join(', ')}) or a color string.`);
|
|
63
|
+
}
|
|
64
|
+
//# sourceMappingURL=palettes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"palettes.js","sourceRoot":"","sources":["../src/palettes.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import type { ThemeColorsInput } from './themes';
|
|
2
|
+
export interface ThemePreset {
|
|
3
|
+
name: string;
|
|
4
|
+
label: string;
|
|
5
|
+
colors: ThemeColorsInput;
|
|
6
|
+
}
|
|
7
|
+
export declare const themePresets: {
|
|
8
|
+
readonly indigo: {
|
|
9
|
+
readonly name: "indigo";
|
|
10
|
+
readonly label: "Indigo";
|
|
11
|
+
readonly colors: {
|
|
12
|
+
readonly primary: "indigo";
|
|
13
|
+
readonly neutral: "slate";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
readonly blue: {
|
|
17
|
+
readonly name: "blue";
|
|
18
|
+
readonly label: "Blue";
|
|
19
|
+
readonly colors: {
|
|
20
|
+
readonly primary: "blue";
|
|
21
|
+
readonly neutral: "slate";
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
readonly violet: {
|
|
25
|
+
readonly name: "violet";
|
|
26
|
+
readonly label: "Violet";
|
|
27
|
+
readonly colors: {
|
|
28
|
+
readonly primary: "violet";
|
|
29
|
+
readonly neutral: "mauve";
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
readonly green: {
|
|
33
|
+
readonly name: "green";
|
|
34
|
+
readonly label: "Green";
|
|
35
|
+
readonly colors: {
|
|
36
|
+
readonly primary: "green";
|
|
37
|
+
readonly neutral: "sage";
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
readonly emerald: {
|
|
41
|
+
readonly name: "emerald";
|
|
42
|
+
readonly label: "Emerald";
|
|
43
|
+
readonly colors: {
|
|
44
|
+
readonly primary: "teal";
|
|
45
|
+
readonly neutral: "sage";
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
readonly orange: {
|
|
49
|
+
readonly name: "orange";
|
|
50
|
+
readonly label: "Orange";
|
|
51
|
+
readonly colors: {
|
|
52
|
+
readonly primary: "orange";
|
|
53
|
+
readonly neutral: "sand";
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
readonly rose: {
|
|
57
|
+
readonly name: "rose";
|
|
58
|
+
readonly label: "Rose";
|
|
59
|
+
readonly colors: {
|
|
60
|
+
readonly primary: "crimson";
|
|
61
|
+
readonly neutral: "mauve";
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
readonly red: {
|
|
65
|
+
readonly name: "red";
|
|
66
|
+
readonly label: "Red";
|
|
67
|
+
readonly colors: {
|
|
68
|
+
readonly primary: "red";
|
|
69
|
+
readonly neutral: "gray";
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
readonly slate: {
|
|
73
|
+
readonly name: "slate";
|
|
74
|
+
readonly label: "Slate";
|
|
75
|
+
readonly colors: {
|
|
76
|
+
readonly neutral: "slate";
|
|
77
|
+
readonly monochrome: true;
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
readonly neutral: {
|
|
81
|
+
readonly name: "neutral";
|
|
82
|
+
readonly label: "Neutral";
|
|
83
|
+
readonly colors: {
|
|
84
|
+
readonly neutral: "gray";
|
|
85
|
+
readonly monochrome: true;
|
|
86
|
+
};
|
|
87
|
+
};
|
|
88
|
+
};
|
|
89
|
+
export type ThemePresetName = keyof typeof themePresets;
|
|
90
|
+
export declare const themePresetNames: ThemePresetName[];
|
|
91
|
+
//# sourceMappingURL=presets.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,gBAAgB,CAAA;CACzB;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDuB,CAAA;AAEhD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAA;AAEvD,eAAO,MAAM,gBAAgB,EAAgC,eAAe,EAAE,CAAA"}
|
package/dist/presets.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
export const themePresets = {
|
|
2
|
+
indigo: {
|
|
3
|
+
name: 'indigo',
|
|
4
|
+
label: 'Indigo',
|
|
5
|
+
colors: { primary: 'indigo', neutral: 'slate' },
|
|
6
|
+
},
|
|
7
|
+
blue: {
|
|
8
|
+
name: 'blue',
|
|
9
|
+
label: 'Blue',
|
|
10
|
+
colors: { primary: 'blue', neutral: 'slate' },
|
|
11
|
+
},
|
|
12
|
+
violet: {
|
|
13
|
+
name: 'violet',
|
|
14
|
+
label: 'Violet',
|
|
15
|
+
colors: { primary: 'violet', neutral: 'mauve' },
|
|
16
|
+
},
|
|
17
|
+
green: {
|
|
18
|
+
name: 'green',
|
|
19
|
+
label: 'Green',
|
|
20
|
+
colors: { primary: 'green', neutral: 'sage' },
|
|
21
|
+
},
|
|
22
|
+
emerald: {
|
|
23
|
+
name: 'emerald',
|
|
24
|
+
label: 'Emerald',
|
|
25
|
+
colors: { primary: 'teal', neutral: 'sage' },
|
|
26
|
+
},
|
|
27
|
+
orange: {
|
|
28
|
+
name: 'orange',
|
|
29
|
+
label: 'Orange',
|
|
30
|
+
colors: { primary: 'orange', neutral: 'sand' },
|
|
31
|
+
},
|
|
32
|
+
rose: {
|
|
33
|
+
name: 'rose',
|
|
34
|
+
label: 'Rose',
|
|
35
|
+
colors: { primary: 'crimson', neutral: 'mauve' },
|
|
36
|
+
},
|
|
37
|
+
red: {
|
|
38
|
+
name: 'red',
|
|
39
|
+
label: 'Red',
|
|
40
|
+
colors: { primary: 'red', neutral: 'gray' },
|
|
41
|
+
},
|
|
42
|
+
slate: {
|
|
43
|
+
name: 'slate',
|
|
44
|
+
label: 'Slate',
|
|
45
|
+
colors: { neutral: 'slate', monochrome: true },
|
|
46
|
+
},
|
|
47
|
+
neutral: {
|
|
48
|
+
name: 'neutral',
|
|
49
|
+
label: 'Neutral',
|
|
50
|
+
colors: { neutral: 'gray', monochrome: true },
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
export const themePresetNames = Object.keys(themePresets);
|
|
54
|
+
//# sourceMappingURL=presets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"presets.js","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE;KAChD;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE;KAC9C;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE;KAChD;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE;KAC9C;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE;KAC7C;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE;KAC/C;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE;KACjD;IACD,GAAG,EAAE;QACH,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE;KAC5C;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE;KAC/C;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;KAC9C;CAC6C,CAAA;AAIhD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAsB,CAAA"}
|