@sequenceholdings/atlas-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts.d.ts +8 -5
- package/dist/charts.mjs +64 -30
- package/dist/index.d.ts +441 -338
- package/dist/index.mjs +28439 -28308
- package/dist/tokens.css +0 -36
- package/dist/{utils-BZS7Y02J.js → utils-D-IFNYlh.js} +566 -514
- package/package.json +16 -4
- package/theme.v2.css +225 -0
- package/tokens.v2.css +537 -0
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"version": "0.1.
|
|
12
|
+
"version": "0.1.5",
|
|
13
13
|
"description": "Atlas shared UI component library for Artifact Studio apps",
|
|
14
14
|
"type": "module",
|
|
15
15
|
"sideEffects": [
|
|
@@ -25,10 +25,16 @@
|
|
|
25
25
|
"default": "./dist/charts.mjs"
|
|
26
26
|
},
|
|
27
27
|
"./tokens.css": "./dist/tokens.css",
|
|
28
|
+
"./tokens.v2.css": "./tokens.v2.css",
|
|
29
|
+
"./tokens.v2.tenants.css": "./tokens.v2.tenants.css",
|
|
30
|
+
"./theme.v2.css": "./theme.v2.css",
|
|
28
31
|
"./package.json": "./package.json"
|
|
29
32
|
},
|
|
33
|
+
"//tokens.v2.tenants.css": "The OpCo [data-theme] overlay. It MUST be exported — Tailwind v4 resolves the @import through the package exports map (under the `style` condition), so without this entry the Atlas CSS build fails with 'not exported under the condition style'. It is intentionally kept OUT of `files` so it is NOT in the published tarball (the shared package stays opco-free, DES-127); only the Atlas monorepo build (which resolves via the workspace symlink) consumes it. No published consumer imports this subpath.",
|
|
30
34
|
"files": [
|
|
31
|
-
"dist"
|
|
35
|
+
"dist",
|
|
36
|
+
"tokens.v2.css",
|
|
37
|
+
"theme.v2.css"
|
|
32
38
|
],
|
|
33
39
|
"peerDependencies": {
|
|
34
40
|
"@tanstack/react-query": "^4.36.1",
|
|
@@ -73,13 +79,19 @@
|
|
|
73
79
|
},
|
|
74
80
|
"devDependencies": {
|
|
75
81
|
"@microsoft/api-extractor": "^7.58.7",
|
|
82
|
+
"@types/js-yaml": "^4.0.9",
|
|
76
83
|
"@vitejs/plugin-react": "^5.0.0",
|
|
84
|
+
"js-yaml": "^4.1.1",
|
|
85
|
+
"tsx": "^4.19.2",
|
|
77
86
|
"typescript": "^5.6.0",
|
|
78
87
|
"vite": "8.0.16",
|
|
79
|
-
"vite-plugin-dts": "^4.5.4"
|
|
88
|
+
"vite-plugin-dts": "^4.5.4",
|
|
89
|
+
"vitest": "^4.1.5"
|
|
80
90
|
},
|
|
81
91
|
"scripts": {
|
|
82
|
-
"build": "vite build && cp src/tokens.css dist/tokens.css",
|
|
92
|
+
"build": "tsx scripts/generate-tokens.ts && vite build && cp src/tokens.css dist/tokens.css",
|
|
93
|
+
"generate:tokens": "tsx scripts/generate-tokens.ts",
|
|
94
|
+
"test": "vitest run",
|
|
83
95
|
"type-check": "tsc --noEmit"
|
|
84
96
|
}
|
|
85
97
|
}
|
package/theme.v2.css
ADDED
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
/* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
|
|
2
|
+
/* Tailwind @theme utility bridge (DES-223): every semantic role → a --color-* utility. */
|
|
3
|
+
|
|
4
|
+
@theme inline {
|
|
5
|
+
--color-background: var(--background);
|
|
6
|
+
--color-foreground: var(--foreground);
|
|
7
|
+
--color-card: var(--card);
|
|
8
|
+
--color-card-foreground: var(--card-foreground);
|
|
9
|
+
--color-popover: var(--popover);
|
|
10
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
11
|
+
--color-shell: var(--shell);
|
|
12
|
+
--color-sidebar: var(--sidebar);
|
|
13
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
14
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
15
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
16
|
+
--color-primary: var(--primary);
|
|
17
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
18
|
+
--color-primary-hover: var(--primary-hover);
|
|
19
|
+
--color-secondary: var(--secondary);
|
|
20
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
21
|
+
--color-muted: var(--muted);
|
|
22
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
23
|
+
--color-accent: var(--accent);
|
|
24
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
25
|
+
--color-expressive: var(--expressive);
|
|
26
|
+
--color-expressive-tint: var(--expressive-tint);
|
|
27
|
+
--color-expressive-border: var(--expressive-border);
|
|
28
|
+
--color-expressive-text: var(--expressive-text);
|
|
29
|
+
--color-destructive: var(--destructive);
|
|
30
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
31
|
+
--color-border: var(--border);
|
|
32
|
+
--color-border-strong: var(--border-strong);
|
|
33
|
+
--color-input: var(--input);
|
|
34
|
+
--color-ring: var(--ring);
|
|
35
|
+
--color-foreground-primary: var(--text-primary);
|
|
36
|
+
--color-foreground-secondary: var(--text-secondary);
|
|
37
|
+
--color-foreground-muted: var(--text-muted);
|
|
38
|
+
--color-foreground-placeholder: var(--text-placeholder);
|
|
39
|
+
--color-foreground-disabled: var(--text-disabled);
|
|
40
|
+
--color-foreground-on-color: var(--text-on-color);
|
|
41
|
+
--color-field: var(--field);
|
|
42
|
+
--color-field-hover: var(--field-hover);
|
|
43
|
+
--color-field-disabled: var(--field-disabled);
|
|
44
|
+
--color-link: var(--link);
|
|
45
|
+
--color-link-hover: var(--link-hover);
|
|
46
|
+
--color-link-visited: var(--link-visited);
|
|
47
|
+
--color-icon-primary: var(--icon-primary);
|
|
48
|
+
--color-icon-secondary: var(--icon-secondary);
|
|
49
|
+
--color-icon-on-color: var(--icon-on-color);
|
|
50
|
+
--color-icon-disabled: var(--icon-disabled);
|
|
51
|
+
--color-inverse: var(--inverse);
|
|
52
|
+
--color-inverse-foreground: var(--inverse-foreground);
|
|
53
|
+
--color-overlay: var(--overlay);
|
|
54
|
+
--color-skeleton: var(--skeleton);
|
|
55
|
+
--color-skeleton-foreground: var(--skeleton-foreground);
|
|
56
|
+
--color-success: var(--success);
|
|
57
|
+
--color-success-foreground: var(--success-foreground);
|
|
58
|
+
--color-success-tint: var(--success-tint);
|
|
59
|
+
--color-success-text: var(--success-text);
|
|
60
|
+
--color-warning: var(--warning);
|
|
61
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
62
|
+
--color-warning-tint: var(--warning-tint);
|
|
63
|
+
--color-warning-text: var(--warning-text);
|
|
64
|
+
--color-danger: var(--danger);
|
|
65
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
66
|
+
--color-danger-tint: var(--danger-tint);
|
|
67
|
+
--color-danger-text: var(--danger-text);
|
|
68
|
+
--color-info: var(--info);
|
|
69
|
+
--color-info-foreground: var(--info-foreground);
|
|
70
|
+
--color-info-tint: var(--info-tint);
|
|
71
|
+
--color-info-text: var(--info-text);
|
|
72
|
+
--color-chart-1: var(--chart-1);
|
|
73
|
+
--color-chart-1-soft: var(--chart-1-soft);
|
|
74
|
+
--color-chart-2: var(--chart-2);
|
|
75
|
+
--color-chart-2-soft: var(--chart-2-soft);
|
|
76
|
+
--color-chart-3: var(--chart-3);
|
|
77
|
+
--color-chart-3-soft: var(--chart-3-soft);
|
|
78
|
+
--color-chart-4: var(--chart-4);
|
|
79
|
+
--color-chart-4-soft: var(--chart-4-soft);
|
|
80
|
+
--color-chart-5: var(--chart-5);
|
|
81
|
+
--color-chart-5-soft: var(--chart-5-soft);
|
|
82
|
+
--color-chart-success: var(--chart-success);
|
|
83
|
+
--color-chart-success-soft: var(--chart-success-soft);
|
|
84
|
+
--color-chart-danger: var(--chart-danger);
|
|
85
|
+
--color-chart-danger-soft: var(--chart-danger-soft);
|
|
86
|
+
--color-chart-mono-1: var(--chart-mono-1);
|
|
87
|
+
--color-chart-mono-2: var(--chart-mono-2);
|
|
88
|
+
--color-chart-mono-3: var(--chart-mono-3);
|
|
89
|
+
--color-chart-mono-4: var(--chart-mono-4);
|
|
90
|
+
--color-chart-mono-5: var(--chart-mono-5);
|
|
91
|
+
--color-chart-adjacent-1: var(--chart-adjacent-1);
|
|
92
|
+
--color-chart-adjacent-1-soft: var(--chart-adjacent-1-soft);
|
|
93
|
+
--color-chart-adjacent-2: var(--chart-adjacent-2);
|
|
94
|
+
--color-chart-adjacent-2-soft: var(--chart-adjacent-2-soft);
|
|
95
|
+
--color-chart-adjacent-3: var(--chart-adjacent-3);
|
|
96
|
+
--color-chart-adjacent-3-soft: var(--chart-adjacent-3-soft);
|
|
97
|
+
--color-chart-adjacent-4: var(--chart-adjacent-4);
|
|
98
|
+
--color-chart-adjacent-4-soft: var(--chart-adjacent-4-soft);
|
|
99
|
+
--color-chart-adjacent-5: var(--chart-adjacent-5);
|
|
100
|
+
--color-chart-adjacent-5-soft: var(--chart-adjacent-5-soft);
|
|
101
|
+
--color-identity-1: var(--identity-1);
|
|
102
|
+
--color-identity-1-text: var(--identity-1-text);
|
|
103
|
+
--color-identity-2: var(--identity-2);
|
|
104
|
+
--color-identity-2-text: var(--identity-2-text);
|
|
105
|
+
--color-identity-3: var(--identity-3);
|
|
106
|
+
--color-identity-3-text: var(--identity-3-text);
|
|
107
|
+
--color-identity-4: var(--identity-4);
|
|
108
|
+
--color-identity-4-text: var(--identity-4-text);
|
|
109
|
+
--color-identity-5: var(--identity-5);
|
|
110
|
+
--color-identity-5-text: var(--identity-5-text);
|
|
111
|
+
--color-identity-6: var(--identity-6);
|
|
112
|
+
--color-identity-6-text: var(--identity-6-text);
|
|
113
|
+
--color-identity-7: var(--identity-7);
|
|
114
|
+
--color-identity-7-text: var(--identity-7-text);
|
|
115
|
+
--color-identity-8: var(--identity-8);
|
|
116
|
+
--color-identity-8-text: var(--identity-8-text);
|
|
117
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
118
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
119
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
120
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
121
|
+
--color-surface: var(--surface);
|
|
122
|
+
--color-surface-hover: var(--surface-hover);
|
|
123
|
+
--color-highlight: var(--highlight);
|
|
124
|
+
--color-brand: var(--brand);
|
|
125
|
+
|
|
126
|
+
/* ── non-colour roles (DES-298) ──
|
|
127
|
+
Tailwind v4 compiles the --text-x--* sub-properties into the text-x
|
|
128
|
+
utility itself, each behind a --tw-* fallback, so ONE class carries
|
|
129
|
+
size + leading + weight + tracking and an explicit `font-medium` at a
|
|
130
|
+
call site still wins. `uppercase` and `font-mono` stay separate
|
|
131
|
+
utilities: there is no @theme channel for either. */
|
|
132
|
+
--text-page-title: var(--type-page-title);
|
|
133
|
+
--text-page-title--line-height: var(--type-page-title-leading);
|
|
134
|
+
--text-page-title--font-weight: var(--type-page-title-weight);
|
|
135
|
+
--text-page-title--letter-spacing: var(--type-page-title-tracking);
|
|
136
|
+
--text-heading: var(--type-heading);
|
|
137
|
+
--text-heading--line-height: var(--type-heading-leading);
|
|
138
|
+
--text-heading--font-weight: var(--type-heading-weight);
|
|
139
|
+
--text-body: var(--type-body);
|
|
140
|
+
--text-body--line-height: var(--type-body-leading);
|
|
141
|
+
--text-body--font-weight: var(--type-body-weight);
|
|
142
|
+
--text-label: var(--type-label);
|
|
143
|
+
--text-label--line-height: var(--type-label-leading);
|
|
144
|
+
--text-label--font-weight: var(--type-label-weight);
|
|
145
|
+
--text-record-name: var(--type-record-name);
|
|
146
|
+
--text-record-name--line-height: var(--type-record-name-leading);
|
|
147
|
+
--text-record-name--font-weight: var(--type-record-name-weight);
|
|
148
|
+
--text-caption: var(--type-caption);
|
|
149
|
+
--text-caption--line-height: var(--type-caption-leading);
|
|
150
|
+
--text-caption--font-weight: var(--type-caption-weight);
|
|
151
|
+
--text-eyebrow: var(--type-eyebrow);
|
|
152
|
+
--text-eyebrow--line-height: var(--type-eyebrow-leading);
|
|
153
|
+
--text-eyebrow--font-weight: var(--type-eyebrow-weight);
|
|
154
|
+
--text-eyebrow--letter-spacing: var(--type-eyebrow-tracking);
|
|
155
|
+
--text-control: var(--type-control);
|
|
156
|
+
--text-control--line-height: var(--type-control-leading);
|
|
157
|
+
--text-control--font-weight: var(--type-control-weight);
|
|
158
|
+
--text-control-sm: var(--type-control-sm);
|
|
159
|
+
--text-control-sm--line-height: var(--type-control-sm-leading);
|
|
160
|
+
--text-control-sm--font-weight: var(--type-control-sm-weight);
|
|
161
|
+
--text-badge: var(--type-badge);
|
|
162
|
+
--text-badge--line-height: var(--type-badge-leading);
|
|
163
|
+
--text-badge--font-weight: var(--type-badge-weight);
|
|
164
|
+
--text-code: var(--type-code);
|
|
165
|
+
--text-code--line-height: var(--type-code-leading);
|
|
166
|
+
--text-code--font-weight: var(--type-code-weight);
|
|
167
|
+
--text-metric: var(--type-metric);
|
|
168
|
+
--text-metric--line-height: var(--type-metric-leading);
|
|
169
|
+
--text-metric--font-weight: var(--type-metric-weight);
|
|
170
|
+
--text-metric--letter-spacing: var(--type-metric-tracking);
|
|
171
|
+
--spacing-inline-tight: var(--space-inline-tight);
|
|
172
|
+
--spacing-inline: var(--space-inline);
|
|
173
|
+
--spacing-inline-loose: var(--space-inline-loose);
|
|
174
|
+
--spacing-compact-tight: var(--space-compact-tight);
|
|
175
|
+
--spacing-compact: var(--space-compact);
|
|
176
|
+
--spacing-default: var(--space-default);
|
|
177
|
+
--spacing-roomy: var(--space-roomy);
|
|
178
|
+
--spacing-stack-tight: var(--space-stack-tight);
|
|
179
|
+
--spacing-stack: var(--space-stack);
|
|
180
|
+
--spacing-stack-group: var(--space-stack-group);
|
|
181
|
+
--spacing-stack-section: var(--space-stack-section);
|
|
182
|
+
--radius-control: var(--corner-control);
|
|
183
|
+
--radius-badge: var(--corner-badge);
|
|
184
|
+
--radius-surface-nested: var(--corner-surface-nested);
|
|
185
|
+
--radius-surface: var(--corner-surface);
|
|
186
|
+
--shadow-flat: var(--elevation-flat);
|
|
187
|
+
--shadow-resting: var(--elevation-resting);
|
|
188
|
+
--shadow-popover: var(--elevation-popover);
|
|
189
|
+
--shadow-modal: var(--elevation-modal);
|
|
190
|
+
--ease-hover: var(--motion-hover-ease);
|
|
191
|
+
--ease-enter: var(--motion-enter-ease);
|
|
192
|
+
--ease-exit: var(--motion-exit-ease);
|
|
193
|
+
|
|
194
|
+
/* ── legacy typography (DES-93) ──
|
|
195
|
+
`--text-xs--font-weight` must live in @theme: a gated :root
|
|
196
|
+
declaration alone does not make Tailwind emit font-weight on
|
|
197
|
+
`.text-xs` (verified against @tailwindcss/postcss). */
|
|
198
|
+
--text-xs--font-weight: var(--ds-weight-medium);
|
|
199
|
+
|
|
200
|
+
/* DES-372 — default Tailwind shadow ladder → elevation roles.
|
|
201
|
+
Remaps the stock size utilities so ~850 shadow-sm/md/lg call sites
|
|
202
|
+
resolve to the same values as the roles, with no call-site churn.
|
|
203
|
+
Do NOT remap --shadow-inner (inset; different job). */
|
|
204
|
+
--shadow-2xs: var(--elevation-resting);
|
|
205
|
+
--shadow-xs: var(--elevation-resting);
|
|
206
|
+
--shadow-sm: var(--elevation-resting);
|
|
207
|
+
--shadow: var(--elevation-resting);
|
|
208
|
+
--shadow-md: var(--elevation-popover);
|
|
209
|
+
--shadow-lg: var(--elevation-popover);
|
|
210
|
+
--shadow-xl: var(--elevation-modal);
|
|
211
|
+
--shadow-2xl: var(--elevation-modal);
|
|
212
|
+
|
|
213
|
+
/* No --duration-* mapping: it is not a Tailwind v4 theme namespace, so it
|
|
214
|
+
mints nothing (verified). Read --motion-<role>-duration directly, or
|
|
215
|
+
`duration-[var(--motion-hover-duration)]`. Faking it with --animate-*
|
|
216
|
+
would put a keyframe name where a duration belongs. */
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@utility text-eyebrow {
|
|
220
|
+
text-transform: uppercase;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
@utility text-code {
|
|
224
|
+
font-family: var(--font-mono);
|
|
225
|
+
}
|