schema-components 1.15.1 → 1.16.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/dist/html/styles.css +66 -19
  2. package/package.json +1 -1
package/dist/html/styles.css CHANGED
@@ -8,14 +8,61 @@
8
8
  * ```html
9
9
  * <link rel="stylesheet" href="node_modules/@scalar/schema-components/dist/styles.css">
10
10
  * ```
11
+ *
12
+ * Every colour flows through a --sc-* custom property. The defaults below
13
+ * cover light mode; the @media (prefers-color-scheme: dark) block redefines
14
+ * them for dark mode. Consumers can override either set of variables to
15
+ * brand the rendered output without forking the stylesheet.
11
16
  */
12
17
 
18
+ :root {
19
+ --sc-object-border: #e2e8f0;
20
+ --sc-legend-text: #334155;
21
+ --sc-label-text: #374151;
22
+ --sc-required-text: #dc2626;
23
+ --sc-input-text: #111827;
24
+ --sc-input-bg: #ffffff;
25
+ --sc-input-border: #d1d5db;
26
+ --sc-focus-ring: #3b82f6;
27
+ --sc-value-text: #111827;
28
+ --sc-value-empty-text: #9ca3af;
29
+ --sc-value-link-text: #2563eb;
30
+ --sc-hint-text: #6b7280;
31
+ --sc-tab-border: #d1d5db;
32
+ --sc-tab-text: #374151;
33
+ --sc-tab-active-bg: #eff6ff;
34
+ --sc-tab-active-border: #3b82f6;
35
+ --sc-tab-active-text: #1d4ed8;
36
+ }
37
+
38
+ @media (prefers-color-scheme: dark) {
39
+ :root {
40
+ --sc-object-border: #334155;
41
+ --sc-legend-text: #cbd5e1;
42
+ --sc-label-text: #cbd5e1;
43
+ --sc-required-text: #fca5a5;
44
+ --sc-input-text: #e2e8f0;
45
+ --sc-input-bg: #1e293b;
46
+ --sc-input-border: #475569;
47
+ --sc-focus-ring: #60a5fa;
48
+ --sc-value-text: #e2e8f0;
49
+ --sc-value-empty-text: #64748b;
50
+ --sc-value-link-text: #93c5fd;
51
+ --sc-hint-text: #94a3b8;
52
+ --sc-tab-border: #475569;
53
+ --sc-tab-text: #cbd5e1;
54
+ --sc-tab-active-bg: #1e3a5f;
55
+ --sc-tab-active-border: #60a5fa;
56
+ --sc-tab-active-text: #93c5fd;
57
+ }
58
+ }
59
+
13
60
  /* ---------------------------------------------------------------------- */
14
61
  /* Object containers */
15
62
  /* ---------------------------------------------------------------------- */
16
63
 
17
64
  .sc-object {
18
- border: 1px solid #e2e8f0;
65
+ border: 1px solid var(--sc-object-border);
19
66
  border-radius: 0.375rem;
20
67
  padding: 1rem;
21
68
  }
@@ -23,7 +70,7 @@
23
70
  .sc-object legend {
24
71
  font-weight: 600;
25
72
  font-size: 0.875rem;
26
- color: #334155;
73
+ color: var(--sc-legend-text);
27
74
  padding: 0 0.25rem;
28
75
  }
29
76
 
@@ -43,12 +90,12 @@
43
90
  display: block;
44
91
  font-size: 0.875rem;
45
92
  font-weight: 500;
46
- color: #374151;
93
+ color: var(--sc-label-text);
47
94
  margin-bottom: 0.25rem;
48
95
  }
49
96
 
50
97
  .sc-required {
51
- color: #dc2626;
98
+ color: var(--sc-required-text);
52
99
  font-weight: 600;
53
100
  }
54
101
 
@@ -59,17 +106,17 @@
59
106
  .sc-input {
60
107
  width: 100%;
61
108
  padding: 0.375rem 0.5rem;
62
- border: 1px solid #d1d5db;
109
+ border: 1px solid var(--sc-input-border);
63
110
  border-radius: 0.25rem;
64
111
  font-size: 0.875rem;
65
112
  line-height: 1.25rem;
66
- color: #111827;
67
- background-color: #fff;
113
+ color: var(--sc-input-text);
114
+ background-color: var(--sc-input-bg);
68
115
  box-sizing: border-box;
69
116
  }
70
117
 
71
118
  .sc-input:focus {
72
- outline: 2px solid #3b82f6;
119
+ outline: 2px solid var(--sc-focus-ring);
73
120
  outline-offset: -1px;
74
121
  border-color: transparent;
75
122
  }
@@ -91,11 +138,11 @@
91
138
 
92
139
  .sc-value {
93
140
  font-size: 0.875rem;
94
- color: #111827;
141
+ color: var(--sc-value-text);
95
142
  }
96
143
 
97
144
  .sc-value--empty {
98
- color: #9ca3af;
145
+ color: var(--sc-value-empty-text);
99
146
  }
100
147
 
101
148
  .sc-value--boolean {
@@ -103,7 +150,7 @@
103
150
  }
104
151
 
105
152
  .sc-value[href] {
106
- color: #2563eb;
153
+ color: var(--sc-value-link-text);
107
154
  text-decoration: none;
108
155
  }
109
156
 
@@ -152,7 +199,7 @@
152
199
  .sc-hint {
153
200
  display: block;
154
201
  font-size: 0.75rem;
155
- color: #6b7280;
202
+ color: var(--sc-hint-text);
156
203
  margin-top: 0.25rem;
157
204
  }
158
205
 
@@ -161,7 +208,7 @@
161
208
  /* ---------------------------------------------------------------------- */
162
209
 
163
210
  .sc-discriminated-union {
164
- border: 1px solid #e2e8f0;
211
+ border: 1px solid var(--sc-object-border);
165
212
  border-radius: 0.375rem;
166
213
  padding: 1rem;
167
214
  }
@@ -174,21 +221,21 @@
174
221
 
175
222
  .sc-tab {
176
223
  padding: 0.25rem 0.75rem;
177
- border: 1px solid #d1d5db;
224
+ border: 1px solid var(--sc-tab-border);
178
225
  border-radius: 0.25rem;
179
226
  background: transparent;
180
227
  cursor: pointer;
181
228
  font-size: 0.875rem;
182
- color: #374151;
229
+ color: var(--sc-tab-text);
183
230
  }
184
231
 
185
232
  .sc-tab:focus-visible {
186
- outline: 2px solid #3b82f6;
233
+ outline: 2px solid var(--sc-focus-ring);
187
234
  outline-offset: 2px;
188
235
  }
189
236
 
190
237
  .sc-tab--active {
191
- border-color: #3b82f6;
192
- background: #eff6ff;
193
- color: #1d4ed8;
238
+ border-color: var(--sc-tab-active-border);
239
+ background: var(--sc-tab-active-bg);
240
+ color: var(--sc-tab-active-text);
194
241
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "schema-components",
3
- "version": "1.15.1",
3
+ "version": "1.16.0",
4
4
  "description": "React components that render UI from Zod schemas, JSON Schema, and OpenAPI documents",
5
5
  "type": "module",
6
6
  "main": "./dist/index.mjs",