@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.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,