@openpkg-ts/ui 0.3.2 → 0.5.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openpkg-ts/ui",
3
- "version": "0.3.2",
3
+ "version": "0.5.0",
4
4
  "description": "UI primitives and components for OpenPkg documentation",
5
5
  "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
6
6
  "repository": {
@@ -50,9 +50,19 @@
50
50
  "zod": "^4.3.6"
51
51
  },
52
52
  "peerDependencies": {
53
+ "@openpkg-ts/sdk": "^0.35.0",
54
+ "@openpkg-ts/spec": "^0.34.1",
53
55
  "react": "^18 || ^19",
54
56
  "react-dom": "^18 || ^19"
55
57
  },
58
+ "peerDependenciesMeta": {
59
+ "@openpkg-ts/sdk": {
60
+ "optional": true
61
+ },
62
+ "@openpkg-ts/spec": {
63
+ "optional": true
64
+ }
65
+ },
56
66
  "devDependencies": {
57
67
  "@types/react": "^19.0.0",
58
68
  "@types/react-dom": "^19.0.0",
@@ -11,7 +11,7 @@
11
11
  --ch-0: dark;
12
12
  --ch-1: #5c5c5c;
13
13
  --ch-2: #c9555a;
14
- --ch-3: #d4a553;
14
+ --ch-3: #d4d4d4;
15
15
  --ch-4: #d4d4d4;
16
16
  --ch-5: #c4a7e7;
17
17
  --ch-6: #d4a553;
@@ -43,7 +43,7 @@
43
43
  --ch-0: light;
44
44
  --ch-1: #999999;
45
45
  --ch-2: #c9555a;
46
- --ch-3: #b8860b;
46
+ --ch-3: #3a3a3a;
47
47
  --ch-4: #3a3a3a;
48
48
  --ch-5: #7c3aed;
49
49
  --ch-6: #b8860b;
@@ -69,22 +69,47 @@
69
69
  --ch-26: #f5f5f5e6;
70
70
  }
71
71
 
72
- /* dk-* Tailwind v4 color theme (maps to --ch-* vars) */
72
+ /* openpkg-code-* Tailwind v4 color theme (maps to --ch-* vars) */
73
73
  @theme {
74
- --color-dk-background: var(--ch-16);
75
- --color-dk-border: var(--ch-23);
76
- --color-dk-tabs-background: var(--ch-22);
77
- --color-dk-tab-inactive-foreground: var(--ch-15);
78
- --color-dk-tab-active-foreground: var(--ch-4);
79
- --color-dk-selection: var(--ch-20);
80
- --color-dk-line-number: var(--ch-24);
81
- --color-dk-active-border: var(--ch-3);
74
+ --color-openpkg-code-bg: var(--ch-16);
75
+ --color-openpkg-code-border: var(--ch-23);
76
+ --color-openpkg-code-header: var(--ch-22);
77
+ --color-openpkg-code-text-inactive: var(--ch-15);
78
+ --color-openpkg-code-text-active: var(--ch-4);
79
+ --color-openpkg-code-selection: var(--ch-20);
80
+ --color-openpkg-code-line-number: var(--ch-24);
81
+ --color-openpkg-code-accent: var(--ch-6);
82
+ }
83
+
84
+ /* Italic syntax tokens — comments and keywords */
85
+ pre[data-ch] span[style*="--ch-1"] {
86
+ font-style: italic;
87
+ }
88
+ pre[data-ch] span[style*="--ch-7"] {
89
+ font-style: italic;
82
90
  }
83
91
 
84
92
  /* Selection utility — Tailwind can't auto-generate this */
85
93
  @layer utilities {
86
- .selection\:bg-dk-selection::selection,
87
- .selection\:bg-dk-selection *::selection {
94
+ .selection\:bg-openpkg-code-selection::selection,
95
+ .selection\:bg-openpkg-code-selection *::selection {
88
96
  background-color: var(--ch-20);
89
97
  }
90
98
  }
99
+
100
+ /* API reference layout grid */
101
+ @media (min-width: 1024px) {
102
+ .openpkg-api-layout {
103
+ grid-template-columns: var(--openpkg-left-width) var(--openpkg-right-width);
104
+ align-items: start;
105
+ }
106
+ }
107
+
108
+ /* Fade-in animation for layout columns */
109
+ @keyframes openpkg-fade-in {
110
+ from { opacity: 0; transform: translateY(8px); }
111
+ to { opacity: 1; transform: translateY(0); }
112
+ }
113
+ .openpkg-animate-fade-in {
114
+ animation: openpkg-fade-in 0.3s ease-out both;
115
+ }