@formant/aesthetics 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 (5) hide show
  1. package/README.md +6 -281
  2. package/formant-aesthetics.css +96 -6
  3. package/package.json +1 -3
  4. package/formant-layout-utilities.css +0 -81
  5. package/formant-properties.css +0 -474
package/README.md CHANGED
@@ -1,33 +1,16 @@
1
1
  # @formant/aesthetics
2
2
 
3
- A classless CSS framework based on the Formant Design System. No classes required—just semantic HTML that works out of the box. Perfect for rapid prototyping, documentation, and applications that want the Formant aesthetic without the complexity.
3
+ A classless CSS framework based on the Formant Design System. No classes required—just semantic HTML that works out of the box.
4
4
 
5
- ## Installation
6
-
7
- ### NPM
8
-
9
- ```bash
10
- npm install @formant/aesthetics
11
- ```
5
+ ## Quick Start
12
6
 
13
- ### CDN (jsdelivr)
7
+ Add the CDN link to your HTML:
14
8
 
15
9
  ```html
16
- <!-- Complete framework (recommended) -->
17
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-aesthetics.css">
18
-
19
- <!-- Design tokens only (build your own styles) -->
20
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-properties.css">
21
-
22
- <!-- Layout utilities (optional) -->
23
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-layout-utilities.css">
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics/formant-aesthetics.css">
24
11
  ```
25
12
 
26
- ## Quick Start
27
-
28
- ### Option 1: Complete Classless CSS (Recommended)
29
-
30
- Include the complete framework and write semantic HTML:
13
+ Write semantic HTML:
31
14
 
32
15
  ```html
33
16
  <!DOCTYPE html>
@@ -36,7 +19,7 @@ Include the complete framework and write semantic HTML:
36
19
  <meta charset="UTF-8">
37
20
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
21
  <title>My App</title>
39
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-aesthetics.css">
22
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics/formant-aesthetics.css">
40
23
  </head>
41
24
  <body>
42
25
  <main>
@@ -47,261 +30,3 @@ Include the complete framework and write semantic HTML:
47
30
  </body>
48
31
  </html>
49
32
  ```
50
-
51
- ### Option 2: NPM + Module Import
52
-
53
- ```javascript
54
- // Import into your JS/TS project
55
- import '@formant/aesthetics/formant-aesthetics.css';
56
- ```
57
-
58
- Or in your CSS/SCSS:
59
-
60
- ```css
61
- @import '@formant/aesthetics/formant-aesthetics.css';
62
- ```
63
-
64
- ### Option 3: CSS Properties Only
65
-
66
- Use just the design tokens to build custom styles:
67
-
68
- ```html
69
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-properties.css">
70
- ```
71
-
72
- ```css
73
- .my-component {
74
- background-color: var(--theme-neutrals-0);
75
- color: var(--theme-atmospheric-accents-2);
76
- font-family: var(--font-display);
77
- border: 1px solid var(--theme-atmospheric-accents-1);
78
- }
79
- ```
80
-
81
- ### Option 4: Add Layout Utilities
82
-
83
- For grid and flexbox utilities alongside the classless CSS:
84
-
85
- ```html
86
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-aesthetics.css">
87
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-layout-utilities.css">
88
- ```
89
-
90
- ## What's Included
91
-
92
- | File | Size | Description |
93
- |------|------|-------------|
94
- | `formant-aesthetics.css` | ~8KB | Complete classless CSS framework |
95
- | `formant-properties.css` | ~2KB | Design tokens only (CSS variables) |
96
- | `formant-layout-utilities.css` | ~3KB | Grid/flex layout utilities |
97
-
98
- ## Design Tokens (Theme-Based Naming)
99
-
100
- ### Theme Colors
101
-
102
- #### Neutrals (0-3)
103
-
104
- | Token | Hex | Name | Usage |
105
- |-------|-----|------|-------|
106
- | `--theme-neutrals-0` | `#0A0F11` | Deep Command | Primary backgrounds, the void |
107
- | `--theme-neutrals-1` | `#202428` | Slate Mist | Card backgrounds, secondary surfaces |
108
- | `--theme-neutrals-2` | `#A3ABA9` | System Neutral | Body text, captions, border base |
109
- | `--theme-neutrals-3` | `#F2F3F4` | Formant White | Primary text, headlines |
110
-
111
- #### Atmospheric Accents (0-2)
112
-
113
- | Token | Hex | Name | Usage |
114
- |-------|-----|------|-------|
115
- | `--theme-atmospheric-accents-0` | `#2C4142` | Ethereal Teal | Active states, hover backgrounds |
116
- | `--theme-atmospheric-accents-1` | `#4B5E53` | Fog Green | Borders, dividers, structure |
117
- | `--theme-atmospheric-accents-2` | `#ACC3B3` | Horizon Glow | CTAs, interactive elements, links |
118
-
119
- #### Functional Accents (0-1)
120
-
121
- | Token | Hex | Name | Usage |
122
- |-------|-----|------|-------|
123
- | `--theme-functional-accents-0` | `#E8AB7F` | Terminal Amber | Warnings, attention, alarms |
124
- | `--theme-functional-accents-1` | `#8B8CF4` | Interface Iris | AI states, system intelligence |
125
-
126
- ### Typography
127
-
128
- | Token | Font | Usage |
129
- |-------|------|-------|
130
- | `--font-display` | Space Grotesk | Headlines, H1-H6, architectural voice |
131
- | `--font-body` | Inter | Body text, paragraphs, UI elements |
132
- | `--font-monospace` | JetBrains Mono | Code, data, labels, system status |
133
-
134
- ### Semantic Mappings
135
-
136
- | Token | Maps To | Usage |
137
- |-------|---------|-------|
138
- | `--formant-bg-primary` | `--theme-neutrals-0` | Page backgrounds |
139
- | `--formant-bg-secondary` | `--theme-neutrals-1` | Cards, elevated surfaces |
140
- | `--formant-text-primary` | `--theme-neutrals-3` | Headlines, primary text |
141
- | `--formant-text-secondary` | `--theme-neutrals-2` | Body text, captions |
142
- | `--formant-accent-primary` | `--theme-atmospheric-accents-2` | Buttons, links, interactive |
143
- | `--formant-accent-secondary` | `--theme-atmospheric-accents-0` | Active states, hover |
144
- | `--formant-accent-warning` | `--theme-functional-accents-0` | Warnings, errors |
145
- | `--formant-accent-ai` | `--theme-functional-accents-1` | AI indicators |
146
-
147
- ## HTML Element Showcase
148
-
149
- ### Typography
150
-
151
- ```html
152
- <h1>Heading Level 1</h1>
153
- <h2>Heading Level 2</h2>
154
- <h3>Heading Level 3 (Accent Color)</h3>
155
-
156
- <p>Body text with <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
157
-
158
- <blockquote>
159
- <p>A quoted statement with architectural authority.</p>
160
- <cite>— Source Attribution</cite>
161
- </blockquote>
162
-
163
- <pre><code>// Code blocks use --font-monospace
164
- const fleet = await deploy({ autonomous: true });</code></pre>
165
- ```
166
-
167
- ### Forms
168
-
169
- ```html
170
- <form>
171
- <label for="email">Email Address</label>
172
- <input type="email" id="email" placeholder="ops@formant.io" required>
173
-
174
- <label for="message">Message</label>
175
- <textarea id="message"></textarea>
176
-
177
- <label>
178
- <input type="checkbox"> Enable Autonomy
179
- </label>
180
-
181
- <label>
182
- <input type="radio" name="priority" value="high"> High Priority
183
- </label>
184
-
185
- <button type="submit">Submit</button>
186
- <button type="button">Cancel</button>
187
- </form>
188
- ```
189
-
190
- ### Data Attributes
191
-
192
- ```html
193
- <!-- Eyebrow Label -->
194
- <div data-eyebrow>Section Label</div>
195
-
196
- <!-- Status Tags -->
197
- <span data-tag="resolved">RESOLVED</span>
198
- <span data-tag="investigating">INVESTIGATING</span>
199
- <span data-tag="warning">WARNING</span>
200
- <span data-tag="ai-active">AI ACTIVE</span>
201
-
202
- <!-- Alert Boxes -->
203
- <div data-alert="info">Information message</div>
204
- <div data-alert="warning">Warning message</div>
205
- <div data-alert="ai">AI system message</div>
206
- ```
207
-
208
- ## Button Types
209
-
210
- ```html
211
- <button>Primary Action</button>
212
- <button type="button">Secondary Action</button>
213
- <button type="reset">Tertiary/Reset</button>
214
- <button data-variant="warning">Warning Action</button>
215
- ```
216
-
217
- ## Layout Utilities
218
-
219
- When using `formant-layout-utilities.css`:
220
-
221
- ```html
222
- <!-- Grid layouts -->
223
- <div data-grid="2">
224
- <div>Column 1</div>
225
- <div>Column 2</div>
226
- </div>
227
-
228
- <!-- Flex layouts -->
229
- <div data-flex="row" data-gap="2">
230
- <div>Item 1</div>
231
- <div>Item 2</div>
232
- </div>
233
-
234
- <!-- Container -->
235
- <div data-container>
236
- <p>Centered content with max-width</p>
237
- </div>
238
- ```
239
-
240
- ## Full Example Page
241
-
242
- ```html
243
- <!DOCTYPE html>
244
- <html lang="en">
245
- <head>
246
- <meta charset="UTF-8">
247
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
248
- <title>Fleet Dashboard</title>
249
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-aesthetics.css">
250
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@formant/aesthetics@0.1.0/formant-layout-utilities.css">
251
- </head>
252
- <body>
253
- <header data-container>
254
- <div data-eyebrow>MISSION CONTROL</div>
255
- <h1>Fleet Status Overview</h1>
256
- </header>
257
-
258
- <main data-container>
259
- <div data-grid="3">
260
- <article>
261
- <h3>Online Robots</h3>
262
- <p data-tag="resolved">12 ACTIVE</p>
263
- </article>
264
- <article>
265
- <h3>Alerts</h3>
266
- <p data-tag="warning">2 PENDING</p>
267
- </article>
268
- <article>
269
- <h3>AI Systems</h3>
270
- <p data-tag="ai-active">OPERATIONAL</p>
271
- </article>
272
- </div>
273
-
274
- <div data-alert="info">
275
- All systems nominal. Fleet ready for autonomous operations.
276
- </div>
277
-
278
- <h2>Recent Commands</h2>
279
- <table>
280
- <thead>
281
- <tr><th>Time</th><th>Robot</th><th>Command</th><th>Status</th></tr>
282
- </thead>
283
- <tbody>
284
- <tr><td>10:42 AM</td><td>Spot-01</td><td>Go to waypoint</td><td data-tag="resolved">Complete</td></tr>
285
- <tr><td>10:38 AM</td><td>Drone-03</td><td>Survey perimeter</td><td data-tag="investigating">In Progress</td></tr>
286
- </tbody>
287
- </table>
288
- </main>
289
- </body>
290
- </html>
291
- ```
292
-
293
- ## Browser Support
294
-
295
- - Chrome/Edge 88+
296
- - Firefox 78+
297
- - Safari 14+
298
-
299
- Requires CSS Custom Properties support.
300
-
301
- ## Version
302
-
303
- 0.1.0 — Aligned with Formant Design System Version 2026.1
304
-
305
- ## License
306
-
307
- MIT
package/formant-aesthetics.css CHANGED
@@ -1252,12 +1252,88 @@ main {
1252
1252
  padding: var(--formant-space-8) var(--formant-space-6);
1253
1253
  }
1254
1254
 
1255
- header {
1256
- margin-bottom: var(--formant-space-12);
1255
+ /* Site header - fixed navigation bar (direct child of body) */
1256
+ body > header {
1257
+ position: fixed;
1258
+ top: 0;
1259
+ left: 0;
1260
+ right: 0;
1261
+ height: 64px;
1262
+ background-color: rgba(var(--theme-neutrals-0-rgb), 0.85);
1263
+ backdrop-filter: blur(16px);
1264
+ border-bottom: 1px solid var(--formant-border-subtle);
1265
+ display: flex;
1266
+ align-items: center;
1267
+ justify-content: space-between;
1268
+ padding: 0 2rem;
1269
+ z-index: 1000;
1270
+ }
1271
+
1272
+ body > header a:first-child {
1273
+ display: flex;
1274
+ align-items: center;
1275
+ gap: 0.75rem;
1276
+ font-family: var(--font-display);
1277
+ font-size: 1.25rem;
1278
+ font-weight: 600;
1279
+ color: var(--theme-neutrals-3);
1280
+ text-decoration: none;
1281
+ letter-spacing: -0.02em;
1282
+ flex-shrink: 0;
1283
+ }
1284
+
1285
+ body > header a:first-child img {
1286
+ height: 32px;
1287
+ width: auto;
1288
+ display: block;
1289
+ }
1290
+
1291
+ body > header nav {
1292
+ flex: 1;
1293
+ margin: 0 2rem;
1294
+ border-bottom: none;
1295
+ background-color: transparent;
1296
+ backdrop-filter: none;
1257
1297
  }
1258
1298
 
1259
- footer {
1299
+ body > header nav ul {
1300
+ justify-content: center;
1301
+ }
1302
+
1303
+ body > header nav a {
1304
+ font-size: 13px;
1305
+ letter-spacing: 0.06em;
1306
+ text-transform: uppercase;
1307
+ }
1308
+
1309
+ body > header input[type="search"] {
1310
+ width: 200px;
1311
+ }
1312
+
1313
+ /* Content headers - inside main, article, section (boxed styling) */
1314
+ main > header,
1315
+ article > header,
1316
+ section > header {
1260
1317
  background-color: var(--theme-neutrals-1);
1318
+ border: 1px solid var(--formant-border-subtle);
1319
+ padding: var(--formant-space-6) var(--formant-space-8);
1320
+ margin-bottom: var(--formant-space-12);
1321
+ border-bottom-left-radius: var(--formant-radius-md);
1322
+ border-bottom-right-radius: var(--formant-radius-md);
1323
+ }
1324
+
1325
+ /* Unset h1, h2 margins when inside content headers */
1326
+ main > header h1,
1327
+ main > header h2,
1328
+ article > header h1,
1329
+ article > header h2,
1330
+ section > header h1,
1331
+ section > header h2 {
1332
+ margin: 0;
1333
+ }
1334
+
1335
+ /* Site footer (direct child of body) */
1336
+ body > footer {
1261
1337
  margin-top: var(--formant-space-12);
1262
1338
  padding-top: var(--formant-space-8);
1263
1339
  border-top: 1px solid var(--formant-border-subtle);
@@ -1265,6 +1341,20 @@ footer {
1265
1341
  color: var(--formant-text-muted);
1266
1342
  }
1267
1343
 
1344
+ /* Content footers - inside main, article, section (boxed styling) */
1345
+ main > footer,
1346
+ article > footer,
1347
+ section > footer {
1348
+ background-color: var(--theme-neutrals-1);
1349
+ border: 1px solid var(--formant-border-subtle);
1350
+ padding: var(--formant-space-6) var(--formant-space-8);
1351
+ margin-top: var(--formant-space-12);
1352
+ border-top-left-radius: var(--formant-radius-md);
1353
+ border-top-right-radius: var(--formant-radius-md);
1354
+ font-size: 0.875rem;
1355
+ color: var(--formant-text-muted);
1356
+ }
1357
+
1268
1358
  article {
1269
1359
  margin-bottom: var(--formant-space-12);
1270
1360
  }
@@ -1686,7 +1776,7 @@ body > footer {
1686
1776
  margin-top: 0;
1687
1777
  }
1688
1778
 
1689
- body > footer > div {
1779
+ body > footer > * {
1690
1780
  max-width: 1200px;
1691
1781
  margin: 0 auto;
1692
1782
  padding: 0 2.5rem;
@@ -1794,7 +1884,7 @@ input[type="time"]::-webkit-calendar-picker-indicator {
1794
1884
  min-height: 60vh;
1795
1885
  }
1796
1886
 
1797
- body > footer > div {
1887
+ body > footer > * {
1798
1888
  padding: 0 var(--formant-space-5);
1799
1889
  }
1800
1890
  }
@@ -1830,7 +1920,7 @@ input[type="time"]::-webkit-calendar-picker-indicator {
1830
1920
  padding: var(--formant-space-4);
1831
1921
  }
1832
1922
 
1833
- body > footer > div {
1923
+ body > footer > * {
1834
1924
  flex-direction: column;
1835
1925
  align-items: flex-start;
1836
1926
  gap: var(--formant-space-8);
package/package.json CHANGED
@@ -1,12 +1,10 @@
1
1
  {
2
2
  "name": "@formant/aesthetics",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Classless CSS framework based on the Formant Design System. Styles standard HTML elements without requiring any classes.",
5
5
  "main": "formant-aesthetics.css",
6
6
  "files": [
7
7
  "formant-aesthetics.css",
8
- "formant-properties.css",
9
- "formant-layout-utilities.css",
10
8
  "README.md"
11
9
  ],
12
10
  "scripts": {
package/formant-layout-utilities.css DELETED
@@ -1,81 +0,0 @@
1
- /**
2
- * Formant Layout Utilities
3
- * Version: 2026.1
4
- *
5
- * Optional layout helpers using data-variant attributes.
6
- * These are NOT part of the core classless CSS - import separately when needed.
7
- *
8
- * Usage:
9
- * <link rel="stylesheet" href="formant-aesthetics.css">
10
- * <link rel="stylesheet" href="formant-layout-utilities.css">
11
- */
12
-
13
- /* ==========================================================================
14
- Grid - Responsive auto-fit grid
15
- ========================================================================== */
16
- [data-variant="grid"] {
17
- display: grid;
18
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
19
- gap: var(--formant-space-8);
20
- margin: var(--formant-space-8) 0;
21
- }
22
-
23
- /* ==========================================================================
24
- Stack - Vertical flex layout
25
- ========================================================================== */
26
- [data-variant="stack"] {
27
- display: flex;
28
- flex-direction: column;
29
- gap: var(--formant-space-2);
30
- }
31
-
32
- /* ==========================================================================
33
- Row - Horizontal flex layout with center alignment
34
- ========================================================================== */
35
- [data-variant="row"] {
36
- display: flex;
37
- align-items: center;
38
- gap: 0.75rem;
39
- }
40
-
41
- /* ==========================================================================
42
- Center - Centered flex container (full height)
43
- ========================================================================== */
44
- [data-variant="center"] {
45
- display: flex;
46
- flex-direction: column;
47
- align-items: center;
48
- justify-content: center;
49
- height: 100%;
50
- text-align: center;
51
- gap: 1rem;
52
- }
53
-
54
- /* ==========================================================================
55
- Suggestions - Wrapped horizontal button row
56
- ========================================================================== */
57
- [data-variant="suggestions"] {
58
- display: flex;
59
- gap: 0.5rem;
60
- flex-wrap: wrap;
61
- justify-content: center;
62
- }
63
-
64
- /* ==========================================================================
65
- Responsive Adjustments
66
- ========================================================================== */
67
- @media (max-width: 900px) {
68
- [data-variant="grid"] {
69
- grid-template-columns: 1fr 1fr;
70
- }
71
- }
72
-
73
- @media (max-width: 600px) {
74
- [data-variant="grid"] {
75
- grid-template-columns: 1fr;
76
- }
77
-
78
- [data-variant="row"] {
79
- flex-wrap: wrap;
80
- }
81
- }
package/formant-properties.css DELETED
@@ -1,474 +0,0 @@
1
- /**
2
- * Formant Properties - CSS Custom Properties (Themed Naming)
3
- * Version: 2026.1-theme
4
- *
5
- * Systematic CSS custom properties using theme-based naming with indexed arrays.
6
- *
7
- * Usage:
8
- * @import url('formant-properties.css');
9
- *
10
- * .my-component {
11
- * background-color: var(--theme-neutrals-0);
12
- * color: var(--theme-atmospheric-accents-2);
13
- * font-family: var(--font-display);
14
- * }
15
- */
16
-
17
- /* ==========================================================================
18
- THEME COLORS - Neutrals (0-3)
19
- ========================================================================== */
20
- :root {
21
- /**
22
- * --theme-neutrals-0: Deep Command
23
- * Darkest neutral - primary backgrounds, the void
24
- */
25
- --theme-neutrals-0: #0A0F11;
26
- --theme-neutrals-0-rgb: 10, 15, 17;
27
-
28
- /**
29
- * --theme-neutrals-1: Slate Mist
30
- * Second darkest - card backgrounds, secondary surfaces
31
- */
32
- --theme-neutrals-1: #202428;
33
- --theme-neutrals-1-rgb: 32, 36, 40;
34
-
35
- /**
36
- * --theme-neutrals-2: System Neutral
37
- * Mid-tone - body text, captions, secondary content
38
- * Base for opacity-based border system
39
- */
40
- --theme-neutrals-2: #A3ABA9;
41
- --theme-neutrals-2-rgb: 163, 171, 169;
42
-
43
- /**
44
- * --theme-neutrals-3: Formant White
45
- * Lightest neutral - primary text, headlines
46
- */
47
- --theme-neutrals-3: #F2F3F4;
48
- --theme-neutrals-3-rgb: 242, 243, 244;
49
-
50
- /* ==========================================================================
51
- THEME COLORS - Atmospheric Accents (0-2)
52
- ========================================================================== */
53
-
54
- /**
55
- * --theme-atmospheric-accents-0: Ethereal Teal
56
- * Active states, hover backgrounds, subtle elevation
57
- * "Something is happening here" indicator
58
- */
59
- --theme-atmospheric-accents-0: #2C4142;
60
- --theme-atmospheric-accents-0-rgb: 44, 65, 66;
61
-
62
- /**
63
- * --theme-atmospheric-accents-1: Fog Green
64
- * Borders, dividers, muted accents, field names
65
- * The structural color - present everywhere, visible nowhere
66
- */
67
- --theme-atmospheric-accents-1: #4B5E53;
68
- --theme-atmospheric-accents-1-rgb: 75, 94, 83;
69
-
70
- /**
71
- * --theme-atmospheric-accents-2: Horizon Glow
72
- * Primary CTAs, interactive elements, success states, links
73
- * Muted green accent - guides without demanding
74
- */
75
- --theme-atmospheric-accents-2: #ACC3B3;
76
- --theme-atmospheric-accents-2-rgb: 172, 195, 179;
77
-
78
- /* ==========================================================================
79
- THEME COLORS - Functional Accents (0-1)
80
- ========================================================================== */
81
-
82
- /**
83
- * --theme-functional-accents-0: Terminal Amber
84
- * Warnings, eyebrow text, alarm labels
85
- * The amber glow of a critical instrument reading
86
- */
87
- --theme-functional-accents-0: #E8AB7F;
88
- --theme-functional-accents-0-rgb: 232, 171, 127;
89
-
90
- /**
91
- * --theme-functional-accents-1: Interface Iris
92
- * AI states, system intelligence indicators
93
- * Reserved for moments where the system acts autonomously
94
- */
95
- --theme-functional-accents-1: #8B8CF4;
96
- --theme-functional-accents-1-rgb: 139, 140, 244;
97
-
98
- /* ==========================================================================
99
- SEMANTIC MAPPINGS - Backgrounds
100
- ========================================================================== */
101
- --formant-bg-primary: var(--theme-neutrals-0);
102
- --formant-bg-secondary: var(--theme-neutrals-1);
103
- --formant-bg-elevated: var(--theme-neutrals-1);
104
- --formant-bg-interactive: rgba(44, 65, 66, 0.2);
105
-
106
- /* ==========================================================================
107
- SEMANTIC MAPPINGS - Text
108
- ========================================================================== */
109
- --formant-text-primary: var(--theme-neutrals-3);
110
- --formant-text-secondary: var(--theme-neutrals-2);
111
- --formant-text-muted: rgba(163, 171, 169, 0.6);
112
-
113
- /* ==========================================================================
114
- SEMANTIC MAPPINGS - Interactive/Accent
115
- ========================================================================== */
116
- --formant-accent-primary: var(--theme-atmospheric-accents-2);
117
- --formant-accent-secondary: var(--theme-atmospheric-accents-0);
118
- --formant-accent-warning: var(--theme-functional-accents-0);
119
- --formant-accent-ai: var(--theme-functional-accents-1);
120
-
121
- /* ==========================================================================
122
- SEMANTIC MAPPINGS - Status
123
- ========================================================================== */
124
- --formant-status-success: var(--theme-atmospheric-accents-2);
125
- --formant-status-warning: var(--theme-functional-accents-0);
126
- --formant-status-error: var(--theme-functional-accents-0);
127
- --formant-status-info: var(--theme-functional-accents-1);
128
- --formant-status-ai-active: var(--theme-functional-accents-1);
129
-
130
- /* ==========================================================================
131
- BORDER SYSTEM - Opacity-based (never solid on dark backgrounds)
132
- ========================================================================== */
133
- --formant-border-subtle: rgba(163, 171, 169, 0.1);
134
- --formant-border-default: rgba(163, 171, 169, 0.2);
135
- --formant-border-strong: rgba(163, 171, 169, 0.4);
136
- --formant-border-focus: var(--theme-atmospheric-accents-2);
137
-
138
- /* ==========================================================================
139
- TYPOGRAPHY - Font Families (Theme Tokens)
140
- ========================================================================== */
141
-
142
- /**
143
- * --font-display: Space Grotesk
144
- * The architectural voice - headlines, display text, H1-H6
145
- */
146
- --font-display: 'Space Grotesk', sans-serif;
147
-
148
- /**
149
- * --font-body: Inter
150
- * The human voice - body text, paragraphs, UI elements
151
- */
152
- --font-body: 'Inter', sans-serif;
153
-
154
- /**
155
- * --font-monospace: JetBrains Mono
156
- * The machine voice - code, data, labels, system status
157
- */
158
- --font-monospace: 'JetBrains Mono', monospace;
159
-
160
- /* ==========================================================================
161
- TYPOGRAPHY - Legacy Font Tokens (for backwards compatibility)
162
- ========================================================================== */
163
- --formant-font-heading: var(--font-display);
164
- --formant-font-body: var(--font-body);
165
- --formant-font-mono: var(--font-monospace);
166
-
167
- /* ==========================================================================
168
- TYPOGRAPHY - Font Weights
169
- ========================================================================== */
170
- --formant-weight-light: 300;
171
- --formant-weight-regular: 400;
172
- --formant-weight-medium: 500;
173
- --formant-weight-semibold: 600;
174
- --formant-weight-bold: 700;
175
-
176
- /* ==========================================================================
177
- TYPOGRAPHY - Letter Spacing (Tracking)
178
- ========================================================================== */
179
- --formant-tracking-tight: -0.02em;
180
- --formant-tracking-normal: 0;
181
- --formant-tracking-wide: 0.02em;
182
- --formant-tracking-wider: 0.08em;
183
- --formant-tracking-mono: 0.1em;
184
- --formant-tracking-eyebrow: 0.2em;
185
-
186
- /* ==========================================================================
187
- TYPOGRAPHY - Line Heights (Leading)
188
- ========================================================================== */
189
- --formant-leading-tight: 1.2;
190
- --formant-leading-normal: 1.6;
191
- --formant-leading-relaxed: 1.75;
192
- --formant-leading-data: 2.2;
193
-
194
- /* ==========================================================================
195
- TYPOGRAPHY - Sizes
196
- ========================================================================== */
197
- --formant-text-xs: 0.625rem;
198
- --formant-text-sm: 0.75rem;
199
- --formant-text-base: 0.875rem;
200
- --formant-text-md: 1rem;
201
- --formant-text-lg: 1.0625rem;
202
- --formant-text-xl: 1.25rem;
203
- --formant-text-2xl: 1.5rem;
204
- --formant-text-3xl: 2rem;
205
- --formant-text-4xl: 3.25rem;
206
- --formant-text-5xl: 6rem;
207
-
208
- /* ==========================================================================
209
- SPACING SCALE
210
- ========================================================================== */
211
- --formant-space-0: 0;
212
- --formant-space-1: 0.25rem;
213
- --formant-space-2: 0.5rem;
214
- --formant-space-3: 0.75rem;
215
- --formant-space-4: 1rem;
216
- --formant-space-5: 1.25rem;
217
- --formant-space-6: 1.5rem;
218
- --formant-space-8: 2rem;
219
- --formant-space-10: 2.5rem;
220
- --formant-space-12: 3rem;
221
- --formant-space-16: 4rem;
222
- --formant-space-20: 5rem;
223
- --formant-space-24: 6rem;
224
- --formant-space-32: 8rem;
225
-
226
- /* ==========================================================================
227
- BORDER RADIUS
228
- ========================================================================== */
229
- --formant-radius-none: 0;
230
- --formant-radius-sm: 2px;
231
- --formant-radius-md: 4px;
232
- --formant-radius-lg: 6px;
233
- --formant-radius-xl: 8px;
234
- --formant-radius-full: 9999px;
235
-
236
- /* ==========================================================================
237
- SHADOWS & ELEVATION
238
- ========================================================================== */
239
- --formant-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
240
- --formant-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
241
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
242
- --formant-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
243
- 0 4px 6px -2px rgba(0, 0, 0, 0.05);
244
- --formant-shadow-glow: 0 0 20px rgba(172, 195, 179, 0.15);
245
- --formant-shadow-glow-strong: 0 0 30px rgba(172, 195, 179, 0.25);
246
-
247
- /* ==========================================================================
248
- FOCUS & ACCESSIBILITY
249
- ========================================================================== */
250
- --formant-focus-ring: 0 0 0 2px var(--theme-neutrals-0),
251
- 0 0 0 4px var(--theme-atmospheric-accents-2);
252
- --formant-focus-ring-offset: 2px;
253
-
254
- /* ==========================================================================
255
- TRANSITIONS & ANIMATION
256
- ========================================================================== */
257
- --formant-transition-fast: 150ms ease;
258
- --formant-transition-base: 200ms ease;
259
- --formant-transition-slow: 300ms ease;
260
- --formant-transition-fade-up: 0.7s ease;
261
-
262
- --formant-animation-fade-up-distance: 24px;
263
- --formant-animation-stagger-delay: 80ms;
264
-
265
- /* ==========================================================================
266
- Z-INDEX SCALE
267
- ========================================================================== */
268
- --formant-z-base: 0;
269
- --formant-z-dropdown: 100;
270
- --formant-z-sticky: 200;
271
- --formant-z-fixed: 300;
272
- --formant-z-modal-backdrop: 400;
273
- --formant-z-modal: 500;
274
- --formant-z-popover: 600;
275
- --formant-z-tooltip: 700;
276
-
277
- /* ==========================================================================
278
- LAYOUT - Container & Grid
279
- ========================================================================== */
280
- --formant-container-max: 1200px;
281
- --formant-container-padding: 2.5rem;
282
- --formant-container-padding-mobile: 1.25rem;
283
-
284
- /* ==========================================================================
285
- COMPONENT TOKENS - Buttons
286
- ========================================================================== */
287
- --formant-button-padding: 0.75rem 1.5rem;
288
- --formant-button-font-size: 0.8125rem;
289
- --formant-button-font-weight: 500;
290
- --formant-button-letter-spacing: 0.04em;
291
- --formant-button-radius: var(--formant-radius-md);
292
-
293
- --formant-button-primary-bg: var(--theme-atmospheric-accents-2);
294
- --formant-button-primary-text: var(--theme-neutrals-0);
295
- --formant-button-primary-hover: #ffffff;
296
-
297
- --formant-button-secondary-bg: transparent;
298
- --formant-button-secondary-text: var(--theme-atmospheric-accents-2);
299
- --formant-button-secondary-border: var(--theme-atmospheric-accents-2);
300
- --formant-button-secondary-hover-bg: rgba(172, 195, 179, 0.1);
301
-
302
- --formant-button-ghost-bg: transparent;
303
- --formant-button-ghost-text: var(--theme-neutrals-2);
304
- --formant-button-ghost-border: var(--theme-neutrals-2);
305
-
306
- --formant-button-warning-bg: var(--theme-functional-accents-0);
307
- --formant-button-warning-text: var(--theme-neutrals-0);
308
- --formant-button-warning-hover: #F5C6A0;
309
-
310
- /* ==========================================================================
311
- COMPONENT TOKENS - Inputs
312
- ========================================================================== */
313
- --formant-input-padding: 0.75rem 1rem;
314
- --formant-input-font-size: 0.875rem;
315
- --formant-input-bg: var(--theme-neutrals-0);
316
- --formant-input-border: var(--formant-border-default);
317
- --formant-input-radius: var(--formant-radius-md);
318
- --formant-input-focus-border: var(--theme-atmospheric-accents-2);
319
- --formant-input-placeholder: rgba(163, 171, 169, 0.5);
320
-
321
- --formant-label-font-size: 0.625rem;
322
- --formant-label-letter-spacing: 0.15em;
323
- --formant-label-color: var(--theme-neutrals-2);
324
- --formant-label-transform: uppercase;
325
-
326
- /* ==========================================================================
327
- COMPONENT TOKENS - Tags & Badges
328
- ========================================================================== */
329
- --formant-tag-padding: 0.25rem 0.75rem;
330
- --formant-tag-font-size: 0.6875rem;
331
- --formant-tag-letter-spacing: var(--formant-tracking-mono);
332
- --formant-tag-radius: var(--formant-radius-sm);
333
-
334
- --formant-tag-mist-bg: rgba(75, 94, 83, 0.3);
335
- --formant-tag-mist-text: var(--theme-atmospheric-accents-2);
336
- --formant-tag-mist-border: rgba(75, 94, 83, 0.4);
337
-
338
- --formant-tag-teal-bg: rgba(44, 65, 66, 0.4);
339
- --formant-tag-teal-text: var(--theme-atmospheric-accents-2);
340
-
341
- --formant-tag-amber-bg: rgba(232, 171, 127, 0.1);
342
- --formant-tag-amber-text: var(--theme-functional-accents-0);
343
-
344
- --formant-tag-iris-bg: rgba(139, 140, 244, 0.1);
345
- --formant-tag-iris-text: var(--theme-functional-accents-1);
346
-
347
- /* ==========================================================================
348
- COMPONENT TOKENS - Alerts
349
- ========================================================================== */
350
- --formant-alert-padding: 1rem;
351
- --formant-alert-radius: var(--formant-radius-md);
352
- --formant-alert-font-size: 0.9375rem;
353
-
354
- --formant-alert-info-bg: rgba(44, 65, 66, 0.3);
355
- --formant-alert-info-text: var(--theme-atmospheric-accents-2);
356
- --formant-alert-info-indicator: var(--theme-atmospheric-accents-2);
357
-
358
- --formant-alert-warning-bg: rgba(232, 171, 127, 0.08);
359
- --formant-alert-warning-text: var(--theme-functional-accents-0);
360
- --formant-alert-warning-indicator: var(--theme-functional-accents-0);
361
-
362
- --formant-alert-ai-bg: rgba(139, 140, 244, 0.08);
363
- --formant-alert-ai-text: var(--theme-functional-accents-1);
364
- --formant-alert-ai-indicator: var(--theme-functional-accents-1);
365
-
366
- /* ==========================================================================
367
- COMPONENT TOKENS - Cards
368
- ========================================================================== */
369
- --formant-card-bg: var(--theme-neutrals-1);
370
- --formant-card-border: var(--formant-border-subtle);
371
- --formant-card-radius: var(--formant-radius-md);
372
- --formant-card-padding: 1.5rem;
373
- --formant-card-hover-border: rgba(172, 195, 179, 0.3);
374
- --formant-card-hover-bg: rgba(44, 65, 66, 0.2);
375
-
376
- /* ==========================================================================
377
- COMPONENT TOKENS - Navigation
378
- ========================================================================== */
379
- --formant-nav-height: 64px;
380
- --formant-nav-bg: rgba(10, 15, 17, 0.85);
381
- --formant-nav-backdrop: blur(16px);
382
- --formant-nav-link-color: var(--theme-neutrals-2);
383
- --formant-nav-link-hover: var(--theme-neutrals-3);
384
- --formant-nav-link-size: 0.875rem;
385
- --formant-nav-link-weight: 500;
386
-
387
- /* ==========================================================================
388
- COMPONENT TOKENS - Tables
389
- ========================================================================== */
390
- --formant-table-header-font: var(--font-monospace);
391
- --formant-table-header-size: 0.625rem;
392
- --formant-table-header-tracking: var(--formant-tracking-mono);
393
- --formant-table-header-color: var(--theme-neutrals-2);
394
- --formant-table-cell-padding: 0.75rem 1rem;
395
- --formant-table-border: var(--formant-border-subtle);
396
- --formant-table-hover: rgba(44, 65, 66, 0.2);
397
-
398
- /* ==========================================================================
399
- SCROLLBAR
400
- ========================================================================== */
401
- --formant-scrollbar-width: 8px;
402
- --formant-scrollbar-track: var(--theme-neutrals-0);
403
- --formant-scrollbar-thumb: var(--theme-atmospheric-accents-1);
404
- --formant-scrollbar-thumb-hover: var(--theme-atmospheric-accents-2);
405
-
406
- /* ==========================================================================
407
- SELECTION
408
- ========================================================================== */
409
- --formant-selection-bg: rgba(172, 195, 179, 0.3);
410
- --formant-selection-text: var(--theme-neutrals-3);
411
- }
412
-
413
- /* ==========================================================================
414
- LIGHT THEME - Override color variables only
415
- Apply with <html data-theme="light"> or <body data-theme="light">
416
- ========================================================================== */
417
- [data-theme="light"] {
418
- /* Neutrals - inverted luminance */
419
- --theme-neutrals-0: #FFFFFF;
420
- --theme-neutrals-0-rgb: 255, 255, 255;
421
-
422
- --theme-neutrals-1: #F2F3F4;
423
- --theme-neutrals-1-rgb: 242, 243, 244;
424
-
425
- --theme-neutrals-2: #6B7370;
426
- --theme-neutrals-2-rgb: 107, 115, 112;
427
-
428
- --theme-neutrals-3: #0A0F11;
429
- --theme-neutrals-3-rgb: 10, 15, 17;
430
-
431
- /* Atmospheric Accents - darker for light backgrounds */
432
- --theme-atmospheric-accents-0: #D6E5DC;
433
- --theme-atmospheric-accents-0-rgb: 214, 229, 220;
434
-
435
- --theme-atmospheric-accents-1: #8FA69A;
436
- --theme-atmospheric-accents-1-rgb: 143, 166, 154;
437
-
438
- --theme-atmospheric-accents-2: #3B6B52;
439
- --theme-atmospheric-accents-2-rgb: 59, 107, 82;
440
-
441
- /* Functional Accents - deeper for contrast on light */
442
- --theme-functional-accents-0: #C07840;
443
- --theme-functional-accents-0-rgb: 192, 120, 64;
444
-
445
- --theme-functional-accents-1: #5B5CD4;
446
- --theme-functional-accents-1-rgb: 91, 92, 212;
447
-
448
- /* Borders - darker base for light backgrounds */
449
- --formant-border-subtle: rgba(10, 15, 17, 0.08);
450
- --formant-border-default: rgba(10, 15, 17, 0.15);
451
- --formant-border-strong: rgba(10, 15, 17, 0.3);
452
- --formant-border-focus: var(--theme-atmospheric-accents-2);
453
-
454
- /* Text */
455
- --formant-text-muted: rgba(10, 15, 17, 0.5);
456
-
457
- /* Selection */
458
- --formant-selection-bg: rgba(59, 107, 82, 0.2);
459
- --formant-selection-text: var(--theme-neutrals-3);
460
-
461
- /* Shadows - visible on light */
462
- --formant-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
463
- --formant-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
464
- --formant-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
465
- --formant-shadow-glow: 0 0 20px rgba(59, 107, 82, 0.12);
466
-
467
- /* Focus ring */
468
- --formant-focus-ring: 0 0 0 2px var(--theme-neutrals-0), 0 0 0 4px var(--theme-atmospheric-accents-2);
469
- }
470
-
471
- /* ==========================================================================
472
- FONT IMPORTS
473
- ========================================================================== */
474
- @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');