@nadicodeai/design-system 10.1.0 → 12.1.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.
Files changed (12) hide show
  1. package/AGENTS.md +1 -1
  2. package/DESIGN.md +381 -635
  3. package/GLOSSARY.md +22 -19
  4. package/README.md +40 -23
  5. package/data/reserved-agent-identifiers.json +1 -0
  6. package/dist/css/host.css +88 -102
  7. package/dist/css/index.css +154 -353
  8. package/dist/css/tokens.css +53 -100
  9. package/dist/tailwind/nadicode.tailwind.json +13 -33
  10. package/dist/tokens/nadicode.dtcg-resolved.json +1500 -2242
  11. package/dist/tokens/nadicode.dtcg.json +648 -1833
  12. package/package.json +6 -4
package/GLOSSARY.md CHANGED
@@ -15,37 +15,40 @@ One product's visual rules for applying the Foundation. nadicode has three Regis
15
15
  _Avoid_: Theme, skin
16
16
 
17
17
  **Neutral spine**:
18
- The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour is reserved for the semantic feedback roles, the two greens in their scoped duties, the chart palettes, and the Agent identity palette.
18
+ The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour belongs to the Identity palette, the semantic feedback roles and the chart palette.
19
19
 
20
20
  **Functional tier**:
21
21
  The semantic colour roles and chart colours used for interface state and data.
22
22
 
23
- **Agent identity palette**:
24
- The five full-strength hues, plus the white and ink poles, that paint Agent identity visuals, the brand book's identity planes, and generated editorial imagery.
25
- _Avoid_: Swatch, theme color
26
-
27
- **Verde vivo**:
28
- Nadia's presence accent: the colour of the marks that say Nadia herself is here.
23
+ **Identity palette**:
24
+ The brand's colour: five full-strength hues, cobalto, verde, arancio, giallo and rosso, with the white and ink poles type sits on. They appear flat as website section grounds, stages, accents, Agents, the logo and imagery, and never on a control.
25
+ _Avoid_: Swatch, theme color, Agent identity palette
29
26
 
30
27
  **Identity plane**:
31
- A surface painted edge to edge in one Agent identity palette colour.
28
+ A flat surface painted edge to edge in one Identity palette hue, such as a website section's ground, a stage, or a field in an image.
29
+
30
+ **Stage**:
31
+ The Identity palette ground behind a floating product view, which glass over it shows through.
32
32
 
33
33
  ### Structure and surfaces
34
34
 
35
- **Page grammar**:
36
- The website Register's structural vocabulary of frames, rows, lanes, fills, seams, markers, grids, and stages.
35
+ **Website column**:
36
+ The website's one centred content column, whose edges are drawn as rails through every full-bleed section.
37
37
 
38
38
  **Page composition**:
39
39
  One of the five repeated page shapes the products build from: Overview, Collection, Object, Configuration and Library, each defined by the first question it answers.
40
40
 
41
- **Delivery tier**:
42
- One of the five homes a reusable design decision ships from: tokens, CSS components, compositions, layout grammar, or specimens. Each decision has exactly one.
43
-
44
41
  **Material ladder**:
45
- The Portal and desktop Registers' structure: one continuous workspace ground and one solid fill for every object, with glass kept for floating chrome.
42
+ The Portal and desktop Registers' structure: one continuous workspace ground with solid objects at four heights above it, resting, raised, floating and modal, and glass kept for floating chrome.
43
+
44
+ **Height**:
45
+ How far a solid surface sits above the workspace ground, chosen by its physical role: shadow shows it in light and tone shows it in dark.
46
+
47
+ **Glass**:
48
+ A translucent, blurred and saturated material for floating chrome over colour or motion; content never takes it.
46
49
 
47
50
  **Seam**:
48
- The visible structural line where parts of the Page grammar meet.
51
+ A visible structural line between two parts of a layout, drawn as one hairline in the line colour.
49
52
 
50
53
  **Status vocabulary**:
51
54
  The shared five-tone visual language for product status. Each product owns its status families, values, and mapping to those tones.
@@ -53,9 +56,6 @@ The shared five-tone visual language for product status. Each product owns its s
53
56
  **Workflow states**:
54
57
  The five colours that mark where a piece of agentic work stands: ready, running, in review, blocked, and complete. They are separate from the Status vocabulary.
55
58
 
56
- **Content surface**:
57
- A visual family for presenting a specific kind of content inside the Page grammar.
58
-
59
59
  **Agentic work surface**:
60
60
  A visual family outside the conversation renderer for work output and workflow state, such as memory, run progress, identity, and handoffs.
61
61
 
@@ -63,5 +63,8 @@ A visual family outside the conversation renderer for work output and workflow s
63
63
  The decorative identity of one Agent across products: one of seven forms in one chosen colour, or Nadia's striped ribbon.
64
64
  _Avoid_: Agent glyph, Agent avatar, Agent visual
65
65
 
66
+ **Product view**:
67
+ A live, inert fragment of the Portal or Nadia on the website, built from the real components with example data marked as example.
68
+
66
69
  **System activity**:
67
- The shared visual family for work the system is doing now, loading, connecting or processing, drawn as the activity orb. It never stands for an Agent.
70
+ What a person sees while the system does work they asked for: a pending label, then one waiting line, a counted progress line, or still skeletons. It never takes an orb, because an orb means an Agent.
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # nadicode Design System
2
2
 
3
- The `@nadicodeai/design-system` package. [`DESIGN.md`](./DESIGN.md) is the normative contract for reusable design tokens, mode behavior, CSS architecture, and generated output. The canonical human brand book lives in the monorepo at `brand/brand-book/index.html`.
3
+ The `@nadicodeai/design-system` package. [`DESIGN.md`](./DESIGN.md) is nadicode's design system and its only design authority: every token and every rule for applying it. This README says how to consume the package and how the build turns `DESIGN.md` into what it ships.
4
4
 
5
- This README is a package map and the setup guide for static or non-React consumers. React consumers use the UI package's single stylesheet interface and follow [`packages/ui/docs/consuming-cross-repo.md`](../ui/docs/consuming-cross-repo.md). They do not compose design-system stylesheets themselves.
5
+ This README is a package map and the setup guide for static or non-React consumers. React consumers use the UI package's stylesheet and follow [`packages/ui/README.md`](../ui/README.md); they do not compose design-system stylesheets themselves.
6
6
 
7
7
  ## Static and non-React consumption
8
8
 
@@ -12,7 +12,7 @@ Import the complete CSS module once:
12
12
  @import "@nadicodeai/design-system/css";
13
13
  ```
14
14
 
15
- That interface includes the generated tokens, mode aliases, semantic role maps, the website's content column, type utilities, motion primitives, and framework-agnostic CSS components. Apply `.dark` to the document root or to a scoped static composition to select dark mode. The generation and cascade mechanics live only in [`DESIGN.md`, "CSS Architecture & Token Pipeline"](./DESIGN.md#css-architecture--token-pipeline).
15
+ That interface includes the generated tokens, mode aliases, semantic role maps, the website's content column, type utilities, motion primitives, and framework-agnostic CSS components. Apply `.dark` to the document root or to a scoped static composition to select dark mode. How it is generated is in "How the build works" below.
16
16
 
17
17
  That interface also registers the brand typeface. Geist and Geist Mono (SIL Open Font License 1.1) ship with the package, and the CSS module declares their `@font-face` rules and loads the woff2 files from package paths, so no consumer supplies its own font loading. The `@font-face` shim stays exported for a consumer that wants the faces without the CSS module:
18
18
 
@@ -57,19 +57,11 @@ The clear-space, minimum-size, accessibility, background, and prohibited-use rul
57
57
 
58
58
  ## Data-only consumption
59
59
 
60
- A consumer that generates its own theme takes the token files and the assets and imports no stylesheet from this package. The Nadia desktop app consumes the package this way.
60
+ A consumer that generates its own theme takes the token files and the assets. The Nadia desktop app's theme script reads `tokens/dtcg-resolved` this way, and its desktop imports `css/tokens` and `css/host` rather than the complete bundle.
61
61
 
62
62
  Pin an exact version, never a range: the DTCG group paths are the interface, and a new group arrives in a minor. `npm view @nadicodeai/design-system version` reports the published one.
63
63
 
64
- ```json
65
- {
66
- "devDependencies": {
67
- "@nadicodeai/design-system": "2.0.0"
68
- }
69
- }
70
- ```
71
-
72
- Two token files ship, both rooted at `nadicode`, with `nadicode.core.*` the foundation every product may reach for and `nadicode.register.<product>.*` one product's own values:
64
+ Two token files ship, both rooted at `nadicode`: `nadicode.core.*` is the foundation, `nadicode.semantic.*` the shared colour roles per mode, and `nadicode.register.<product>.*` one product's own values:
73
65
 
74
66
  | Import | What it holds | What it is for |
75
67
  | --- | --- | --- |
@@ -82,18 +74,16 @@ Load the brand typeface from `@nadicodeai/design-system/assets/fonts/geist.css`,
82
74
 
83
75
  The logo routes in the table above resolve to files, so a data-only consumer copies or references them without touching the CSS. `LICENSES/` carries the third-party notices the package ships under.
84
76
 
77
+ `@nadicodeai/design-system/data/reserved-agent-identifiers.json` lists the profile identifiers Hermes refuses, its `_RESERVED_NAMES` in `apps/nadia/hermes/hermes_cli/profiles.py`. A product that derives an Agent's identifier from the name a person typed avoids them.
78
+
85
79
  The CSS interfaces are not for this consumer. `@nadicodeai/design-system/css` and the `@nadicodeai/ui` stylesheet declare `--color-*` and the generated role map; an app that already owns those names takes the token files and generates its own.
86
80
 
87
81
  ## Package surface
88
82
 
89
- `package.json` owns the current public export paths. [`DESIGN.md`](./DESIGN.md)
90
- owns what those exports mean and how the CSS cascade, modes, tokens, layout,
91
- components, motion, and assets behave. The website's layout is one rule:
92
- three kinds of full-bleed section (white for reading, black for a scene, and
93
- at most one flat colour section per page), each centring its content in the
94
- `.nc-page` column, one spacing step apart. The runnable [`examples/`](./examples/)
95
- consume only those public exports and are the inspection surface. This README
96
- does not maintain a parallel inventory.
83
+ `package.json` owns the current public export paths, and [`DESIGN.md`](./DESIGN.md)
84
+ what the tokens, layout, components, motion and assets mean. The runnable
85
+ [`examples/`](./examples/) consume only those public exports and are the
86
+ inspection surface.
97
87
 
98
88
  CSS partials and generated adapter files are implementation details. React
99
89
  components and compositions are discovered through the UI package rather than
@@ -108,7 +98,33 @@ Consumer overrides belong in an explicit later layer:
108
98
  }
109
99
  ```
110
100
 
111
- The exact layer order and ownership rules are defined in `DESIGN.md`.
101
+ ## How the build works
102
+
103
+ `npm run build -w @nadicodeai/design-system` reads `DESIGN.md` twice: the
104
+ `@google/design.md` CLI exports the YAML front matter, and
105
+ `scripts/sd/design-tokens-fence.ts` reads the one `json design-tokens` fence.
106
+ `scripts/sd/compose-token-graph.ts` joins them into the single `nadicode` token
107
+ graph, checks that every alias resolves and points the allowed way (`core`
108
+ reaches nothing outside itself; `semantic` names only `core`; a register reaches
109
+ `core` and itself), and writes the two DTCG files after validating them against
110
+ the vendored schema.
111
+
112
+ Style Dictionary (`scripts/sd/`) emits the CSS from that graph:
113
+
114
+ | File | Holds |
115
+ | --- | --- |
116
+ | `src/css/tokens.generated.css` | Every token as `--nc-*`, hex colours as `oklch()`, elevation as its full `box-shadow` per mode |
117
+ | `src/css/modes.generated.css` | The `.dark` remap of every `X` / `dark-X` colour pair |
118
+ | `src/css/theme.generated.css` | The shadcn role maps from the `semantic` group, the Tailwind v4 `@theme` bridge, and the raw `--color-nc-*` projection |
119
+ | `src/css/theme-host.generated.css` | The same projection for a host that keeps its own shadcn roles |
120
+
121
+ The source graph under `src/css/` is bundled into three public stylesheets:
122
+ `css` (everything), `css/tokens` (the token layer alone) and `css/host` (for a
123
+ host with base styles of its own). The cascade is
124
+ `@layer tokens, theme, reset, foundation, motion, primitives, components;`.
125
+ Generated files and `dist/` are outputs: edit `DESIGN.md` and rebuild, never the
126
+ output. CI rebuilds and fails when a committed generated file differs from the
127
+ fresh build, and `tests/guards/` holds the structural checks on every output.
112
128
 
113
129
  ### Worked example (static HTML)
114
130
 
@@ -126,7 +142,8 @@ The exact layer order and ownership rules are defined in `DESIGN.md`.
126
142
  <main>
127
143
  <section>
128
144
  <div class="nc-page">
129
- <div class="nc-artifact-surface">Inspectable agent output</div>
145
+ <h1 class="nc-type-display-lg">Agents at work with your team</h1>
146
+ <p class="nc-type-body-lg">One stylesheet carries the tokens, the column and the type.</p>
130
147
  </div>
131
148
  </section>
132
149
  </main>
package/data/reserved-agent-identifiers.json ADDED
@@ -0,0 +1 @@
1
+ ["default", "hermes", "root", "sudo", "test", "tmp"]
package/dist/css/host.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer tokens, theme;
1
+ @layer tokens, theme, motion;
2
2
 
3
3
  /* src/assets/fonts/geist.css */
4
4
  /*!
@@ -41,7 +41,6 @@
41
41
  /* src/css/tokens.generated.css */
42
42
  @layer tokens {
43
43
  :root {
44
- --nc-on-primary: oklch(1.0000 0.0000 0.00);
45
44
  --nc-action: oklch(0.1776 0.0000 0.00);
46
45
  --nc-action-foreground: oklch(1.0000 0.0000 0.00);
47
46
  --nc-action-hover: oklch(0.3012 0.0000 0.00);
@@ -54,16 +53,17 @@
54
53
  --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);
55
54
  --nc-material-workspace: oklch(0.9761 0.0000 0.00);
56
55
  --nc-material-solid: oklch(1.0000 0.0000 0.00);
56
+ --nc-material-resting: oklch(1.0000 0.0000 0.00);
57
+ --nc-material-raised: oklch(1.0000 0.0000 0.00);
58
+ --nc-material-floating: oklch(1.0000 0.0000 0.00);
59
+ --nc-material-modal: oklch(1.0000 0.0000 0.00);
57
60
  --nc-line: oklch(0.9219 0.0000 0.00);
58
61
  --nc-input: oklch(0.5624 0.0000 0.00);
59
- --nc-seam: oklch(0.8699 0.0000 0.00);
60
- --nc-cross: oklch(0.6830 0.0000 0.00);
61
62
  --nc-focus-ring: oklch(0.1776 0.0000 0.00);
62
63
  --nc-scrim: oklch(0.1776 0.0000 0.00);
63
64
  --nc-link: oklch(0.4815 0.1209 154.24);
64
65
  --nc-link-deep: oklch(0.3852 0.0953 154.99);
65
66
  --nc-link-bg-soft: oklch(0.9170 0.0519 161.77);
66
- --nc-accent: oklch(0.6824 0.2108 37.70);
67
67
  --nc-info: oklch(0.5005 0.2804 266.17);
68
68
  --nc-info-soft: oklch(0.9457 0.0259 276.40);
69
69
  --nc-info-deep: oklch(0.3197 0.1758 266.79);
@@ -76,8 +76,6 @@
76
76
  --nc-warning: oklch(0.8466 0.1678 84.63);
77
77
  --nc-warning-soft: oklch(0.9649 0.0461 90.87);
78
78
  --nc-warning-deep: oklch(0.4834 0.0995 82.44);
79
- --nc-selection-bg: oklch(0.1776 0.0000 0.00);
80
- --nc-selection-fg: oklch(0.9851 0.0000 0.00);
81
79
  --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);
82
80
  --nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00);
83
81
  --nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00);
@@ -101,30 +99,25 @@
101
99
  --nc-chart-4: oklch(0.5688 0.1995 26.59);
102
100
  --nc-chart-5: oklch(0.6161 0.1062 208.85);
103
101
  --nc-chart-6: oklch(0.5015 0.1883 294.99);
104
- --nc-chart-seq-1: oklch(0.6998 0.1347 269.48);
105
- --nc-chart-seq-2: oklch(0.5724 0.1897 270.11);
106
- --nc-chart-seq-3: oklch(0.4725 0.2271 267.41);
107
- --nc-chart-seq-4: oklch(0.3989 0.1934 267.50);
108
- --nc-chart-seq-5: oklch(0.3270 0.1487 267.91);
109
- --nc-chart-div-warm: oklch(0.7592 0.1560 83.30);
110
- --nc-chart-div-mid: oklch(0.5278 0.0000 0.00);
111
- --nc-chart-div-cool: oklch(0.5923 0.2215 269.61);
112
102
  --nc-dark-canvas: oklch(0.0000 0.0000 0.00);
113
103
  --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);
114
104
  --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
115
105
  --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
116
106
  --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
107
+ --nc-dark-material-resting: oklch(0.1543 0.0000 0.00);
108
+ --nc-dark-material-raised: oklch(0.1822 0.0000 0.00);
109
+ --nc-dark-material-floating: oklch(0.2090 0.0000 0.00);
110
+ --nc-dark-material-modal: oklch(0.2264 0.0000 0.00);
117
111
  --nc-dark-ink: oklch(0.9461 0.0000 0.00);
118
112
  --nc-dark-body: oklch(0.8297 0.0000 0.00);
119
113
  --nc-dark-muted: oklch(0.6500 0.0000 0.00);
120
114
  --nc-dark-line: oklch(0.2686 0.0000 0.00);
121
115
  --nc-dark-input: oklch(0.5208 0.0000 0.00);
122
- --nc-dark-seam: oklch(0.2178 0.0000 0.00);
123
116
  --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
124
- --nc-dark-action: oklch(1.0000 0.0000 0.00);
117
+ --nc-dark-action: oklch(0.9461 0.0000 0.00);
125
118
  --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
126
- --nc-dark-action-hover: oklch(0.9189 0.0000 0.00);
127
- --nc-dark-action-active: oklch(0.8761 0.0000 0.00);
119
+ --nc-dark-action-hover: oklch(0.8761 0.0000 0.00);
120
+ --nc-dark-action-active: oklch(0.8297 0.0000 0.00);
128
121
  --nc-dark-link: oklch(0.7661 0.1498 157.10);
129
122
  --nc-dark-link-deep: oklch(0.8524 0.0996 159.83);
130
123
  --nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32);
@@ -148,26 +141,15 @@
148
141
  --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);
149
142
  --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);
150
143
  --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);
151
- --nc-dark-selection-bg: oklch(0.9461 0.0000 0.00);
152
- --nc-dark-selection-fg: oklch(0.1448 0.0000 0.00);
153
- --nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00);
144
+ --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);
154
145
  --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);
155
146
  --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);
156
- --nc-dark-cross: oklch(0.4495 0.0000 0.00);
157
147
  --nc-dark-chart-1: oklch(0.5923 0.2215 269.61);
158
148
  --nc-dark-chart-2: oklch(0.6415 0.1644 153.23);
159
149
  --nc-dark-chart-3: oklch(0.8939 0.1387 90.47);
160
150
  --nc-dark-chart-4: oklch(0.6627 0.1685 23.66);
161
151
  --nc-dark-chart-5: oklch(0.7820 0.1247 190.99);
162
152
  --nc-dark-chart-6: oklch(0.6297 0.1321 299.36);
163
- --nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11);
164
- --nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48);
165
- --nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44);
166
- --nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78);
167
- --nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31);
168
- --nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47);
169
- --nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00);
170
- --nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44);
171
153
  --nc-xxs: 4px;
172
154
  --nc-xs: 8px;
173
155
  --nc-sm: 12px;
@@ -195,8 +177,6 @@
195
177
  --nc-rounded-xl: 10px;
196
178
  --nc-rounded-2xl: 12px;
197
179
  --nc-rounded-3xl: 16px;
198
- --nc-rounded-pill-sm: 64px;
199
- --nc-rounded-pill: 100px;
200
180
  --nc-rounded-full: 9999px;
201
181
  --nc-type-display-xl-font-family:
202
182
  Geist,
@@ -321,38 +301,30 @@
321
301
  --nc-type-label-mono-line-height: 16px;
322
302
  --nc-type-label-mono-letter-spacing: 0px;
323
303
  --nc-material-scrim-opacity: 10%;
324
- --nc-material-glass-opacity: 76%;
325
- --nc-material-glass-saturation: 116%;
326
- --nc-material-glass-blur: 28px;
304
+ --nc-material-glass-opacity: 60%;
305
+ --nc-material-glass-saturation: 180%;
306
+ --nc-material-glass-blur: 20px;
327
307
  --nc-elevation-resting:
328
- 0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
329
- 0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
330
- 0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
331
- 0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
332
- 0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
333
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
308
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.05),
309
+ 0px 2px 8px -2px rgb(0% 0% 0% / 0.06),
310
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
334
311
  --nc-elevation-raised:
335
- 0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
336
- 0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
337
- 0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
338
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
339
- 0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
340
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
312
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.06),
313
+ 0px 6px 12px -4px rgb(0% 0% 0% / 0.08),
314
+ 0px 16px 32px -8px rgb(0% 0% 0% / 0.1),
315
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
341
316
  --nc-elevation-floating:
342
- 0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
343
- 0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
344
- 0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
345
- 0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
346
- 0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
347
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
317
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),
318
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),
319
+ 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
320
+ 0px 12px 24px -6px rgb(0% 0% 0% / 0.12),
321
+ 0px 32px 64px -16px rgb(0% 0% 0% / 0.16),
322
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
348
323
  --nc-elevation-modal:
349
- 0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
350
- 0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
351
- 0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
352
- 0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
353
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
354
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
355
- --nc-duration-stagger: 60ms;
324
+ 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
325
+ 0px 24px 48px -12px rgb(0% 0% 0% / 0.18),
326
+ 0px 64px 128px -32px rgb(0% 0% 0% / 0.26),
327
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
356
328
  --nc-duration-control: 100ms;
357
329
  --nc-duration-close: 140ms;
358
330
  --nc-duration-confirm: 180ms;
@@ -372,9 +344,6 @@
372
344
  --nc-gutter-desktop: 64px;
373
345
  --nc-section-step-mobile: 64px;
374
346
  --nc-section-step-desktop: 96px;
375
- --nc-filter-chip-gap: 6px;
376
- --nc-filter-chip-height: 28px;
377
- --nc-filter-chip-icon: 14px;
378
347
  }
379
348
  }
380
349
 
@@ -386,13 +355,15 @@
386
355
  --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
387
356
  --nc-material-workspace: var(--nc-dark-material-workspace);
388
357
  --nc-material-solid: var(--nc-dark-material-solid);
358
+ --nc-material-resting: var(--nc-dark-material-resting);
359
+ --nc-material-raised: var(--nc-dark-material-raised);
360
+ --nc-material-floating: var(--nc-dark-material-floating);
361
+ --nc-material-modal: var(--nc-dark-material-modal);
389
362
  --nc-ink: var(--nc-dark-ink);
390
363
  --nc-body: var(--nc-dark-body);
391
364
  --nc-muted: var(--nc-dark-muted);
392
365
  --nc-line: var(--nc-dark-line);
393
366
  --nc-input: var(--nc-dark-input);
394
- --nc-seam: var(--nc-dark-seam);
395
- --nc-on-primary: var(--nc-dark-on-primary);
396
367
  --nc-action: var(--nc-dark-action);
397
368
  --nc-action-foreground: var(--nc-dark-action-foreground);
398
369
  --nc-action-hover: var(--nc-dark-action-hover);
@@ -420,60 +391,75 @@
420
391
  --nc-state-blocked: var(--nc-dark-state-blocked);
421
392
  --nc-state-complete: var(--nc-dark-state-complete);
422
393
  --nc-logo-dot: var(--nc-dark-logo-dot);
423
- --nc-selection-bg: var(--nc-dark-selection-bg);
424
- --nc-selection-fg: var(--nc-dark-selection-fg);
425
394
  --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);
426
395
  --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);
427
396
  --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);
428
- --nc-cross: var(--nc-dark-cross);
429
397
  --nc-chart-1: var(--nc-dark-chart-1);
430
398
  --nc-chart-2: var(--nc-dark-chart-2);
431
399
  --nc-chart-3: var(--nc-dark-chart-3);
432
400
  --nc-chart-4: var(--nc-dark-chart-4);
433
401
  --nc-chart-5: var(--nc-dark-chart-5);
434
402
  --nc-chart-6: var(--nc-dark-chart-6);
435
- --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
436
- --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
437
- --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
438
- --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
439
- --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
440
- --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
441
- --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
442
- --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
443
403
  --nc-elevation-resting:
444
- 0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
445
- 0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
446
- 0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
447
- 0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
448
- 0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
449
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.12);
404
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.05),
405
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.07),
406
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.6),
407
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
450
408
  --nc-elevation-raised:
451
- 0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
452
- 0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
453
- 0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
454
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
455
- 0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
456
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.16);
409
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.07),
410
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.09),
411
+ 0px 16px 32px -8px rgb(0% 0% 0% / 0.6),
412
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
457
413
  --nc-elevation-floating:
458
- 0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
459
- 0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
460
- 0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
461
- 0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
462
- 0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
463
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.22);
414
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.09),
415
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.11),
416
+ 0px 12px 24px -6px rgb(0% 0% 0% / 0.6),
417
+ 0px 32px 64px -16px rgb(0% 0% 0% / 0.7),
418
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
464
419
  --nc-elevation-modal:
465
- 0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
466
- 0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
467
- 0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
468
- 0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
469
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
470
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.28);
420
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),
421
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.13),
422
+ 0px 64px 128px -32px rgb(0% 0% 0% / 0.8),
423
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
471
424
  }
472
425
  }
473
426
 
474
427
  /* src/css/theme-host.generated.css */
475
428
  @layer theme {
476
- @theme { --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -2.52px; --tracking-display-xl: -2.52px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1.5px; --tracking-display-lg: -1.5px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 40px; --text-display-md--line-height: 42px; --leading-display-md: 42px; --text-display-md--letter-spacing: -1px; --tracking-display-md: -1px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 30px; --text-heading-lg--line-height: 32px; --leading-heading-lg: 32px; --text-heading-lg--letter-spacing: 0px; --tracking-heading-lg: 0px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: 0px; --tracking-heading-md: 0px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 28px; --leading-heading-sm: 28px; --text-heading-sm--letter-spacing: 0px; --tracking-heading-sm: 0px; --text-heading-sm--font-weight: 600; --font-weight-heading-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 500; --font-weight-label-mono: 500; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
429
+ @theme { --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-material-resting: oklch(1.0000 0.0000 0.00); --color-nc-material-raised: oklch(1.0000 0.0000 0.00); --color-nc-material-floating: oklch(1.0000 0.0000 0.00); --color-nc-material-modal: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-resting: oklch(0.1543 0.0000 0.00); --color-nc-dark-material-raised: oklch(0.1822 0.0000 0.00); --color-nc-dark-material-floating: oklch(0.2090 0.0000 0.00); --color-nc-dark-material-modal: oklch(0.2264 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.9461 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.8761 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8297 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -2.52px; --tracking-display-xl: -2.52px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1.5px; --tracking-display-lg: -1.5px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 40px; --text-display-md--line-height: 42px; --leading-display-md: 42px; --text-display-md--letter-spacing: -1px; --tracking-display-md: -1px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 30px; --text-heading-lg--line-height: 32px; --leading-heading-lg: 32px; --text-heading-lg--letter-spacing: 0px; --tracking-heading-lg: 0px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: 0px; --tracking-heading-md: 0px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 28px; --leading-heading-sm: 28px; --text-heading-sm--letter-spacing: 0px; --tracking-heading-sm: 0px; --text-heading-sm--font-weight: 600; --font-weight-heading-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 500; --font-weight-label-mono: 500; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
430
+ }
431
+
432
+ /* src/css/wait.css */
433
+ @layer motion {
434
+ @keyframes nc-wait {
435
+ from {
436
+ transform: translateX(-100%);
437
+ }
438
+ to {
439
+ transform: translateX(312.5%);
440
+ }
441
+ }
442
+ @keyframes nc-wait-breathe {
443
+ 0%, 100% {
444
+ opacity: 0.35;
445
+ }
446
+ 50% {
447
+ opacity: 1;
448
+ }
449
+ }
450
+ .nc-anim-wait {
451
+ block-size: 100%;
452
+ inline-size: 32%;
453
+ animation: nc-wait var(--nc-duration-wait) linear infinite;
454
+ animation-delay: var(--nc-anim-delay, 0ms);
455
+ }
456
+ @media (prefers-reduced-motion: reduce) {
457
+ .nc-anim-wait {
458
+ inline-size: 100%;
459
+ transform: none;
460
+ animation: nc-wait-breathe var(--nc-duration-wait) var(--nc-ease-in-out-strong) infinite;
461
+ }
462
+ }
477
463
  }
478
464
 
479
465
  /* src/css/host.css */