@openpkg-ts/ui 0.1.7 → 0.2.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/tokens.css +93 -152
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openpkg-ts/ui",
3
- "version": "0.1.7",
3
+ "version": "0.2.0",
4
4
  "description": "UI primitives and components for OpenPkg documentation",
5
5
  "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
6
6
  "repository": {
package/src/styles/tokens.css CHANGED
@@ -1,50 +1,51 @@
1
1
  /**
2
- * Design tokens for Supabase/Stripe-style API documentation.
3
- * Rose Pine inspired syntax highlighting with dark theme.
2
+ * OpenPKG design tokens.
3
+ * Light by default, dark via .dark class, [data-theme="dark"], or prefers-color-scheme.
4
+ * Override any --openpkg-* variable to match your theme.
4
5
  */
5
6
 
6
7
  :root {
7
- /* Background colors (dark-first) */
8
- --openpkg-bg-root: #0c0c0c;
9
- --openpkg-bg-primary: #0f0f0f;
10
- --openpkg-bg-secondary: #171717;
11
- --openpkg-bg-tertiary: #1c1c1c;
12
- --openpkg-bg-code: #0f0f18;
13
- --openpkg-bg-code-header: #141420;
14
- --openpkg-bg-badge: #262626;
8
+ /* Background colors — light default */
9
+ --openpkg-bg-root: #ffffff;
10
+ --openpkg-bg-primary: #fafafa;
11
+ --openpkg-bg-secondary: #f5f5f5;
12
+ --openpkg-bg-tertiary: #eeeeee;
13
+ --openpkg-bg-code: #f8f8fc;
14
+ --openpkg-bg-code-header: #f0f0f8;
15
+ --openpkg-bg-badge: #e5e5e5;
15
16
  --openpkg-bg-chip: transparent;
16
17
  --openpkg-bg-chip-active: transparent;
17
- --openpkg-bg-collapsible: #161616;
18
- --openpkg-bg-details: #141414;
18
+ --openpkg-bg-collapsible: #f8f8f8;
19
+ --openpkg-bg-details: #fafafa;
19
20
 
20
21
  /* Text colors */
21
- --openpkg-text-primary: #ededed;
22
- --openpkg-text-secondary: #a0a0a0;
23
- --openpkg-text-muted: #666666;
24
- --openpkg-text-code: #e4e4e7;
22
+ --openpkg-text-primary: #1a1a1a;
23
+ --openpkg-text-secondary: #525252;
24
+ --openpkg-text-muted: #737373;
25
+ --openpkg-text-code: #1a1a1a;
25
26
 
26
- /* Syntax highlighting - Rose Pine */
27
- --openpkg-syn-keyword: #c4a7e7;
28
- --openpkg-syn-string: #9ccfd8;
29
- --openpkg-syn-function: #ebbcba;
30
- --openpkg-syn-property: #c4a7e7;
31
- --openpkg-syn-variable: #e4e4e7;
32
- --openpkg-syn-punctuation: #6e6a86;
33
- --openpkg-syn-number: #f6c177;
34
- --openpkg-syn-boolean: #eb6f92;
35
- --openpkg-syn-comment: #6e6a86;
27
+ /* Syntax highlighting — light */
28
+ --openpkg-syn-keyword: #8b5cf6;
29
+ --openpkg-syn-string: #059669;
30
+ --openpkg-syn-function: #dc2626;
31
+ --openpkg-syn-property: #7c3aed;
32
+ --openpkg-syn-variable: #1a1a1a;
33
+ --openpkg-syn-punctuation: #6b7280;
34
+ --openpkg-syn-number: #d97706;
35
+ --openpkg-syn-boolean: #be185d;
36
+ --openpkg-syn-comment: #9ca3af;
36
37
 
37
38
  /* Accent colors */
38
- --openpkg-accent-green: #3ecf8e;
39
- --openpkg-accent-blue: #6cb6ff;
40
- --openpkg-accent-purple: #c4a7e7;
41
- --openpkg-accent-link: #6cb6ff;
39
+ --openpkg-accent-green: #16a34a;
40
+ --openpkg-accent-blue: #2563eb;
41
+ --openpkg-accent-purple: #7c3aed;
42
+ --openpkg-accent-link: #2563eb;
42
43
 
43
44
  /* Border colors */
44
- --openpkg-border-subtle: #262626;
45
- --openpkg-border-medium: #333333;
46
- --openpkg-border-chip: #333333;
47
- --openpkg-border-chip-active: #666666;
45
+ --openpkg-border-subtle: #e5e5e5;
46
+ --openpkg-border-medium: #d4d4d4;
47
+ --openpkg-border-chip: #d4d4d4;
48
+ --openpkg-border-chip-active: #a3a3a3;
48
49
 
49
50
  /* Typography */
50
51
  --openpkg-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
@@ -60,18 +61,9 @@
60
61
  --openpkg-transition-fast: 150ms ease;
61
62
  --openpkg-transition-normal: 200ms ease;
62
63
  --openpkg-transition-slow: 300ms ease;
63
-
64
- /* Responsive breakpoints (for reference) */
65
- --openpkg-breakpoint-sm: 640px;
66
- --openpkg-breakpoint-md: 768px;
67
- --openpkg-breakpoint-lg: 1024px;
68
- --openpkg-breakpoint-xl: 1280px;
69
- --openpkg-breakpoint-2xl: 1536px;
70
64
  }
71
65
 
72
- /* =============================================================================
73
- Dark Mode - Explicit .dark class
74
- ============================================================================= */
66
+ /* Dark mode — explicit class or data attribute */
75
67
  .dark,
76
68
  [data-theme="dark"] {
77
69
  --openpkg-bg-root: #0c0c0c;
@@ -87,138 +79,87 @@
87
79
  --openpkg-text-secondary: #a0a0a0;
88
80
  --openpkg-text-muted: #666666;
89
81
  --openpkg-text-code: #e4e4e7;
82
+ --openpkg-accent-green: #3ecf8e;
83
+ --openpkg-accent-blue: #6cb6ff;
84
+ --openpkg-accent-purple: #c4a7e7;
85
+ --openpkg-accent-link: #6cb6ff;
90
86
  --openpkg-border-subtle: #262626;
91
87
  --openpkg-border-medium: #333333;
92
88
  --openpkg-border-chip: #333333;
93
89
  --openpkg-border-chip-active: #666666;
90
+ --openpkg-syn-keyword: #c4a7e7;
91
+ --openpkg-syn-string: #9ccfd8;
92
+ --openpkg-syn-function: #ebbcba;
93
+ --openpkg-syn-property: #c4a7e7;
94
+ --openpkg-syn-variable: #e4e4e7;
95
+ --openpkg-syn-punctuation: #6e6a86;
96
+ --openpkg-syn-number: #f6c177;
97
+ --openpkg-syn-boolean: #eb6f92;
98
+ --openpkg-syn-comment: #6e6a86;
94
99
  }
95
100
 
96
- /* =============================================================================
97
- Light Mode - Explicit .light class
98
- ============================================================================= */
99
- .light,
100
- [data-theme="light"] {
101
- --openpkg-bg-root: #ffffff;
102
- --openpkg-bg-primary: #fafafa;
103
- --openpkg-bg-secondary: #f5f5f5;
104
- --openpkg-bg-tertiary: #eeeeee;
105
- --openpkg-bg-code: #f8f8fc;
106
- --openpkg-bg-code-header: #f0f0f8;
107
- --openpkg-bg-badge: #e5e5e5;
108
- --openpkg-bg-collapsible: #f8f8f8;
109
- --openpkg-bg-details: #fafafa;
110
- --openpkg-text-primary: #1a1a1a;
111
- --openpkg-text-secondary: #525252;
112
- --openpkg-text-muted: #737373;
113
- --openpkg-text-code: #1a1a1a;
114
- --openpkg-border-subtle: #e5e5e5;
115
- --openpkg-border-medium: #d4d4d4;
116
- --openpkg-border-chip: #d4d4d4;
117
- --openpkg-border-chip-active: #a3a3a3;
118
-
119
- /* Light mode syntax - adjust for readability */
120
- --openpkg-syn-keyword: #8b5cf6;
121
- --openpkg-syn-string: #059669;
122
- --openpkg-syn-function: #dc2626;
123
- --openpkg-syn-property: #7c3aed;
124
- --openpkg-syn-variable: #1a1a1a;
125
- --openpkg-syn-punctuation: #6b7280;
126
- --openpkg-syn-number: #d97706;
127
- --openpkg-syn-boolean: #be185d;
128
- --openpkg-syn-comment: #9ca3af;
129
- }
130
-
131
- /* =============================================================================
132
- System Preference (when no explicit class)
133
- ============================================================================= */
134
- @media (prefers-color-scheme: light) {
135
- :root:not(.dark):not([data-theme="dark"]) {
136
- --openpkg-bg-root: #ffffff;
137
- --openpkg-bg-primary: #fafafa;
138
- --openpkg-bg-secondary: #f5f5f5;
139
- --openpkg-bg-tertiary: #eeeeee;
140
- --openpkg-bg-code: #f8f8fc;
141
- --openpkg-bg-code-header: #f0f0f8;
142
- --openpkg-bg-badge: #e5e5e5;
143
- --openpkg-bg-collapsible: #f8f8f8;
144
- --openpkg-bg-details: #fafafa;
145
- --openpkg-text-primary: #1a1a1a;
146
- --openpkg-text-secondary: #525252;
147
- --openpkg-text-muted: #737373;
148
- --openpkg-text-code: #1a1a1a;
149
- --openpkg-border-subtle: #e5e5e5;
150
- --openpkg-border-medium: #d4d4d4;
151
- --openpkg-border-chip: #d4d4d4;
152
- --openpkg-border-chip-active: #a3a3a3;
153
- --openpkg-syn-keyword: #8b5cf6;
154
- --openpkg-syn-string: #059669;
155
- --openpkg-syn-function: #dc2626;
156
- --openpkg-syn-property: #7c3aed;
157
- --openpkg-syn-variable: #1a1a1a;
158
- --openpkg-syn-punctuation: #6b7280;
159
- --openpkg-syn-number: #d97706;
160
- --openpkg-syn-boolean: #be185d;
161
- --openpkg-syn-comment: #9ca3af;
101
+ /* Dark mode — system preference */
102
+ @media (prefers-color-scheme: dark) {
103
+ :root:not(.light):not([data-theme="light"]) {
104
+ --openpkg-bg-root: #0c0c0c;
105
+ --openpkg-bg-primary: #0f0f0f;
106
+ --openpkg-bg-secondary: #171717;
107
+ --openpkg-bg-tertiary: #1c1c1c;
108
+ --openpkg-bg-code: #0f0f18;
109
+ --openpkg-bg-code-header: #141420;
110
+ --openpkg-bg-badge: #262626;
111
+ --openpkg-bg-collapsible: #161616;
112
+ --openpkg-bg-details: #141414;
113
+ --openpkg-text-primary: #ededed;
114
+ --openpkg-text-secondary: #a0a0a0;
115
+ --openpkg-text-muted: #666666;
116
+ --openpkg-text-code: #e4e4e7;
117
+ --openpkg-accent-green: #3ecf8e;
118
+ --openpkg-accent-blue: #6cb6ff;
119
+ --openpkg-accent-purple: #c4a7e7;
120
+ --openpkg-accent-link: #6cb6ff;
121
+ --openpkg-border-subtle: #262626;
122
+ --openpkg-border-medium: #333333;
123
+ --openpkg-border-chip: #333333;
124
+ --openpkg-border-chip-active: #666666;
125
+ --openpkg-syn-keyword: #c4a7e7;
126
+ --openpkg-syn-string: #9ccfd8;
127
+ --openpkg-syn-function: #ebbcba;
128
+ --openpkg-syn-property: #c4a7e7;
129
+ --openpkg-syn-variable: #e4e4e7;
130
+ --openpkg-syn-punctuation: #6e6a86;
131
+ --openpkg-syn-number: #f6c177;
132
+ --openpkg-syn-boolean: #eb6f92;
133
+ --openpkg-syn-comment: #6e6a86;
162
134
  }
163
135
  }
164
136
 
165
- /* =============================================================================
166
- Animation Keyframes
167
- ============================================================================= */
137
+ /* Animation keyframes */
168
138
  @keyframes openpkg-fade-in {
169
- from {
170
- opacity: 0;
171
- }
172
- to {
173
- opacity: 1;
174
- }
139
+ from { opacity: 0; }
140
+ to { opacity: 1; }
175
141
  }
176
142
 
177
143
  @keyframes openpkg-slide-down {
178
- from {
179
- opacity: 0;
180
- transform: translateY(-4px);
181
- }
182
- to {
183
- opacity: 1;
184
- transform: translateY(0);
185
- }
144
+ from { opacity: 0; transform: translateY(-4px); }
145
+ to { opacity: 1; transform: translateY(0); }
186
146
  }
187
147
 
188
148
  @keyframes openpkg-slide-up {
189
- from {
190
- opacity: 0;
191
- transform: translateY(4px);
192
- }
193
- to {
194
- opacity: 1;
195
- transform: translateY(0);
196
- }
149
+ from { opacity: 0; transform: translateY(4px); }
150
+ to { opacity: 1; transform: translateY(0); }
197
151
  }
198
152
 
199
153
  @keyframes openpkg-expand {
200
- from {
201
- opacity: 0;
202
- height: 0;
203
- }
204
- to {
205
- opacity: 1;
206
- height: var(--radix-collapsible-content-height);
207
- }
154
+ from { opacity: 0; height: 0; }
155
+ to { opacity: 1; height: var(--radix-collapsible-content-height); }
208
156
  }
209
157
 
210
158
  @keyframes openpkg-collapse {
211
- from {
212
- opacity: 1;
213
- height: var(--radix-collapsible-content-height);
214
- }
215
- to {
216
- opacity: 0;
217
- height: 0;
218
- }
159
+ from { opacity: 1; height: var(--radix-collapsible-content-height); }
160
+ to { opacity: 0; height: 0; }
219
161
  }
220
162
 
221
- /* Utility classes for animations */
222
163
  .openpkg-animate-fade-in {
223
164
  animation: openpkg-fade-in var(--openpkg-transition-normal) ease-out;
224
165
  }