@genomicx/ui 0.5.0 → 0.6.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 +1 -1
- package/src/styles/components.css +29 -2
- package/src/styles/tokens.css +3 -0
package/package.json
CHANGED
|
@@ -357,17 +357,44 @@ code {
|
|
|
357
357
|
}
|
|
358
358
|
.btn-secondary:hover { border-color: var(--gx-accent); color: var(--gx-accent); }
|
|
359
359
|
|
|
360
|
-
.input-field
|
|
360
|
+
.input-field,
|
|
361
|
+
.gx-input,
|
|
362
|
+
.gx-select {
|
|
361
363
|
background: var(--gx-bg);
|
|
362
364
|
border: 1px solid var(--gx-border);
|
|
363
365
|
color: var(--gx-text);
|
|
364
366
|
border-radius: 6px;
|
|
365
367
|
padding: 0.5rem 0.75rem;
|
|
366
368
|
font-size: 0.875rem;
|
|
369
|
+
font-family: inherit;
|
|
367
370
|
transition: border-color var(--gx-transition);
|
|
368
371
|
outline: none;
|
|
369
372
|
}
|
|
370
|
-
.input-field:focus
|
|
373
|
+
.input-field:focus,
|
|
374
|
+
.gx-input:focus,
|
|
375
|
+
.gx-select:focus { border-color: var(--gx-accent); box-shadow: 0 0 0 3px var(--gx-accent-dim); }
|
|
376
|
+
|
|
377
|
+
/* ── gx-btn variants ─────────────────────────── */
|
|
378
|
+
.gx-btn {
|
|
379
|
+
display: inline-flex;
|
|
380
|
+
align-items: center;
|
|
381
|
+
justify-content: center;
|
|
382
|
+
gap: 0.375rem;
|
|
383
|
+
font-family: inherit;
|
|
384
|
+
font-weight: 600;
|
|
385
|
+
font-size: 0.875rem;
|
|
386
|
+
padding: 0.6rem 1.25rem;
|
|
387
|
+
border-radius: 6px;
|
|
388
|
+
border: none;
|
|
389
|
+
cursor: pointer;
|
|
390
|
+
transition: all var(--gx-transition);
|
|
391
|
+
}
|
|
392
|
+
.gx-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
393
|
+
.gx-btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
|
|
394
|
+
.gx-btn-primary { background: var(--gx-accent); color: var(--gx-text-inverted); }
|
|
395
|
+
.gx-btn-primary:hover:not(:disabled) { background: var(--gx-accent-hover); }
|
|
396
|
+
.gx-btn-secondary { background: transparent; color: var(--gx-text); border: 1px solid var(--gx-border); }
|
|
397
|
+
.gx-btn-secondary:hover:not(:disabled) { border-color: var(--gx-accent); color: var(--gx-accent); }
|
|
371
398
|
|
|
372
399
|
.label {
|
|
373
400
|
display: block;
|
package/src/styles/tokens.css
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
--gx-success: #0d9488;
|
|
17
17
|
--gx-warning: #F59E0B;
|
|
18
18
|
--gx-error: #EF4444;
|
|
19
|
+
--gx-accent-dim: rgba(13, 148, 136, 0.1);
|
|
19
20
|
--gx-nav-bg: rgba(255, 255, 255, 0.9);
|
|
20
21
|
--gx-code-bg: #f1f5f9;
|
|
21
22
|
--gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
@@ -23,6 +24,7 @@
|
|
|
23
24
|
--gx-max-width: 1280px;
|
|
24
25
|
--gx-radius: 8px;
|
|
25
26
|
--gx-radius-lg: 12px;
|
|
27
|
+
--gx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
26
28
|
}
|
|
27
29
|
|
|
28
30
|
[data-theme="dark"] {
|
|
@@ -39,6 +41,7 @@
|
|
|
39
41
|
--gx-accent: #2dd4bf;
|
|
40
42
|
--gx-accent-hover: #14b8a6;
|
|
41
43
|
--gx-indigo: #818cf8;
|
|
44
|
+
--gx-accent-dim: rgba(45, 212, 191, 0.12);
|
|
42
45
|
--gx-nav-bg: rgba(15, 23, 42, 0.9);
|
|
43
46
|
--gx-code-bg: #0f172a;
|
|
44
47
|
--gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|