@skyfall_ai/aegis 0.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 (11) hide show
  1. package/README.md +42 -0
  2. package/dist/index.css +4323 -0
  3. package/dist/index.css.map +1 -0
  4. package/dist/index.d.mts +1736 -0
  5. package/dist/index.d.ts +1736 -0
  6. package/dist/index.js +3797 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/index.mjs +3677 -0
  9. package/dist/index.mjs.map +1 -0
  10. package/package.json +75 -0
  11. package/src/tokens/aegis-tokens.css +333 -0
package/package.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "name": "@skyfall_ai/aegis",
3
+ "version": "0.1.0",
4
+ "description": "Skyfall Aegis — Accessibility-forward, compliance-aware healthcare design system",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": {
11
+ "types": "./dist/index.d.mts",
12
+ "default": "./dist/index.mjs"
13
+ },
14
+ "require": {
15
+ "types": "./dist/index.d.ts",
16
+ "default": "./dist/index.js"
17
+ }
18
+ },
19
+ "./styles": "./dist/index.css",
20
+ "./tokens": "./src/tokens/aegis-tokens.css"
21
+ },
22
+ "files": [
23
+ "dist",
24
+ "src/tokens/*.css"
25
+ ],
26
+ "sideEffects": [
27
+ "**/*.css"
28
+ ],
29
+ "publishConfig": {
30
+ "access": "restricted"
31
+ },
32
+ "scripts": {
33
+ "dev": "storybook dev -p 6006",
34
+ "build": "tsup",
35
+ "build:storybook": "storybook build",
36
+ "typecheck": "tsc --noEmit",
37
+ "clean": "rm -rf dist storybook-static",
38
+ "prepublishOnly": "npm run clean && npm run build",
39
+ "chromatic": "chromatic --build-script-name=build:storybook"
40
+ },
41
+ "peerDependencies": {
42
+ "react": ">=18.0.0",
43
+ "react-dom": ">=18.0.0"
44
+ },
45
+ "devDependencies": {
46
+ "@storybook/addon-a11y": "^8.6.0",
47
+ "@storybook/addon-essentials": "^8.6.0",
48
+ "@storybook/react": "^8.6.0",
49
+ "@storybook/react-vite": "^8.6.0",
50
+ "@types/react": "^18.3.0",
51
+ "@types/react-dom": "^18.3.0",
52
+ "chromatic": "^15.2.0",
53
+ "react": "^18.3.0",
54
+ "react-dom": "^18.3.0",
55
+ "storybook": "^8.6.0",
56
+ "tsup": "^8.3.0",
57
+ "typescript": "^5.6.0",
58
+ "vite": "^8.0.0"
59
+ },
60
+ "keywords": [
61
+ "healthcare",
62
+ "design-system",
63
+ "react",
64
+ "accessibility",
65
+ "wcag",
66
+ "components",
67
+ "ui"
68
+ ],
69
+ "license": "MIT",
70
+ "homepage": "https://github.com/gerardovinces/skyfall-aegis#readme",
71
+ "repository": {
72
+ "type": "git",
73
+ "url": "https://github.com/gerardovinces/skyfall-aegis.git"
74
+ }
75
+ }
package/src/tokens/aegis-tokens.css ADDED
@@ -0,0 +1,333 @@
1
+ /*
2
+ * Skyfall Aegis — Design Tokens
3
+ * Source of truth: Skyfall Aegis Style Guide v1
4
+ *
5
+ * Naming convention: --aegis-{category}-{role}-{variant}-{scale}
6
+ */
7
+
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
9
+
10
+ :root {
11
+ /* ============================================
12
+ BRAND & CORE PALETTE
13
+ ============================================ */
14
+ --aegis-color-brand-primary-50: #EEF4FF;
15
+ --aegis-color-brand-primary-100: #DCE8FF;
16
+ --aegis-color-brand-primary-200: #BED4FF;
17
+ --aegis-color-brand-primary-300: #8FB7FF;
18
+ --aegis-color-brand-primary-400: #5C92F2;
19
+ --aegis-color-brand-primary-500: #2F6FE4;
20
+ --aegis-color-brand-primary-600: #1F5CCD;
21
+ --aegis-color-brand-primary-700: #1849A6;
22
+ --aegis-color-brand-primary-800: #153B82;
23
+ --aegis-color-brand-primary-900: #112E63;
24
+
25
+ /* ============================================
26
+ SUPPORT ACCENT — TEAL
27
+ ============================================ */
28
+ --aegis-color-accent-teal-50: #EDF9F8;
29
+ --aegis-color-accent-teal-100: #D4F1EE;
30
+ --aegis-color-accent-teal-200: #A9E0D9;
31
+ --aegis-color-accent-teal-300: #77C9BE;
32
+ --aegis-color-accent-teal-400: #48AE9F;
33
+ --aegis-color-accent-teal-500: #2E8F83;
34
+ --aegis-color-accent-teal-600: #237368;
35
+ --aegis-color-accent-teal-700: #1D5D54;
36
+
37
+ /* ============================================
38
+ NEUTRAL PALETTE
39
+ ============================================ */
40
+ --aegis-color-neutral-0: #FFFFFF;
41
+ --aegis-color-neutral-25: #FCFDFE;
42
+ --aegis-color-neutral-50: #F6F8FA;
43
+ --aegis-color-neutral-100: #EDF1F5;
44
+ --aegis-color-neutral-200: #DCE3EA;
45
+ --aegis-color-neutral-300: #C1CBD6;
46
+ --aegis-color-neutral-400: #93A1B2;
47
+ --aegis-color-neutral-500: #66768A;
48
+ --aegis-color-neutral-600: #4B5B6C;
49
+ --aegis-color-neutral-700: #334155;
50
+ --aegis-color-neutral-800: #223042;
51
+ --aegis-color-neutral-900: #16202B;
52
+
53
+ /* ============================================
54
+ SEMANTIC PALETTE
55
+ ============================================ */
56
+ --aegis-color-success-50: #EEF8F1;
57
+ --aegis-color-success-500: #2F8F57;
58
+ --aegis-color-success-700: #1F6B3D;
59
+
60
+ --aegis-color-warning-50: #FFF6E8;
61
+ --aegis-color-warning-500: #B86A00;
62
+ --aegis-color-warning-700: #8D4F00;
63
+
64
+ --aegis-color-error-50: #FFF0F0;
65
+ --aegis-color-error-500: #C23A3A;
66
+ --aegis-color-error-700: #8F2626;
67
+
68
+ --aegis-color-info-50: #EEF6FF;
69
+ --aegis-color-info-500: #2563B8;
70
+ --aegis-color-info-700: #1B4C8E;
71
+
72
+ /* ============================================
73
+ TEXT & SURFACE ALIASES
74
+ ============================================ */
75
+ --aegis-color-text-primary: #16202B;
76
+ --aegis-color-text-secondary: #4B5B6C;
77
+ --aegis-color-text-muted: #66768A;
78
+ --aegis-color-text-inverse: #FFFFFF;
79
+
80
+ --aegis-color-surface-canvas: #FCFDFE;
81
+ --aegis-color-surface-default: #FFFFFF;
82
+ --aegis-color-surface-subtle: #F6F8FA;
83
+ --aegis-color-surface-raised: #FFFFFF;
84
+ --aegis-color-surface-overlay: #FFFFFF;
85
+ --aegis-color-surface-sunken: #F0F3F7;
86
+ --aegis-color-surface-hover: #F0F4F8;
87
+ --aegis-color-surface-active: #E6ECF2;
88
+ --aegis-color-surface-selected: #EEF4FF;
89
+ --aegis-color-surface-selected-hover: #DCE8FF;
90
+
91
+ --aegis-color-border-default: #DCE3EA;
92
+ --aegis-color-border-strong: #C1CBD6;
93
+ --aegis-color-border-subtle: #EDF1F5;
94
+ --aegis-color-border-inverse: #334155;
95
+ --aegis-color-border-brand: #2F6FE4;
96
+ --aegis-color-border-success: #2F8F57;
97
+ --aegis-color-border-warning: #B86A00;
98
+ --aegis-color-border-error: #C23A3A;
99
+
100
+ --aegis-color-focus-ring: #2F6FE4;
101
+ --aegis-color-overlay-scrim: rgba(22, 32, 43, 0.48);
102
+
103
+ /* ============================================
104
+ TYPOGRAPHY
105
+ ============================================ */
106
+ --aegis-font-family-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
107
+ --aegis-font-family-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
108
+
109
+ --aegis-font-weight-regular: 400;
110
+ --aegis-font-weight-medium: 500;
111
+ --aegis-font-weight-semibold: 600;
112
+ --aegis-font-weight-bold: 700;
113
+
114
+ /* Type scale — sizes */
115
+ --aegis-font-size-display-lg: 40px;
116
+ --aegis-font-size-display-md: 32px;
117
+ --aegis-font-size-heading-xl: 28px;
118
+ --aegis-font-size-heading-lg: 24px;
119
+ --aegis-font-size-heading-md: 20px;
120
+ --aegis-font-size-heading-sm: 18px;
121
+ --aegis-font-size-body-lg: 16px;
122
+ --aegis-font-size-body-md: 14px;
123
+ --aegis-font-size-body-sm: 13px;
124
+ --aegis-font-size-label-lg: 14px;
125
+ --aegis-font-size-label-md: 13px;
126
+ --aegis-font-size-caption: 12px;
127
+ --aegis-font-size-data: 14px;
128
+ --aegis-font-size-code: 13px;
129
+
130
+ /* Type scale — line heights */
131
+ --aegis-line-height-display-lg: 48px;
132
+ --aegis-line-height-display-md: 40px;
133
+ --aegis-line-height-heading-xl: 36px;
134
+ --aegis-line-height-heading-lg: 32px;
135
+ --aegis-line-height-heading-md: 28px;
136
+ --aegis-line-height-heading-sm: 26px;
137
+ --aegis-line-height-body-lg: 24px;
138
+ --aegis-line-height-body-md: 22px;
139
+ --aegis-line-height-body-sm: 20px;
140
+ --aegis-line-height-label-lg: 20px;
141
+ --aegis-line-height-label-md: 18px;
142
+ --aegis-line-height-caption: 16px;
143
+ --aegis-line-height-data: 20px;
144
+ --aegis-line-height-code: 18px;
145
+
146
+ /* Letter spacing */
147
+ --aegis-tracking-tight: -0.02em;
148
+ --aegis-tracking-normal: 0em;
149
+ --aegis-tracking-wide: 0.01em;
150
+
151
+ /* ============================================
152
+ SPACING
153
+ ============================================ */
154
+ --aegis-space-0: 0;
155
+ --aegis-space-1: 4px;
156
+ --aegis-space-2: 8px;
157
+ --aegis-space-3: 12px;
158
+ --aegis-space-4: 16px;
159
+ --aegis-space-5: 20px;
160
+ --aegis-space-6: 24px;
161
+ --aegis-space-8: 32px;
162
+ --aegis-space-10: 40px;
163
+ --aegis-space-12: 48px;
164
+ --aegis-space-16: 64px;
165
+ --aegis-space-20: 80px;
166
+
167
+ /* ============================================
168
+ SIZING
169
+ ============================================ */
170
+ --aegis-size-control-sm: 32px;
171
+ --aegis-size-control-md: 40px;
172
+ --aegis-size-control-lg: 48px;
173
+
174
+ --aegis-size-icon-xs: 12px;
175
+ --aegis-size-icon-sm: 16px;
176
+ --aegis-size-icon-md: 20px;
177
+ --aegis-size-icon-lg: 24px;
178
+
179
+ --aegis-size-touch-min: 44px;
180
+
181
+ --aegis-size-sidebar-default: 280px;
182
+ --aegis-size-modal-sm: 400px;
183
+ --aegis-size-modal-md: 560px;
184
+ --aegis-size-modal-lg: 720px;
185
+ --aegis-size-modal-xl: 880px;
186
+
187
+ /* ============================================
188
+ RADIUS
189
+ ============================================ */
190
+ --aegis-radius-none: 0;
191
+ --aegis-radius-sm: 6px;
192
+ --aegis-radius-md: 10px;
193
+ --aegis-radius-lg: 14px;
194
+ --aegis-radius-xl: 18px;
195
+ --aegis-radius-full: 9999px;
196
+
197
+ /* ============================================
198
+ BORDERS
199
+ ============================================ */
200
+ --aegis-border-width-none: 0;
201
+ --aegis-border-width-hairline: 1px;
202
+ --aegis-border-width-medium: 2px;
203
+ --aegis-border-width-strong: 3px;
204
+ --aegis-border-style-default: solid;
205
+
206
+ /* ============================================
207
+ SHADOWS & ELEVATION
208
+ ============================================ */
209
+ --aegis-shadow-none: none;
210
+ --aegis-shadow-xs: 0 1px 2px rgba(22, 32, 43, 0.05);
211
+ --aegis-shadow-sm: 0 1px 3px rgba(22, 32, 43, 0.06), 0 2px 8px rgba(22, 32, 43, 0.04);
212
+ --aegis-shadow-md: 0 2px 4px rgba(22, 32, 43, 0.04), 0 8px 20px rgba(22, 32, 43, 0.08);
213
+ --aegis-shadow-lg: 0 4px 8px rgba(22, 32, 43, 0.04), 0 16px 40px rgba(22, 32, 43, 0.12);
214
+ --aegis-shadow-xl: 0 8px 16px rgba(22, 32, 43, 0.06), 0 24px 56px rgba(22, 32, 43, 0.16);
215
+ --aegis-shadow-focus: 0 0 0 3px rgba(47, 111, 228, 0.28);
216
+ --aegis-shadow-focus-error: 0 0 0 3px rgba(194, 58, 58, 0.2);
217
+ --aegis-shadow-focus-success: 0 0 0 3px rgba(47, 143, 87, 0.2);
218
+ --aegis-shadow-inset-xs: inset 0 1px 2px rgba(22, 32, 43, 0.06);
219
+ --aegis-shadow-inset-sm: inset 0 2px 4px rgba(22, 32, 43, 0.08);
220
+
221
+ /* ============================================
222
+ MOTION
223
+ ============================================ */
224
+ --aegis-motion-duration-fast: 120ms;
225
+ --aegis-motion-duration-base: 180ms;
226
+ --aegis-motion-duration-slow: 240ms;
227
+ --aegis-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
228
+ --aegis-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
229
+ --aegis-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
230
+
231
+ /* ============================================
232
+ OPACITY
233
+ ============================================ */
234
+ --aegis-opacity-disabled: 0.48;
235
+ --aegis-opacity-subtle: 0.72;
236
+ --aegis-opacity-overlay: 0.48;
237
+ --aegis-opacity-scrim-strong: 0.64;
238
+
239
+ /* ============================================
240
+ Z-INDEX
241
+ ============================================ */
242
+ --aegis-z-base: 0;
243
+ --aegis-z-dropdown: 1000;
244
+ --aegis-z-sticky: 1100;
245
+ --aegis-z-banner: 1200;
246
+ --aegis-z-overlay: 1300;
247
+ --aegis-z-modal: 1400;
248
+ --aegis-z-toast: 1500;
249
+ --aegis-z-tooltip: 1600;
250
+
251
+ /* ============================================
252
+ GRID & LAYOUT
253
+ ============================================ */
254
+ --aegis-layout-container-max: 1280px;
255
+ --aegis-layout-container-reading: 720px;
256
+ --aegis-layout-grid-columns: 12;
257
+ --aegis-layout-grid-gutter: 24px;
258
+ --aegis-layout-grid-margin-desktop: 32px;
259
+ --aegis-layout-grid-margin-tablet: 24px;
260
+ --aegis-layout-grid-margin-mobile: 16px;
261
+
262
+ /* ============================================
263
+ FOCUS & INTERACTION
264
+ ============================================ */
265
+ --aegis-focus-ring-width: 3px;
266
+ --aegis-focus-ring-color: rgba(47, 111, 228, 0.28);
267
+ --aegis-focus-ring-offset: 2px;
268
+ --aegis-focus-outline-color: #2F6FE4;
269
+
270
+ /* ============================================
271
+ ICONOGRAPHY
272
+ ============================================ */
273
+ --aegis-icon-stroke-default: 1.75;
274
+ --aegis-icon-size-default: 20px;
275
+
276
+ /* ============================================
277
+ INTERACTIVE STATES
278
+ ============================================ */
279
+ --aegis-state-hover-overlay: rgba(22, 32, 43, 0.04);
280
+ --aegis-state-active-overlay: rgba(22, 32, 43, 0.08);
281
+ --aegis-state-selected-bg: #EEF4FF;
282
+ --aegis-state-selected-border: #BED4FF;
283
+ --aegis-state-drag-bg: #F6F8FA;
284
+
285
+ /* ============================================
286
+ DATA VISUALIZATION
287
+ ============================================ */
288
+ --aegis-data-vis-1: #2F6FE4;
289
+ --aegis-data-vis-2: #2E8F83;
290
+ --aegis-data-vis-3: #7B61C9;
291
+ --aegis-data-vis-4: #B86A00;
292
+ --aegis-data-vis-5: #C23A3A;
293
+ --aegis-data-vis-gridline: #DCE3EA;
294
+ --aegis-data-vis-axis: #66768A;
295
+ }
296
+
297
+ /* ============================================
298
+ REDUCED MOTION
299
+ ============================================ */
300
+ @media (prefers-reduced-motion: reduce) {
301
+ :root {
302
+ --aegis-motion-duration-fast: 0ms;
303
+ --aegis-motion-duration-base: 0ms;
304
+ --aegis-motion-duration-slow: 0ms;
305
+ }
306
+ }
307
+
308
+ /* ============================================
309
+ GLOBAL RESET & BASE STYLES
310
+ ============================================ */
311
+ *,
312
+ *::before,
313
+ *::after {
314
+ box-sizing: border-box;
315
+ }
316
+
317
+ body {
318
+ margin: 0;
319
+ font-family: var(--aegis-font-family-sans);
320
+ font-size: var(--aegis-font-size-body-lg);
321
+ line-height: var(--aegis-line-height-body-lg);
322
+ color: var(--aegis-color-text-primary);
323
+ background-color: var(--aegis-color-surface-canvas);
324
+ -webkit-font-smoothing: antialiased;
325
+ -moz-osx-font-smoothing: grayscale;
326
+ }
327
+
328
+ /* Focus visible baseline — keyboard-only focus ring */
329
+ :focus-visible {
330
+ outline: var(--aegis-border-width-medium) solid var(--aegis-focus-outline-color);
331
+ outline-offset: var(--aegis-focus-ring-offset);
332
+ box-shadow: var(--aegis-shadow-focus);
333
+ }