@cytario/design 7.2.0 → 9.0.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 (40) hide show
  1. package/README.md +15 -28
  2. package/assets/approvals/.gitkeep +0 -0
  3. package/assets/fonts/.gitkeep +0 -0
  4. package/assets/fonts/Montserrat-Italic-VariableFont_wght.ttf +0 -0
  5. package/assets/fonts/Montserrat-VariableFont_wght.ttf +0 -0
  6. package/assets/logos/.gitkeep +0 -0
  7. package/assets/logos/cytario-logo-mono-black.svg +1 -0
  8. package/assets/logos/cytario-logo-mono-white.svg +1 -0
  9. package/assets/logos/cytario-logo-purple-tagline.svg +1 -0
  10. package/assets/logos/cytario-logo-purple.svg +1 -0
  11. package/assets/logos/cytario-logo-white-tagline.svg +1 -0
  12. package/assets/logos/cytario-logo-white.svg +1 -0
  13. package/assets/logos/png/cytario-logo-mono-white.png +0 -0
  14. package/assets/logos/png/cytario-logo-on-purple.png +0 -0
  15. package/assets/logos/png/cytario-logo-purple-tagline.png +0 -0
  16. package/assets/logos/png/cytario-logo-purple.png +0 -0
  17. package/assets/logos/png/cytario-logo-white-tagline.png +0 -0
  18. package/assets/logos/png/cytario-logo-white.png +0 -0
  19. package/assets/wireframes/DESIGN-SPEC.md +150 -0
  20. package/assets/wireframes/connection-info-edit-aws.puml +41 -0
  21. package/assets/wireframes/connection-info-edit-custom.puml +34 -0
  22. package/assets/wireframes/connection-info-view.puml +42 -0
  23. package/assets/wireframes/file-info-default.puml +25 -0
  24. package/assets/wireframes/file-info-delete-confirm.puml +28 -0
  25. package/dist/fonts/Montserrat-Italic-VariableFont_wght.ttf +0 -0
  26. package/dist/fonts/Montserrat-VariableFont_wght.ttf +0 -0
  27. package/dist/index.css +1 -1
  28. package/dist/index.d.ts +115 -269
  29. package/dist/index.js +647 -882
  30. package/dist/index.js.map +1 -1
  31. package/package.json +8 -10
  32. package/src/styles/fonts/Montserrat-Italic-VariableFont_wght.ttf +0 -0
  33. package/src/styles/fonts/Montserrat-VariableFont_wght.ttf +0 -0
  34. package/src/styles/tailwind.css +1 -98
  35. package/src/styles/theme.css +557 -0
  36. package/src/styles/tokens.css +191 -0
  37. package/src/styles/global.css +0 -48
  38. package/src/tokens/utilities.css +0 -55
  39. package/src/tokens/variables-dark.css +0 -201
  40. package/src/tokens/variables.css +0 -201
package/src/tokens/variables.css DELETED
@@ -1,201 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- @layer cytario-design {
6
- :root {
7
- --color-purple-50: #f5f0fa;
8
- --color-purple-100: #ead9f5;
9
- --color-purple-200: #d4b3eb;
10
- --color-purple-300: #b87ddb;
11
- --color-purple-400: #9b4fcb;
12
- --color-purple-500: #7a2ea8;
13
- --color-purple-600: #6b2695;
14
- --color-purple-700: #5c2483;
15
- --color-purple-800: #4a1d6a;
16
- --color-purple-900: #3a1754;
17
- --color-purple-950: #2a0f3e;
18
- --color-teal-50: #edf9f9;
19
- --color-teal-100: #d0f0f0;
20
- --color-teal-200: #a1e1e2;
21
- --color-teal-300: #6dd0d1;
22
- --color-teal-400: #44c4c5;
23
- --color-teal-500: #35b7b8;
24
- --color-teal-600: #2a9b9c;
25
- --color-teal-700: #217d7e;
26
- --color-teal-800: #1a6364;
27
- --color-teal-900: #144d4e;
28
- --color-teal-950: #0a2829;
29
- --color-green-50: #f0fdf4;
30
- --color-green-100: #dcfce7;
31
- --color-green-200: #bbf7d0;
32
- --color-green-300: #86efac;
33
- --color-green-400: #4ade80;
34
- --color-green-500: #22c55e;
35
- --color-green-600: #16a34a;
36
- --color-green-700: #15803d;
37
- --color-green-800: #166534;
38
- --color-green-900: #14532d;
39
- --color-green-950: #052e16;
40
- --color-rose-50: #fff1f2;
41
- --color-rose-100: #ffe4e6;
42
- --color-rose-200: #fecdd3;
43
- --color-rose-300: #fda4af;
44
- --color-rose-400: #fb7185;
45
- --color-rose-500: #f43f5e;
46
- --color-rose-600: #e11d48;
47
- --color-rose-700: #be123c;
48
- --color-rose-800: #9f1239;
49
- --color-rose-900: #881337;
50
- --color-rose-950: #4c0519;
51
- --color-slate-50: #f8fafc;
52
- --color-slate-100: #f1f5f9;
53
- --color-slate-200: #e2e8f0;
54
- --color-slate-300: #cbd5e1;
55
- --color-slate-400: #94a3b8;
56
- --color-slate-500: #64748b;
57
- --color-slate-600: #475569;
58
- --color-slate-700: #334155;
59
- --color-slate-800: #1e293b;
60
- --color-slate-900: #0f172a;
61
- --color-slate-950: #020617;
62
- --color-amber-50: #fffbeb;
63
- --color-amber-100: #fef3c7;
64
- --color-amber-200: #fde68a;
65
- --color-amber-300: #fcd34d;
66
- --color-amber-400: #fbbf24;
67
- --color-amber-500: #f59e0b;
68
- --color-amber-600: #d97706;
69
- --color-amber-700: #b45309;
70
- --color-amber-800: #92400e;
71
- --color-amber-900: #78350f;
72
- --color-amber-950: #451a03;
73
- --color-blue-50: #eff6ff;
74
- --color-blue-100: #dbeafe;
75
- --color-blue-200: #bfdbfe;
76
- --color-blue-300: #93c5fd;
77
- --color-blue-400: #60a5fa;
78
- --color-blue-500: #3b82f6;
79
- --color-blue-600: #2563eb;
80
- --color-blue-700: #1d4ed8;
81
- --color-blue-800: #1e40af;
82
- --color-blue-900: #1e3a8a;
83
- --color-blue-950: #172554;
84
- --color-white: #ffffff;
85
- --color-black: #000000;
86
- --color-alpha-black80: rgba(0, 0, 0, 0.8);
87
- --color-alpha-black60: rgba(0, 0, 0, 0.6);
88
- --color-alpha-black40: rgba(0, 0, 0, 0.4);
89
- --color-alpha-black06: rgba(0, 0, 0, 0.06);
90
- --color-alpha-white10: rgba(255, 255, 255, 0.1);
91
- --color-alpha-white06: rgba(255, 255, 255, 0.06);
92
- --spacing-1: 4px;
93
- --spacing-2: 8px;
94
- --spacing-3: 12px;
95
- --spacing-4: 16px;
96
- --spacing-6: 24px;
97
- --spacing-8: 32px;
98
- --spacing-12: 48px;
99
- --spacing-16: 64px;
100
- --border-radius-none: 0px;
101
- --border-radius-sm: 4px;
102
- --border-radius-md: 8px;
103
- --border-radius-lg: 12px;
104
- --border-radius-xl: 16px;
105
- --border-radius-full: 9999px;
106
- --font-size-xs: 12px;
107
- --font-size-sm: 14px;
108
- --font-size-base: 16px;
109
- --font-size-lg: 18px;
110
- --font-size-xl: 20px;
111
- --font-size-2xl: 24px;
112
- --font-size-3xl: 30px;
113
- --font-size-4xl: 36px;
114
- --font-size-5xl: 48px;
115
- --font-weight-light: 300;
116
- --font-weight-regular: 400;
117
- --font-weight-medium: 500;
118
- --font-weight-semibold: 600;
119
- --font-weight-bold: 700;
120
- --font-weight-extrabold: 800;
121
- --line-height-tight: 1.25;
122
- --line-height-normal: 1.5;
123
- --line-height-relaxed: 1.625;
124
- --color-background: var(--color-white);
125
- --color-foreground: var(--color-slate-900);
126
- --color-card: var(--color-slate-50);
127
- --color-muted: var(--color-slate-100);
128
- --color-muted-foreground: var(--color-slate-600);
129
- --color-accent: var(--color-slate-200);
130
- --color-accent-foreground: var(--color-slate-900);
131
- --color-accent-pressed: var(--color-slate-300);
132
- --color-border: var(--color-slate-200);
133
- --color-ring: var(--color-teal-500);
134
- --color-overlay: var(--color-alpha-black80);
135
- --color-backdrop: var(--color-alpha-black40);
136
- --color-primary: var(--color-purple-700);
137
- --color-primary-foreground: var(--color-white);
138
- --color-primary-hover: var(--color-purple-800);
139
- --color-primary-pressed: var(--color-purple-900);
140
- --color-secondary: var(--color-teal-300);
141
- --color-secondary-foreground: var(--color-teal-950);
142
- --color-secondary-hover: var(--color-teal-400);
143
- --color-secondary-pressed: var(--color-teal-500);
144
- --color-destructive: var(--color-rose-600);
145
- --color-destructive-foreground: var(--color-white);
146
- --color-destructive-hover: var(--color-rose-700);
147
- --color-destructive-pressed: var(--color-rose-800);
148
- --color-destructive-surface: var(--color-rose-50);
149
- --color-destructive-surface-foreground: var(--color-rose-700);
150
- --color-destructive-border: var(--color-rose-200);
151
- --color-success: var(--color-green-700);
152
- --color-success-foreground: var(--color-white);
153
- --color-success-hover: var(--color-green-800);
154
- --color-success-pressed: var(--color-green-900);
155
- --color-success-surface: var(--color-green-50);
156
- --color-success-surface-foreground: var(--color-green-700);
157
- --color-success-border: var(--color-green-200);
158
- --color-warning: var(--color-amber-500);
159
- --color-warning-foreground: var(--color-slate-900);
160
- --color-warning-hover: var(--color-amber-400);
161
- --color-warning-pressed: var(--color-amber-300);
162
- --color-warning-surface: var(--color-amber-50);
163
- --color-warning-surface-foreground: var(--color-amber-800);
164
- --color-warning-border: var(--color-amber-200);
165
- --color-info: var(--color-blue-600);
166
- --color-info-foreground: var(--color-white);
167
- --color-info-hover: var(--color-blue-700);
168
- --color-info-pressed: var(--color-blue-800);
169
- --color-info-surface: var(--color-blue-50);
170
- --color-info-surface-foreground: var(--color-blue-700);
171
- --color-info-border: var(--color-blue-200);
172
- --color-delta-increase-bg: var(--color-rose-50);
173
- --color-delta-increase-text: var(--color-rose-700);
174
- --color-delta-increase-icon: var(--color-rose-500);
175
- --color-delta-decrease-bg: var(--color-green-50);
176
- --color-delta-decrease-text: var(--color-green-700);
177
- --color-delta-decrease-icon: var(--color-green-500);
178
- --color-delta-flat-bg: var(--color-slate-100);
179
- --color-delta-flat-text: var(--color-slate-500);
180
- --color-delta-flat-icon: var(--color-slate-400);
181
- --color-progress-track: var(--color-slate-200);
182
- --color-progress-fill: var(--color-purple-600);
183
- --color-progress-fill-success: var(--color-green-500);
184
- --color-progress-fill-warning: var(--color-amber-500);
185
- --color-progress-fill-danger: var(--color-rose-500);
186
- --color-badge-purple-bg: var(--color-purple-100);
187
- --color-badge-purple-text: var(--color-purple-700);
188
- --color-badge-teal-bg: var(--color-teal-100);
189
- --color-badge-teal-text: var(--color-teal-800);
190
- --color-badge-slate-bg: var(--color-slate-100);
191
- --color-badge-slate-text: var(--color-slate-700);
192
- --color-badge-rose-bg: var(--color-rose-100);
193
- --color-badge-rose-text: var(--color-rose-700);
194
- --color-badge-neutral-bg: var(--color-slate-100);
195
- --color-badge-neutral-text: var(--color-slate-700);
196
- --color-badge-green-bg: var(--color-green-100);
197
- --color-badge-green-text: var(--color-green-700);
198
- --color-badge-amber-bg: var(--color-amber-100);
199
- --color-badge-amber-text: var(--color-amber-800);
200
- }
201
- }