@formant/aesthetics 0.0.3 → 0.0.6

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 (7) hide show
  1. package/README.md +43 -153
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +1071 -57
  4. package/dist/index.js.map +1 -1
  5. package/package.json +17 -16
  6. package/styles/globals.css +81 -125
  7. package/dist/safelist.css +0 -1377
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@formant/aesthetics",
3
- "version": "0.0.3",
3
+ "version": "0.0.6",
4
4
  "type": "module",
5
- "description": "Formant design system — themed React components built on shadcn/ui, Radix, and Tailwind CSS v4",
5
+ "description": "Formant design system — themed React components built on shadcn/ui and Radix UI",
6
6
  "license": "MIT",
7
7
  "private": false,
8
8
  "repository": {
@@ -16,10 +16,11 @@
16
16
  "react",
17
17
  "components",
18
18
  "shadcn",
19
- "tailwindcss",
20
19
  "radix-ui"
21
20
  ],
22
- "sideEffects": false,
21
+ "sideEffects": [
22
+ "*.css"
23
+ ],
23
24
  "main": "./dist/index.js",
24
25
  "module": "./dist/index.js",
25
26
  "types": "./dist/index.d.ts",
@@ -28,15 +29,23 @@
28
29
  "import": "./dist/index.js",
29
30
  "types": "./dist/index.d.ts"
30
31
  },
31
- "./safelist": "./dist/safelist.css",
32
- "./styles": "./styles/globals.css"
32
+ "./styles": {
33
+ "import": "./styles/globals.css",
34
+ "require": "./styles/globals.css",
35
+ "default": "./styles/globals.css"
36
+ },
37
+ "./styles/globals.css": {
38
+ "import": "./styles/globals.css",
39
+ "require": "./styles/globals.css",
40
+ "default": "./styles/globals.css"
41
+ }
33
42
  },
34
43
  "files": [
35
44
  "dist",
36
45
  "styles"
37
46
  ],
38
47
  "scripts": {
39
- "build": "tsup && node scripts/generate-safelist.mjs",
48
+ "build": "tsup",
40
49
  "dev": "tsup --watch",
41
50
  "typecheck": "tsc --noEmit",
42
51
  "prepublishOnly": "npm run build"
@@ -55,25 +64,17 @@
55
64
  "react-resizable-panels": "^4.10.0",
56
65
  "recharts": "^3.8.0",
57
66
  "sonner": "^2.0.7",
58
- "tailwind-merge": "^3.5.0",
59
67
  "vaul": "^1.1.2"
60
68
  },
61
69
  "devDependencies": {
62
70
  "@types/node": "^25.5.0",
63
71
  "@types/react": "^19.2.14",
64
72
  "@types/react-dom": "^19.2.3",
65
- "tailwindcss": "^4.2.1",
66
73
  "tsup": "^8.5.1",
67
74
  "typescript": "^5.9.3"
68
75
  },
69
76
  "peerDependencies": {
70
77
  "react": "^19.0.0",
71
- "react-dom": "^19.0.0",
72
- "tailwindcss": "^4.0.0"
73
- },
74
- "peerDependenciesMeta": {
75
- "tailwindcss": {
76
- "optional": true
77
- }
78
+ "react-dom": "^19.0.0"
78
79
  }
79
80
  }
package/styles/globals.css CHANGED
@@ -1,131 +1,87 @@
1
1
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
2
- @import "tailwindcss";
3
- @import "tw-animate-css";
4
- @import "shadcn/tailwind.css";
5
-
6
- @custom-variant dark (&:is(.dark *));
7
-
8
- @theme inline {
9
- --font-heading: 'Space Grotesk', sans-serif;
10
- --font-sans: 'Inter', sans-serif;
11
- --font-mono: 'JetBrains Mono', monospace;
12
- --color-sidebar-ring: var(--sidebar-ring);
13
- --color-sidebar-border: var(--sidebar-border);
14
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
15
- --color-sidebar-accent: var(--sidebar-accent);
16
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
17
- --color-sidebar-primary: var(--sidebar-primary);
18
- --color-sidebar-foreground: var(--sidebar-foreground);
19
- --color-sidebar: var(--sidebar);
20
- --color-chart-5: var(--chart-5);
21
- --color-chart-4: var(--chart-4);
22
- --color-chart-3: var(--chart-3);
23
- --color-chart-2: var(--chart-2);
24
- --color-chart-1: var(--chart-1);
25
- --color-ring: var(--ring);
26
- --color-input: var(--input);
27
- --color-border: var(--border);
28
- --color-destructive: var(--destructive);
29
- --color-accent-foreground: var(--accent-foreground);
30
- --color-accent: var(--accent);
31
- --color-muted-foreground: var(--muted-foreground);
32
- --color-muted: var(--muted);
33
- --color-secondary-foreground: var(--secondary-foreground);
34
- --color-secondary: var(--secondary);
35
- --color-primary-foreground: var(--primary-foreground);
36
- --color-primary: var(--primary);
37
- --color-popover-foreground: var(--popover-foreground);
38
- --color-popover: var(--popover);
39
- --color-card-foreground: var(--card-foreground);
40
- --color-card: var(--card);
41
- --color-foreground: var(--foreground);
42
- --color-background: var(--background);
43
- --radius-sm: calc(var(--radius) * 0.6);
44
- --radius-md: calc(var(--radius) * 0.8);
45
- --radius-lg: var(--radius);
46
- --radius-xl: calc(var(--radius) * 1.4);
47
- --radius-2xl: calc(var(--radius) * 1.8);
48
- --radius-3xl: calc(var(--radius) * 2.2);
49
- --radius-4xl: calc(var(--radius) * 2.6);
50
-
51
- /* Formant Custom Colors */
52
- --color-deep-command: #0A0F11;
53
- --color-slate-mist: #202428;
54
- --color-formant-white: #F2F3F4;
55
- --color-system-neutral: #A3ABA9;
56
- --color-fog-green: #4B5E53;
57
- --color-ethereal-teal: #2C4142;
58
- --color-horizon-glow: #ACC3B3;
59
- --color-terminal-amber: #E8AB7F;
60
- --color-interface-iris: #8B8CF4;
61
- }
62
2
 
63
3
  :root {
64
- /* Formant Dark Theme (Default) - Slate Mist Background */
65
- --background: #202428;
66
- --foreground: #F2F3F4;
67
- --card: #0A0F11;
68
- --card-foreground: #F2F3F4;
69
- --popover: #202428;
70
- --popover-foreground: #F2F3F4;
71
- --primary: #ACC3B3;
72
- --primary-foreground: #0A0F11;
73
- --secondary: #202428;
74
- --secondary-foreground: #F2F3F4;
75
- --muted: #202428;
76
- --muted-foreground: #A3ABA9;
77
- --accent: #2C4142;
78
- --accent-foreground: #F2F3F4;
79
- --destructive: #E8AB7F;
80
- --destructive-foreground: #0A0F11;
81
- --border: rgba(163, 171, 169, 0.1);
82
- --input: rgba(163, 171, 169, 0.2);
83
- --ring: #ACC3B3;
84
- --chart-1: #ACC3B3;
85
- --chart-2: #4B5E53;
86
- --chart-3: #2C4142;
87
- --chart-4: #E8AB7F;
88
- --chart-5: #8B8CF4;
89
- --radius: 0.25rem;
90
- --sidebar: #0A0F11;
91
- --sidebar-foreground: #F2F3F4;
92
- --sidebar-primary: #ACC3B3;
93
- --sidebar-primary-foreground: #0A0F11;
94
- --sidebar-accent: #202428;
95
- --sidebar-accent-foreground: #F2F3F4;
96
- --sidebar-border: rgba(163, 171, 169, 0.1);
97
- --sidebar-ring: #ACC3B3;
98
-
99
- /* Formant Brand Colors */
100
- --deep-command: #0A0F11;
101
- --slate-mist: #202428;
102
- --formant-white: #F2F3F4;
103
- --system-neutral: #A3ABA9;
104
- --fog-green: #4B5E53;
105
- --ethereal-teal: #2C4142;
106
- --horizon-glow: #ACC3B3;
107
- --terminal-amber: #E8AB7F;
108
- --interface-iris: #8B8CF4;
109
- }
110
-
111
- @layer base {
112
- * {
113
- @apply border-border outline-ring/50;
114
- }
115
- body {
116
- @apply bg-background text-foreground;
117
- font-family: 'Inter', sans-serif;
118
- }
119
- html {
120
- @apply font-sans;
121
- }
122
- h1, h2, h3, h4, h5, h6 {
123
- font-family: 'Space Grotesk', sans-serif;
124
- letter-spacing: -0.02em;
125
- }
126
- code, pre, .font-mono {
127
- font-family: 'JetBrains Mono', monospace;
128
- }
4
+ /* Formant Dark Theme (Default) - Slate Mist Background */
5
+ --background: #202428;
6
+ --foreground: #F2F3F4;
7
+ --card: #0A0F11;
8
+ --card-foreground: #F2F3F4;
9
+ --popover: #202428;
10
+ --popover-foreground: #F2F3F4;
11
+ --primary: #ACC3B3;
12
+ --primary-foreground: #0A0F11;
13
+ --secondary: #202428;
14
+ --secondary-foreground: #F2F3F4;
15
+ --muted: #202428;
16
+ --muted-foreground: #A3ABA9;
17
+ --accent: #2C4142;
18
+ --accent-foreground: #F2F3F4;
19
+ --destructive: #E8AB7F;
20
+ --destructive-foreground: #0A0F11;
21
+ --border: rgba(163, 171, 169, 0.1);
22
+ --input: rgba(163, 171, 169, 0.2);
23
+ --ring: #ACC3B3;
24
+ --chart-1: #ACC3B3;
25
+ --chart-2: #4B5E53;
26
+ --chart-3: #2C4142;
27
+ --chart-4: #E8AB7F;
28
+ --chart-5: #8B8CF4;
29
+ --radius: 0.25rem;
30
+ --radius-sm: calc(0.25rem * 0.6);
31
+ --radius-md: calc(0.25rem * 0.8);
32
+ --radius-lg: 0.25rem;
33
+ --radius-xl: calc(0.25rem * 1.4);
34
+ --radius-2xl: calc(0.25rem * 1.8);
35
+ --radius-3xl: calc(0.25rem * 2.2);
36
+ --radius-4xl: calc(0.25rem * 2.6);
37
+ --sidebar: #0A0F11;
38
+ --sidebar-foreground: #F2F3F4;
39
+ --sidebar-primary: #ACC3B3;
40
+ --sidebar-primary-foreground: #0A0F11;
41
+ --sidebar-accent: #202428;
42
+ --sidebar-accent-foreground: #F2F3F4;
43
+ --sidebar-border: rgba(163, 171, 169, 0.1);
44
+ --sidebar-ring: #ACC3B3;
45
+
46
+ /* Formant Brand Colors */
47
+ --deep-command: #0A0F11;
48
+ --slate-mist: #202428;
49
+ --formant-white: #F2F3F4;
50
+ --system-neutral: #A3ABA9;
51
+ --fog-green: #4B5E53;
52
+ --ethereal-teal: #2C4142;
53
+ --horizon-glow: #ACC3B3;
54
+ --terminal-amber: #E8AB7F;
55
+ --interface-iris: #8B8CF4;
56
+
57
+ /* Font families */
58
+ --font-heading: 'Space Grotesk', sans-serif;
59
+ --font-sans: 'Inter', sans-serif;
60
+ --font-mono: 'JetBrains Mono', monospace;
61
+ }
62
+
63
+ * {
64
+ border-color: var(--border);
65
+ outline-color: var(--ring);
66
+ }
67
+
68
+ body {
69
+ background-color: var(--background);
70
+ color: var(--foreground);
71
+ font-family: 'Inter', sans-serif;
72
+ }
73
+
74
+ html {
75
+ font-family: 'Inter', sans-serif;
76
+ }
77
+
78
+ h1, h2, h3, h4, h5, h6 {
79
+ font-family: 'Space Grotesk', sans-serif;
80
+ letter-spacing: -0.02em;
81
+ }
82
+
83
+ code, pre, .font-mono {
84
+ font-family: 'JetBrains Mono', monospace;
129
85
  }
130
86
 
131
87
  /* Formant Typography Utilities */