lensfx 0.1.0 → 0.2.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/CHANGELOG.md +53 -0
- package/README.md +333 -137
- package/dist/index.d.mts +252 -194
- package/dist/index.d.ts +252 -194
- package/dist/index.js +2728 -3185
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2702 -3143
- package/dist/index.mjs.map +1 -1
- package/dist/lensfx.css +113 -0
- package/package.json +62 -12
package/dist/lensfx.css
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* lensfx — Design Tokens
|
|
3
|
+
*
|
|
4
|
+
* Import this file once at the root of your app:
|
|
5
|
+
* import "lensfx/styles";
|
|
6
|
+
*
|
|
7
|
+
* All variables are namespaced with --lensfx- to prevent collisions.
|
|
8
|
+
* Override any token in your own stylesheet to customize the look.
|
|
9
|
+
*
|
|
10
|
+
* Example:
|
|
11
|
+
* :root {
|
|
12
|
+
* --lensfx-primary: #a78bfa;
|
|
13
|
+
* --lensfx-bg: #1a1a2e;
|
|
14
|
+
* }
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
:root {
|
|
18
|
+
/* ── Colour palette ─────────────────────────────────────────────────────── */
|
|
19
|
+
--lensfx-primary: #38bdf8;
|
|
20
|
+
--lensfx-primary-dark: #0284c7;
|
|
21
|
+
|
|
22
|
+
/* Background scale (darkest → lightest in dark mode) */
|
|
23
|
+
--lensfx-bg-1: #09090b;
|
|
24
|
+
--lensfx-bg-2: #18181b;
|
|
25
|
+
--lensfx-bg-3: #27272a;
|
|
26
|
+
--lensfx-bg-4: #3f3f46;
|
|
27
|
+
|
|
28
|
+
/* Foreground scale */
|
|
29
|
+
--lensfx-fg-1: #fafafa;
|
|
30
|
+
--lensfx-fg-2: #e4e4e7;
|
|
31
|
+
--lensfx-fg-3: #a1a1aa;
|
|
32
|
+
--lensfx-fg-4: #71717a;
|
|
33
|
+
|
|
34
|
+
/* Borders */
|
|
35
|
+
--lensfx-border-1: rgba(255, 255, 255, 0.08);
|
|
36
|
+
--lensfx-border-2: rgba(255, 255, 255, 0.14);
|
|
37
|
+
|
|
38
|
+
/* Shadows */
|
|
39
|
+
--lensfx-shadow-strong: rgba(0, 0, 0, 0.45);
|
|
40
|
+
--lensfx-shadow-medium: rgba(0, 0, 0, 0.24);
|
|
41
|
+
--lensfx-shadow-soft: rgba(0, 0, 0, 0.12);
|
|
42
|
+
|
|
43
|
+
/* ── Radius ─────────────────────────────────────────────────────────────── */
|
|
44
|
+
--lensfx-radius-sm: 6px;
|
|
45
|
+
--lensfx-radius-md: 12px;
|
|
46
|
+
--lensfx-radius-lg: 20px;
|
|
47
|
+
--lensfx-radius-full: 9999px;
|
|
48
|
+
|
|
49
|
+
/* ── Lens optical defaults (CSS fallbacks — components use JS props) ─────── */
|
|
50
|
+
--lensfx-tint: transparent;
|
|
51
|
+
--lensfx-tint-opacity: 0;
|
|
52
|
+
--lensfx-blur: 0px;
|
|
53
|
+
|
|
54
|
+
/* ── Motion ─────────────────────────────────────────────────────────────── */
|
|
55
|
+
--lensfx-transition-fast: 0.15s ease;
|
|
56
|
+
--lensfx-transition-base: 0.25s ease;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* ── Light mode token overrides ─────────────────────────────────────────────── */
|
|
60
|
+
@media (prefers-color-scheme: light) {
|
|
61
|
+
:root {
|
|
62
|
+
--lensfx-bg-1: #ffffff;
|
|
63
|
+
--lensfx-bg-2: #f4f4f5;
|
|
64
|
+
--lensfx-bg-3: #e4e4e7;
|
|
65
|
+
--lensfx-bg-4: #d4d4d8;
|
|
66
|
+
--lensfx-fg-1: #18181b;
|
|
67
|
+
--lensfx-fg-2: #27272a;
|
|
68
|
+
--lensfx-fg-3: #52525b;
|
|
69
|
+
--lensfx-fg-4: #71717a;
|
|
70
|
+
--lensfx-border-1: rgba(0, 0, 0, 0.06);
|
|
71
|
+
--lensfx-border-2: rgba(0, 0, 0, 0.10);
|
|
72
|
+
--lensfx-shadow-strong: rgba(0, 0, 0, 0.16);
|
|
73
|
+
--lensfx-shadow-medium: rgba(0, 0, 0, 0.10);
|
|
74
|
+
--lensfx-shadow-soft: rgba(0, 0, 0, 0.06);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ── Reduced motion — disable animations ────────────────────────────────────── */
|
|
79
|
+
@media (prefers-reduced-motion: reduce) {
|
|
80
|
+
[data-lensfx-container] *,
|
|
81
|
+
[data-lensfx-container] *::before,
|
|
82
|
+
[data-lensfx-container] *::after {
|
|
83
|
+
animation-duration: 0.01ms !important;
|
|
84
|
+
animation-iteration-count: 1 !important;
|
|
85
|
+
transition-duration: 0.01ms !important;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* ── Base component reset ─────────────────────────────────────────────────── */
|
|
90
|
+
|
|
91
|
+
/*
|
|
92
|
+
* Apply focus-visible ring to interactive elements inside lensfx components.
|
|
93
|
+
* This guarantees keyboard users always see a visible focus indicator.
|
|
94
|
+
*/
|
|
95
|
+
[data-lensfx-container] :focus-visible {
|
|
96
|
+
outline: 2px solid var(--lensfx-primary);
|
|
97
|
+
outline-offset: 2px;
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Map legacy CSS variable names used by older Aave components to lensfx tokens */
|
|
102
|
+
[data-lensfx-container] {
|
|
103
|
+
--bg-1: var(--lensfx-bg-1);
|
|
104
|
+
--bg-2: var(--lensfx-bg-2);
|
|
105
|
+
--bg-3: var(--lensfx-bg-3);
|
|
106
|
+
--bg-4: var(--lensfx-bg-4);
|
|
107
|
+
--fg-1: var(--lensfx-fg-1);
|
|
108
|
+
--fg-4: var(--lensfx-fg-4);
|
|
109
|
+
--primary: var(--lensfx-primary);
|
|
110
|
+
--border-1: var(--lensfx-border-1);
|
|
111
|
+
--border-2: var(--lensfx-border-2);
|
|
112
|
+
--shadow-strong: var(--lensfx-shadow-strong);
|
|
113
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lensfx",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "The most convincing, drop-in optical glass refraction for the web. Reverse-engineered from Aave's glass system.",
|
|
5
|
+
"author": "rudraksha132",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"sideEffects": [
|
|
8
|
+
"*.css"
|
|
9
|
+
],
|
|
5
10
|
"main": "./dist/index.js",
|
|
6
11
|
"module": "./dist/index.mjs",
|
|
7
12
|
"types": "./dist/index.d.ts",
|
|
@@ -10,16 +15,27 @@
|
|
|
10
15
|
"types": "./dist/index.d.ts",
|
|
11
16
|
"import": "./dist/index.mjs",
|
|
12
17
|
"require": "./dist/index.js"
|
|
13
|
-
}
|
|
18
|
+
},
|
|
19
|
+
"./styles": "./dist/lensfx.css",
|
|
20
|
+
"./styles.css": "./dist/lensfx.css"
|
|
14
21
|
},
|
|
15
22
|
"files": [
|
|
16
23
|
"dist",
|
|
17
24
|
"README.md",
|
|
18
|
-
"LICENSE"
|
|
25
|
+
"LICENSE",
|
|
26
|
+
"CHANGELOG.md"
|
|
19
27
|
],
|
|
20
28
|
"scripts": {
|
|
21
|
-
"build": "tsup
|
|
22
|
-
"
|
|
29
|
+
"build": "tsup && node scripts/postbuild.mjs",
|
|
30
|
+
"build:css": "node scripts/postbuild.mjs",
|
|
31
|
+
"build:all": "npm run build",
|
|
32
|
+
"dev": "tsup --watch",
|
|
33
|
+
"test": "vitest run",
|
|
34
|
+
"test:watch": "vitest",
|
|
35
|
+
"test:coverage": "vitest run --coverage",
|
|
36
|
+
"lint": "tsc --noEmit",
|
|
37
|
+
"prepublishOnly": "npm run lint && npm test && npm run build && npm run size",
|
|
38
|
+
"size": "size-limit"
|
|
23
39
|
},
|
|
24
40
|
"repository": {
|
|
25
41
|
"type": "git",
|
|
@@ -30,26 +46,60 @@
|
|
|
30
46
|
"glassmorphism",
|
|
31
47
|
"refraction",
|
|
32
48
|
"svg-filter",
|
|
49
|
+
"feDisplacementMap",
|
|
33
50
|
"webgl",
|
|
34
51
|
"optical-physics",
|
|
35
|
-
"feDisplacementMap",
|
|
36
52
|
"glass-ui",
|
|
37
|
-
"react-glass"
|
|
53
|
+
"react-glass",
|
|
54
|
+
"lens",
|
|
55
|
+
"ui-library"
|
|
38
56
|
],
|
|
39
|
-
"author": "rudraksha132",
|
|
40
|
-
"license": "MIT",
|
|
41
57
|
"peerDependencies": {
|
|
42
58
|
"framer-motion": ">=10.0.0",
|
|
43
59
|
"react": ">=18.0.0",
|
|
44
60
|
"react-dom": ">=18.0.0"
|
|
45
61
|
},
|
|
62
|
+
"peerDependenciesMeta": {
|
|
63
|
+
"framer-motion": {
|
|
64
|
+
"optional": false
|
|
65
|
+
}
|
|
66
|
+
},
|
|
46
67
|
"devDependencies": {
|
|
68
|
+
"@size-limit/preset-small-lib": "^11.0.0",
|
|
69
|
+
"@testing-library/dom": "^10.0.0",
|
|
70
|
+
"@testing-library/jest-dom": "^6.0.0",
|
|
71
|
+
"@testing-library/react": "^16.0.0",
|
|
72
|
+
"@testing-library/user-event": "^14.0.0",
|
|
47
73
|
"@types/react": "^18.3.11",
|
|
48
74
|
"@types/react-dom": "^18.3.0",
|
|
75
|
+
"@vitejs/plugin-react": "^4.0.0",
|
|
76
|
+
"@vitest/coverage-v8": "^2.0.0",
|
|
49
77
|
"framer-motion": "^11.11.9",
|
|
78
|
+
"jsdom": "^25.0.0",
|
|
50
79
|
"react": "^18.3.1",
|
|
51
80
|
"react-dom": "^18.3.1",
|
|
81
|
+
"size-limit": "^11.0.0",
|
|
52
82
|
"tsup": "^8.3.0",
|
|
53
|
-
"typescript": "^5.6.3"
|
|
54
|
-
|
|
83
|
+
"typescript": "^5.6.3",
|
|
84
|
+
"vitest": "^2.0.0"
|
|
85
|
+
},
|
|
86
|
+
"size-limit": [
|
|
87
|
+
{
|
|
88
|
+
"name": "Core engine (tree-shaken)",
|
|
89
|
+
"path": "./dist/index.mjs",
|
|
90
|
+
"import": "{ erf, computeDomeConstants, createDisplacementMapGeneratorSync }",
|
|
91
|
+
"limit": "10 kB"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"name": "Lens component",
|
|
95
|
+
"path": "./dist/index.mjs",
|
|
96
|
+
"import": "{ Lens }",
|
|
97
|
+
"limit": "30 kB"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "Full library",
|
|
101
|
+
"path": "./dist/index.mjs",
|
|
102
|
+
"limit": "80 kB"
|
|
103
|
+
}
|
|
104
|
+
]
|
|
55
105
|
}
|