@blinkdotnew/ui 0.1.0 → 0.1.2

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.
Files changed (8) hide show
  1. package/dist/index.js +65 -65
  2. package/dist/index.mjs +65 -65
  3. package/package.json +1 -1
  4. package/src/themes/base.css +12 -1
  5. package/src/themes/glass.css +70 -9
  6. package/src/themes/linear.css +57 -3
  7. package/src/themes/midnight.css +71 -15
  8. package/src/themes/minimal.css +85 -33
package/src/themes/glass.css CHANGED
@@ -1,8 +1,16 @@
1
- /* Blink UI — Glass theme (frosted glass, translucent cards, Apple Vision/macOS-style) */
1
+ /* Blink UI — Glass theme
2
+ Inspired by Apple Vision Pro + macOS: frosted glass, soft depth, translucent layers.
3
+ Font: Nunito — rounded, friendly, Apple-adjacent
4
+ Radius: large and soft — everything is rounded
5
+ Shadows: diffuse, color-tinted blur shadows
6
+ Motion: smooth, elegant, longer duration
7
+ */
2
8
 
9
+ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
3
10
 
4
11
  :root,
5
12
  .theme-glass {
13
+ /* ── Colors ───────────────────────────────── */
6
14
  --background: 210 40% 96%;
7
15
  --foreground: 222 47% 11%;
8
16
  --card: 0 0% 100%;
@@ -22,19 +30,67 @@
22
30
  --border: 214 32% 91%;
23
31
  --input: 214 32% 91%;
24
32
  --ring: 221 83% 53%;
25
- --radius: 0.75rem;
26
- --glass-blur: blur(12px);
27
- --glass-bg: rgba(255, 255, 255, 0.7);
28
- --glass-border: rgba(255, 255, 255, 0.5);
29
- --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
33
+
34
+ /* ── Glass-specific ────────────────────────── */
35
+ --glass-blur: blur(16px) saturate(180%);
36
+ --glass-bg: rgba(255, 255, 255, 0.72);
37
+ --glass-border: rgba(255, 255, 255, 0.6);
38
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
39
+
40
+ /* ── Typography ────────────────────────────── */
41
+ --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
42
+ --font-heading: 'Nunito', -apple-system, sans-serif;
30
43
  --font-mono: 'SF Mono', 'Fira Code', monospace;
44
+ --font-size-xs: 0.6875rem;
45
+ --font-size-sm: 0.8125rem;
46
+ --font-size-base: 0.9375rem;
47
+ --font-size-lg: 1.0625rem;
48
+ --font-size-xl: 1.25rem;
49
+ --font-size-2xl: 1.5625rem;
50
+ --font-weight-normal: 400;
51
+ --font-weight-medium: 600;
52
+ --font-weight-semibold: 700;
53
+ --font-weight-heading: 700;
54
+ --line-height-tight: 1.3;
55
+ --line-height-normal: 1.6;
56
+ --line-height-relaxed: 1.75;
57
+ --line-height-heading: 1.25;
58
+ --letter-spacing-tight: -0.01em;
59
+ --letter-spacing-body: 0em;
60
+ --letter-spacing-heading: -0.015em;
61
+
62
+ /* ── Border radius (large, Apple-inspired) ─── */
63
+ --radius: 0.875rem;
64
+ --radius-sm: 0.5rem;
65
+ --radius-md: 0.875rem;
66
+ --radius-lg: 1.25rem;
67
+ --radius-xl: 1.75rem;
68
+ --radius-full: 9999px;
69
+
70
+ /* ── Shadows (diffuse, color-tinted) ─────────── */
71
+ --shadow-sm: 0 2px 8px 0 rgba(100, 130, 200, 0.08);
72
+ --shadow-md: 0 4px 16px 0 rgba(100, 130, 200, 0.12), 0 1px 4px rgba(100, 130, 200, 0.08);
73
+ --shadow-lg: 0 8px 32px 0 rgba(100, 130, 200, 0.16), 0 2px 8px rgba(100, 130, 200, 0.1);
74
+ --shadow-xl: 0 16px 48px 0 rgba(100, 130, 200, 0.2), 0 4px 16px rgba(100, 130, 200, 0.12);
75
+ --shadow-card: var(--glass-shadow);
76
+
77
+ /* ── Animation (smooth, longer duration) ──────── */
78
+ --duration-fast: 150ms;
79
+ --duration-normal: 250ms;
80
+ --duration-slow: 400ms;
81
+ --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
82
+ --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
83
+ --easing-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);
31
84
  }
32
85
 
33
- .theme-glass .glass {
86
+ /* Glass card style utility */
87
+ .theme-glass .glass,
88
+ .theme-glass [data-glass] {
34
89
  background: var(--glass-bg);
35
90
  backdrop-filter: var(--glass-blur);
36
91
  -webkit-backdrop-filter: var(--glass-blur);
37
92
  border: 1px solid var(--glass-border);
93
+ box-shadow: var(--glass-shadow);
38
94
  }
39
95
 
40
96
  .theme-glass.dark {
@@ -57,6 +113,11 @@
57
113
  --border: 222 47% 18%;
58
114
  --input: 222 47% 18%;
59
115
  --ring: 217 91% 60%;
60
- --glass-bg: rgba(15, 20, 40, 0.7);
61
- --glass-border: rgba(255, 255, 255, 0.08);
116
+ --glass-bg: rgba(15, 20, 40, 0.72);
117
+ --glass-border: rgba(255, 255, 255, 0.06);
118
+ --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
119
+ --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
120
+ --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
121
+ --shadow-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
122
+ --shadow-card: var(--glass-shadow);
62
123
  }
package/src/themes/linear.css CHANGED
@@ -1,8 +1,16 @@
1
- /* Blink UI — Linear theme (clean monochrome, sharp edges, Linear/Vercel-style) */
1
+ /* Blink UI — Linear theme
2
+ Inspired by Linear.app + Vercel: monochrome, dense, sharp, no-nonsense.
3
+ Font: Inter — professional and tight
4
+ Radius: minimal — almost square controls
5
+ Shadows: crisp and directional, no blur
6
+ Motion: fast, no bounce
7
+ */
2
8
 
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
10
 
4
11
  :root,
5
12
  .theme-linear {
13
+ /* ── Colors ───────────────────────────────── */
6
14
  --background: 0 0% 100%;
7
15
  --foreground: 0 0% 3.9%;
8
16
  --card: 0 0% 100%;
@@ -22,9 +30,51 @@
22
30
  --border: 0 0% 89.8%;
23
31
  --input: 0 0% 89.8%;
24
32
  --ring: 0 0% 3.9%;
25
- --radius: 0.375rem;
33
+
34
+ /* ── Typography ────────────────────────────── */
26
35
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
27
- --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
36
+ --font-heading: 'Inter', system-ui, sans-serif;
37
+ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
38
+ --font-size-xs: 0.6875rem;
39
+ --font-size-sm: 0.8125rem;
40
+ --font-size-base: 0.9375rem;
41
+ --font-size-lg: 1.0625rem;
42
+ --font-size-xl: 1.25rem;
43
+ --font-size-2xl: 1.5rem;
44
+ --font-weight-normal: 400;
45
+ --font-weight-medium: 500;
46
+ --font-weight-semibold: 600;
47
+ --font-weight-heading: 600;
48
+ --line-height-tight: 1.2;
49
+ --line-height-normal: 1.5;
50
+ --line-height-relaxed: 1.625;
51
+ --line-height-heading: 1.15;
52
+ --letter-spacing-tight: -0.02em;
53
+ --letter-spacing-body: -0.005em;
54
+ --letter-spacing-heading: -0.03em;
55
+
56
+ /* ── Border radius (minimal — almost square) ─ */
57
+ --radius: 0.25rem;
58
+ --radius-sm: 0.125rem;
59
+ --radius-md: 0.25rem;
60
+ --radius-lg: 0.375rem;
61
+ --radius-xl: 0.5rem;
62
+ --radius-full: 9999px;
63
+
64
+ /* ── Shadows (crisp, directional, no spread) ─ */
65
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
66
+ --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
67
+ --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
68
+ --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
69
+ --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px 0 rgb(0 0 0 / 0.04);
70
+
71
+ /* ── Animation (fast, no bounce) ────────────── */
72
+ --duration-fast: 80ms;
73
+ --duration-normal: 120ms;
74
+ --duration-slow: 200ms;
75
+ --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
76
+ --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
77
+ --easing-bounce: cubic-bezier(0.34, 1.1, 0.64, 1);
28
78
  }
29
79
 
30
80
  .theme-linear.dark {
@@ -47,4 +97,8 @@
47
97
  --border: 0 0% 14.9%;
48
98
  --input: 0 0% 14.9%;
49
99
  --ring: 0 0% 83.1%;
100
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
101
+ --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
102
+ --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
103
+ --shadow-card: 0 0 0 1px hsl(var(--border));
50
104
  }
package/src/themes/midnight.css CHANGED
@@ -1,36 +1,88 @@
1
- /* Blink UI — Midnight theme (dark premium, neon accents, Raycast/Arc-style) */
1
+ /* Blink UI — Midnight theme
2
+ Inspired by Raycast + Arc: dark premium, neon accents, developer-first depth.
3
+ Font: Space Grotesk — geometric, techy, modern
4
+ Radius: medium, slightly angular
5
+ Shadows: neon glow shadows matched to accent color
6
+ Motion: snappy, minimal but precise
7
+ */
2
8
 
9
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
3
10
 
4
11
  :root,
5
12
  .theme-midnight {
13
+ /* ── Colors ───────────────────────────────── */
6
14
  --background: 240 10% 4%;
7
15
  --foreground: 0 0% 95%;
8
- --card: 240 10% 6%;
16
+ --card: 240 10% 6.5%;
9
17
  --card-foreground: 0 0% 95%;
10
- --popover: 240 10% 6%;
18
+ --popover: 240 10% 7%;
11
19
  --popover-foreground: 0 0% 95%;
12
20
  --primary: 263 90% 68%;
13
21
  --primary-foreground: 0 0% 100%;
14
- --secondary: 240 10% 10%;
15
- --secondary-foreground: 0 0% 95%;
16
- --muted: 240 10% 10%;
22
+ --secondary: 240 10% 11%;
23
+ --secondary-foreground: 0 0% 90%;
24
+ --muted: 240 10% 11%;
17
25
  --muted-foreground: 240 5% 55%;
18
26
  --accent: 263 90% 68%;
19
27
  --accent-foreground: 0 0% 100%;
20
28
  --destructive: 0 72% 51%;
21
29
  --destructive-foreground: 0 0% 100%;
22
- --border: 240 10% 13%;
23
- --input: 240 10% 13%;
30
+ --border: 240 10% 14%;
31
+ --input: 240 10% 14%;
24
32
  --ring: 263 90% 68%;
33
+
34
+ /* ── Midnight-specific ──────────────────────── */
35
+ --neon: hsl(263 90% 68%);
36
+ --neon-glow: 0 0 20px hsl(263 90% 68% / 0.35), 0 0 40px hsl(263 90% 68% / 0.15);
37
+ --neon-subtle: 0 0 10px hsl(263 90% 68% / 0.2);
38
+
39
+ /* ── Typography ────────────────────────────── */
40
+ --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
41
+ --font-heading: 'Space Grotesk', 'Inter', sans-serif;
42
+ --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
43
+ --font-size-xs: 0.6875rem;
44
+ --font-size-sm: 0.8125rem;
45
+ --font-size-base: 0.9375rem;
46
+ --font-size-lg: 1.0625rem;
47
+ --font-size-xl: 1.25rem;
48
+ --font-size-2xl: 1.5rem;
49
+ --font-weight-normal: 400;
50
+ --font-weight-medium: 500;
51
+ --font-weight-semibold: 600;
52
+ --font-weight-heading: 600;
53
+ --line-height-tight: 1.2;
54
+ --line-height-normal: 1.5;
55
+ --line-height-relaxed: 1.6;
56
+ --line-height-heading: 1.15;
57
+ --letter-spacing-tight: -0.02em;
58
+ --letter-spacing-body: -0.01em;
59
+ --letter-spacing-heading: -0.025em;
60
+
61
+ /* ── Border radius (medium, slightly angular) ── */
25
62
  --radius: 0.5rem;
26
- --neon: 263 90% 68%;
27
- --neon-glow: 0 0 20px hsl(263 90% 68% / 0.4);
28
- --font-sans: 'Inter', system-ui, sans-serif;
29
- --font-mono: 'JetBrains Mono', monospace;
30
- }
63
+ --radius-sm: 0.25rem;
64
+ --radius-md: 0.5rem;
65
+ --radius-lg: 0.75rem;
66
+ --radius-xl: 1rem;
67
+ --radius-full: 9999px;
31
68
 
32
- .theme-midnight {
33
- /* Force dark by default */
69
+ /* ── Shadows (neon glow) ─────────────────────── */
70
+ --shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.5);
71
+ --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
72
+ --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
73
+ --shadow-xl: 0 16px 40px 0 rgb(0 0 0 / 0.7), 0 0 32px hsl(var(--primary) / 0.08);
74
+ --shadow-card: 0 0 0 1px hsl(var(--border)), 0 2px 8px rgb(0 0 0 / 0.4);
75
+ --shadow-glow: var(--neon-glow);
76
+
77
+ /* ── Animation (snappy, precise) ────────────── */
78
+ --duration-fast: 80ms;
79
+ --duration-normal: 120ms;
80
+ --duration-slow: 200ms;
81
+ --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
82
+ --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
83
+ --easing-bounce: cubic-bezier(0.34, 1.15, 0.64, 1);
84
+
85
+ /* Force dark color-scheme */
34
86
  color-scheme: dark;
35
87
  }
36
88
 
@@ -53,4 +105,8 @@
53
105
  --input: 240 10% 85%;
54
106
  --ring: 263 70% 50%;
55
107
  --neon-glow: none;
108
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
109
+ --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.08);
110
+ --shadow-card: 0 0 0 1px hsl(var(--border));
111
+ color-scheme: light;
56
112
  }
package/src/themes/minimal.css CHANGED
@@ -1,50 +1,102 @@
1
- /* Blink UI — Minimal theme (light, airy, generous whitespace, Notion/Cal.com-style) */
1
+ /* Blink UI — Minimal theme
2
+ Inspired by Notion + Cal.com: airy, warm, generous whitespace, content-first.
3
+ Font: Plus Jakarta Sans — warm, approachable, humanist
4
+ Radius: warm and rounded, but not pill-shaped
5
+ Shadows: barely-there, warm-toned
6
+ Motion: natural, unhurried
7
+ */
2
8
 
9
+ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
3
10
 
4
11
  :root,
5
12
  .theme-minimal {
6
- --background: 0 0% 99%;
7
- --foreground: 20 14% 4%;
13
+ /* ── Colors (warm light) ───────────────────── */
14
+ --background: 40 33% 97%;
15
+ --foreground: 25 15% 15%;
8
16
  --card: 0 0% 100%;
9
- --card-foreground: 20 14% 4%;
17
+ --card-foreground: 25 15% 15%;
10
18
  --popover: 0 0% 100%;
11
- --popover-foreground: 20 14% 4%;
12
- --primary: 24 80% 52%;
19
+ --popover-foreground: 25 15% 15%;
20
+ --primary: 25 95% 53%;
13
21
  --primary-foreground: 0 0% 100%;
14
- --secondary: 30 20% 96%;
15
- --secondary-foreground: 20 14% 4%;
16
- --muted: 30 20% 95%;
22
+ --secondary: 35 25% 93%;
23
+ --secondary-foreground: 25 15% 25%;
24
+ --muted: 35 20% 94%;
17
25
  --muted-foreground: 25 10% 45%;
18
- --accent: 30 20% 95%;
19
- --accent-foreground: 24 80% 52%;
26
+ --accent: 35 25% 93%;
27
+ --accent-foreground: 25 95% 48%;
20
28
  --destructive: 0 84% 60%;
21
29
  --destructive-foreground: 0 0% 100%;
22
- --border: 30 14% 90%;
23
- --input: 30 14% 90%;
24
- --ring: 24 80% 52%;
30
+ --border: 35 15% 88%;
31
+ --input: 35 15% 90%;
32
+ --ring: 25 95% 53%;
33
+
34
+ /* ── Typography (airy, humanist) ──────────── */
35
+ --font-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
36
+ --font-heading: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
37
+ --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
38
+ --font-size-xs: 0.75rem;
39
+ --font-size-sm: 0.875rem;
40
+ --font-size-base: 1rem;
41
+ --font-size-lg: 1.125rem;
42
+ --font-size-xl: 1.3125rem;
43
+ --font-size-2xl: 1.625rem;
44
+ --font-weight-normal: 400;
45
+ --font-weight-medium: 500;
46
+ --font-weight-semibold: 600;
47
+ --font-weight-heading: 700;
48
+ --line-height-tight: 1.35;
49
+ --line-height-normal: 1.65;
50
+ --line-height-relaxed: 1.8;
51
+ --line-height-heading: 1.3;
52
+ --letter-spacing-tight: -0.01em;
53
+ --letter-spacing-body: 0.005em;
54
+ --letter-spacing-heading: -0.01em;
55
+
56
+ /* ── Border radius (warm, medium-large) ─────── */
25
57
  --radius: 0.625rem;
26
- --font-sans: 'Geist', 'Inter', system-ui, sans-serif;
27
- --font-mono: 'Geist Mono', 'Fira Code', monospace;
58
+ --radius-sm: 0.375rem;
59
+ --radius-md: 0.625rem;
60
+ --radius-lg: 1rem;
61
+ --radius-xl: 1.5rem;
62
+ --radius-full: 9999px;
63
+
64
+ /* ── Shadows (warm, barely-there) ────────────── */
65
+ --shadow-sm: 0 1px 3px 0 rgba(120, 80, 40, 0.06);
66
+ --shadow-md: 0 2px 8px 0 rgba(120, 80, 40, 0.08), 0 0 0 1px rgba(120, 80, 40, 0.04);
67
+ --shadow-lg: 0 4px 16px 0 rgba(120, 80, 40, 0.1), 0 1px 4px rgba(120, 80, 40, 0.06);
68
+ --shadow-xl: 0 8px 32px 0 rgba(120, 80, 40, 0.12), 0 2px 8px rgba(120, 80, 40, 0.06);
69
+ --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px rgba(120, 80, 40, 0.06);
70
+
71
+ /* ── Animation (natural, unhurried) ─────────── */
72
+ --duration-fast: 100ms;
73
+ --duration-normal: 200ms;
74
+ --duration-slow: 350ms;
75
+ --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
76
+ --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);
77
+ --easing-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
28
78
  }
29
79
 
30
80
  .theme-minimal.dark {
31
- --background: 20 14% 4%;
32
- --foreground: 30 20% 95%;
33
- --card: 20 14% 7%;
34
- --card-foreground: 30 20% 95%;
35
- --popover: 20 14% 7%;
36
- --popover-foreground: 30 20% 95%;
37
- --primary: 24 80% 58%;
81
+ --background: 25 12% 8%;
82
+ --foreground: 35 15% 90%;
83
+ --card: 25 12% 10%;
84
+ --card-foreground: 35 15% 90%;
85
+ --popover: 25 12% 11%;
86
+ --popover-foreground: 35 15% 90%;
87
+ --primary: 25 95% 58%;
38
88
  --primary-foreground: 0 0% 100%;
39
- --secondary: 20 14% 12%;
40
- --secondary-foreground: 30 20% 95%;
41
- --muted: 20 14% 12%;
89
+ --secondary: 25 12% 15%;
90
+ --secondary-foreground: 35 15% 80%;
91
+ --muted: 25 12% 14%;
42
92
  --muted-foreground: 25 10% 55%;
43
- --accent: 20 14% 12%;
44
- --accent-foreground: 24 80% 58%;
45
- --destructive: 0 62% 30%;
46
- --destructive-foreground: 0 0% 100%;
47
- --border: 20 14% 15%;
48
- --input: 20 14% 15%;
49
- --ring: 24 80% 58%;
93
+ --accent: 25 12% 15%;
94
+ --accent-foreground: 25 95% 58%;
95
+ --border: 25 12% 18%;
96
+ --input: 25 12% 18%;
97
+ --ring: 25 95% 58%;
98
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25);
99
+ --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.35);
100
+ --shadow-lg: 0 4px 16px 0 rgb(0 0 0 / 0.4);
101
+ --shadow-card: 0 0 0 1px hsl(var(--border));
50
102
  }