@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cytario/design",
3
- "version": "7.2.0",
3
+ "version": "9.0.0",
4
4
  "description": "Cytario design system and brand portal",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,16 +16,14 @@
16
16
  "types": "./dist/index.d.ts"
17
17
  },
18
18
  "./styles.css": "./dist/index.css",
19
- "./tokens/variables.css": "./src/tokens/variables.css",
20
- "./tokens/variables-dark.css": "./src/tokens/variables-dark.css",
21
- "./tokens/utilities.css": "./src/tokens/utilities.css",
19
+ "./styles/tokens.css": "./src/styles/tokens.css",
20
+ "./styles/theme.css": "./src/styles/theme.css",
22
21
  "./styles/*": "./src/styles/*"
23
22
  },
24
23
  "files": [
25
24
  "dist",
26
- "src/tokens/variables.css",
27
- "src/tokens/variables-dark.css",
28
- "src/tokens/utilities.css",
25
+ "assets",
26
+ "src/styles/theme.css",
29
27
  "src/styles"
30
28
  ],
31
29
  "publishConfig": {
@@ -35,8 +33,8 @@
35
33
  "scripts": {
36
34
  "dev": "storybook dev -p 6006",
37
35
  "build": "storybook build",
38
- "build:tokens": "node scripts/build-tokens.ts",
39
- "build:css": "tailwindcss -i src/styles/tailwind.css -o dist/index.css --minify",
36
+ "validate:tokens": "node scripts/validate-tokens.ts",
37
+ "build:css": "tailwindcss -i src/styles/tailwind.css -o dist/index.css --minify && mkdir -p dist/fonts && cp src/styles/fonts/*.ttf dist/fonts/",
40
38
  "build:lib": "tsup && npm run build:css",
41
39
  "test": "vitest",
42
40
  "lint": "eslint src/",
@@ -64,6 +62,7 @@
64
62
  "@storybook/react": "10.2.10",
65
63
  "@storybook/react-vite": "10.2.10",
66
64
  "@tailwindcss/cli": "^4.2.1",
65
+ "@tailwindcss/typography": "^0.5.20",
67
66
  "@tailwindcss/vite": "4.2.1",
68
67
  "@testing-library/jest-dom": "6.9.1",
69
68
  "@testing-library/react": "16.3.2",
@@ -76,7 +75,6 @@
76
75
  "remark-gfm": "^4.0.1",
77
76
  "semantic-release": "^25.0.3",
78
77
  "storybook": "10.2.10",
79
- "style-dictionary": "5.3.2",
80
78
  "svgo": "4.0.0",
81
79
  "tailwindcss": "4.2.1",
82
80
  "tailwindcss-react-aria-components": "^2.1.0",
package/src/styles/tailwind.css CHANGED
@@ -1,99 +1,2 @@
1
1
  @import "tailwindcss";
2
- @import "tw-animate-css";
3
- @import "../tokens/utilities.css";
4
- @plugin "tailwindcss-react-aria-components";
5
- @source "../../src";
6
-
7
- @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
8
-
9
- @theme {
10
- /* Brand Colors — sourced from tokens/variables.css */
11
- --color-purple-50: #f5f0fa;
12
- --color-purple-100: #ead9f5;
13
- --color-purple-200: #d4b3eb;
14
- --color-purple-300: #b87ddb;
15
- --color-purple-400: #9b4fcb;
16
- --color-purple-500: #7a2ea8;
17
- --color-purple-600: #6b2695;
18
- --color-purple-700: #5c2483;
19
- --color-purple-800: #4a1d6a;
20
- --color-purple-900: #3a1754;
21
-
22
- --color-teal-50: #edf9f9;
23
- --color-teal-100: #d0f0f0;
24
- --color-teal-200: #a1e1e2;
25
- --color-teal-300: #6dd0d1;
26
- --color-teal-400: #44c4c5;
27
- --color-teal-500: #35b7b8;
28
- --color-teal-600: #2a9b9c;
29
- --color-teal-700: #217d7e;
30
- --color-teal-800: #1a6364;
31
- --color-teal-900: #144d4e;
32
-
33
- --color-green-50: #f0fdf4;
34
- --color-green-100: #dcfce7;
35
- --color-green-200: #bbf7d0;
36
- --color-green-300: #86efac;
37
- --color-green-400: #4ade80;
38
- --color-green-500: #22c55e;
39
- --color-green-600: #16a34a;
40
- --color-green-700: #15803d;
41
- --color-green-800: #166534;
42
- --color-green-900: #14532d;
43
-
44
- --color-rose-50: #fff1f2;
45
- --color-rose-100: #ffe4e6;
46
- --color-rose-200: #fecdd3;
47
- --color-rose-300: #fda4af;
48
- --color-rose-400: #fb7185;
49
- --color-rose-500: #f43f5e;
50
- --color-rose-600: #e11d48;
51
- --color-rose-700: #be123c;
52
- --color-rose-800: #9f1239;
53
- --color-rose-900: #881337;
54
-
55
- --color-slate-50: #f8fafc;
56
- --color-slate-100: #f1f5f9;
57
- --color-slate-200: #e2e8f0;
58
- --color-slate-300: #cbd5e1;
59
- --color-slate-400: #94a3b8;
60
- --color-slate-500: #64748b;
61
- --color-slate-600: #475569;
62
- --color-slate-700: #334155;
63
- --color-slate-800: #1e293b;
64
- --color-slate-900: #0f172a;
65
-
66
- --color-amber-50: #fffbeb;
67
- --color-amber-100: #fef3c7;
68
- --color-amber-200: #fde68a;
69
- --color-amber-300: #fcd34d;
70
- --color-amber-400: #fbbf24;
71
- --color-amber-500: #f59e0b;
72
- --color-amber-600: #d97706;
73
- --color-amber-700: #b45309;
74
- --color-amber-800: #92400e;
75
- --color-amber-900: #78350f;
76
-
77
- --color-neutral-0: #ffffff;
78
- --color-neutral-50: #f9fafb;
79
- --color-neutral-100: #f3f4f6;
80
- --color-neutral-200: #e5e7eb;
81
- --color-neutral-300: #d1d5db;
82
- --color-neutral-400: #9ca3af;
83
- --color-neutral-500: #6b7280;
84
- --color-neutral-600: #4b5563;
85
- --color-neutral-700: #374151;
86
- --color-neutral-800: #1f2937;
87
- --color-neutral-900: #111827;
88
- --color-neutral-950: #030712;
89
- --color-neutral-1000: #000000;
90
-
91
- /* Border Radius */
92
- --radius-sm: 4px;
93
- --radius-md: 8px;
94
- --radius-lg: 12px;
95
- --radius-xl: 16px;
96
-
97
- /* Typography */
98
- --font-sans: "Montserrat", system-ui, sans-serif;
99
- }
2
+ @import "./theme.css";