@blinkdotnew/mobile-ui 2.0.0-alpha.17 → 2.0.0-alpha.19
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/index.d.mts +62 -1
- package/dist/index.d.ts +62 -1
- package/dist/index.js +185 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +178 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
|
@@ -7,6 +7,177 @@ var blinkConfig = createTamagui({
|
|
|
7
7
|
|
|
8
8
|
// src/index.ts
|
|
9
9
|
import { defaultConfig as defaultConfig2 } from "@tamagui/config/v5";
|
|
10
|
+
|
|
11
|
+
// src/config/design-themes.ts
|
|
12
|
+
var BLINK_DESIGN_THEMES = {
|
|
13
|
+
"mono": {
|
|
14
|
+
id: "mono",
|
|
15
|
+
name: "Mono",
|
|
16
|
+
description: "Black/white neutral",
|
|
17
|
+
palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
|
|
18
|
+
},
|
|
19
|
+
"ocean-teal": {
|
|
20
|
+
id: "ocean-teal",
|
|
21
|
+
name: "Ocean Teal",
|
|
22
|
+
description: "SaaS, fintech, healthcare",
|
|
23
|
+
palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
|
|
24
|
+
},
|
|
25
|
+
"warm-amber": {
|
|
26
|
+
id: "warm-amber",
|
|
27
|
+
name: "Warm Amber",
|
|
28
|
+
description: "E-commerce, food, hospitality",
|
|
29
|
+
palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
|
|
30
|
+
},
|
|
31
|
+
"rose-coral": {
|
|
32
|
+
id: "rose-coral",
|
|
33
|
+
name: "Rose Coral",
|
|
34
|
+
description: "Lifestyle, beauty, fashion",
|
|
35
|
+
palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
|
|
36
|
+
},
|
|
37
|
+
"lavender": {
|
|
38
|
+
id: "lavender",
|
|
39
|
+
name: "Lavender",
|
|
40
|
+
description: "Creative, wellness, meditation",
|
|
41
|
+
palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
|
|
42
|
+
},
|
|
43
|
+
"glacier": {
|
|
44
|
+
id: "glacier",
|
|
45
|
+
name: "Glacier",
|
|
46
|
+
description: "Professional, corporate, analytics",
|
|
47
|
+
palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
|
|
48
|
+
},
|
|
49
|
+
"forest": {
|
|
50
|
+
id: "forest",
|
|
51
|
+
name: "Forest",
|
|
52
|
+
description: "Sustainability, nature, outdoor",
|
|
53
|
+
palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
|
|
54
|
+
},
|
|
55
|
+
"obsidian": {
|
|
56
|
+
id: "obsidian",
|
|
57
|
+
name: "Obsidian",
|
|
58
|
+
description: "Developer tools, gaming, tech",
|
|
59
|
+
palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
60
|
+
},
|
|
61
|
+
"solar": {
|
|
62
|
+
id: "solar",
|
|
63
|
+
name: "Solar",
|
|
64
|
+
description: "Energy, optimistic, kid-friendly",
|
|
65
|
+
palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
|
|
66
|
+
},
|
|
67
|
+
"orchid": {
|
|
68
|
+
id: "orchid",
|
|
69
|
+
name: "Orchid",
|
|
70
|
+
description: "Beauty, fashion, luxury",
|
|
71
|
+
palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
|
|
72
|
+
},
|
|
73
|
+
"indigo": {
|
|
74
|
+
id: "indigo",
|
|
75
|
+
name: "Indigo",
|
|
76
|
+
description: "Enterprise, fintech, trust",
|
|
77
|
+
palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
|
|
78
|
+
},
|
|
79
|
+
"cosmic-night": {
|
|
80
|
+
id: "cosmic-night",
|
|
81
|
+
name: "Cosmic Night",
|
|
82
|
+
description: "Dark mode, futuristic, gaming",
|
|
83
|
+
palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
|
|
84
|
+
},
|
|
85
|
+
"soft-pop": {
|
|
86
|
+
id: "soft-pop",
|
|
87
|
+
name: "Soft Pop",
|
|
88
|
+
description: "Playful, modern, creative",
|
|
89
|
+
palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
|
|
90
|
+
},
|
|
91
|
+
"neo-brutalism": {
|
|
92
|
+
id: "neo-brutalism",
|
|
93
|
+
name: "Neo Brutalism",
|
|
94
|
+
description: "Bold, striking, artistic",
|
|
95
|
+
palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
|
|
96
|
+
},
|
|
97
|
+
"vintage-paper": {
|
|
98
|
+
id: "vintage-paper",
|
|
99
|
+
name: "Vintage Paper",
|
|
100
|
+
description: "Classic, warm, nostalgic",
|
|
101
|
+
palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
|
|
102
|
+
},
|
|
103
|
+
"modern-minimal": {
|
|
104
|
+
id: "modern-minimal",
|
|
105
|
+
name: "Modern Minimal",
|
|
106
|
+
description: "Clean, professional, corporate",
|
|
107
|
+
palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
108
|
+
},
|
|
109
|
+
"bubblegum": {
|
|
110
|
+
id: "bubblegum",
|
|
111
|
+
name: "Bubblegum",
|
|
112
|
+
description: "Fun, feminine, youthful",
|
|
113
|
+
palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
function hexToRgb(hex) {
|
|
117
|
+
const h = hex.replace("#", "");
|
|
118
|
+
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
|
119
|
+
}
|
|
120
|
+
function rgbToHex(r, g, b) {
|
|
121
|
+
return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
122
|
+
}
|
|
123
|
+
function mixColors(c1, c2, t) {
|
|
124
|
+
const [r1, g1, b1] = hexToRgb(c1);
|
|
125
|
+
const [r2, g2, b2] = hexToRgb(c2);
|
|
126
|
+
return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
|
|
127
|
+
}
|
|
128
|
+
function generateLightPalette(p) {
|
|
129
|
+
return [
|
|
130
|
+
p.background,
|
|
131
|
+
p.secondary,
|
|
132
|
+
mixColors(p.secondary, p.accent, 0.15),
|
|
133
|
+
mixColors(p.secondary, p.accent, 0.3),
|
|
134
|
+
mixColors(p.accent, p.primary, 0.1),
|
|
135
|
+
mixColors(p.accent, p.primary, 0.3),
|
|
136
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
137
|
+
mixColors(p.accent, p.primary, 0.7),
|
|
138
|
+
p.primary,
|
|
139
|
+
mixColors(p.primary, p.secondary_foreground, 0.3),
|
|
140
|
+
p.secondary_foreground,
|
|
141
|
+
p.dark_mode
|
|
142
|
+
];
|
|
143
|
+
}
|
|
144
|
+
function generateDarkPalette(p) {
|
|
145
|
+
return [
|
|
146
|
+
p.dark_mode,
|
|
147
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.15),
|
|
148
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.25),
|
|
149
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.35),
|
|
150
|
+
mixColors(p.secondary_foreground, p.accent, 0.2),
|
|
151
|
+
mixColors(p.secondary_foreground, p.accent, 0.4),
|
|
152
|
+
mixColors(p.secondary_foreground, p.accent, 0.6),
|
|
153
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
154
|
+
p.primary,
|
|
155
|
+
p.accent,
|
|
156
|
+
mixColors(p.accent, p.primary_foreground, 0.5),
|
|
157
|
+
p.primary_foreground
|
|
158
|
+
];
|
|
159
|
+
}
|
|
160
|
+
function getBlinkThemePalettes(themeId) {
|
|
161
|
+
const theme = BLINK_DESIGN_THEMES[themeId];
|
|
162
|
+
if (!theme) throw new Error(`Unknown theme: ${themeId}`);
|
|
163
|
+
const p = theme.palette;
|
|
164
|
+
return {
|
|
165
|
+
base: {
|
|
166
|
+
light: generateLightPalette(p),
|
|
167
|
+
dark: generateDarkPalette(p)
|
|
168
|
+
},
|
|
169
|
+
accent: {
|
|
170
|
+
light: generateDarkPalette(p),
|
|
171
|
+
dark: generateLightPalette(p)
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
|
|
176
|
+
function getBlinkDesignTheme(themeId) {
|
|
177
|
+
return BLINK_DESIGN_THEMES[themeId];
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// src/index.ts
|
|
10
181
|
import {
|
|
11
182
|
View as View7,
|
|
12
183
|
Stack,
|
|
@@ -3489,6 +3660,9 @@ function BlinkPopover({
|
|
|
3489
3660
|
] });
|
|
3490
3661
|
}
|
|
3491
3662
|
|
|
3663
|
+
// src/index.ts
|
|
3664
|
+
export * from "@tamagui/lucide-icons";
|
|
3665
|
+
|
|
3492
3666
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3493
3667
|
import { Button as Button12, SizableText as SizableText49, XStack as XStack42, YStack as YStack47 } from "tamagui";
|
|
3494
3668
|
import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
@@ -3649,6 +3823,8 @@ export {
|
|
|
3649
3823
|
Aside,
|
|
3650
3824
|
Avatar2 as Avatar,
|
|
3651
3825
|
AvatarGroup,
|
|
3826
|
+
BLINK_DESIGN_THEMES,
|
|
3827
|
+
BLINK_DESIGN_THEME_IDS,
|
|
3652
3828
|
Badge,
|
|
3653
3829
|
BlinkAccordion,
|
|
3654
3830
|
Avatar as BlinkAvatar,
|
|
@@ -3796,6 +3972,8 @@ export {
|
|
|
3796
3972
|
createTokens,
|
|
3797
3973
|
createVariable,
|
|
3798
3974
|
dialogConfirm,
|
|
3975
|
+
getBlinkDesignTheme,
|
|
3976
|
+
getBlinkThemePalettes,
|
|
3799
3977
|
getConfig,
|
|
3800
3978
|
getToken,
|
|
3801
3979
|
getTokenValue,
|