@reifydb/ui 0.6.0 → 0.8.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 (10) hide show
  1. package/dist/index.cjs +27 -26
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +27 -26
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +2 -2
  6. package/src/styles/base.css +40 -29
  7. package/src/styles/fonts.css +4 -74
  8. package/src/styles/index.css +2 -1
  9. package/src/styles/prism-theme.css +71 -0
  10. package/src/styles/theme.css +55 -45
package/src/styles/theme.css CHANGED
@@ -1,45 +1,49 @@
1
- /* SPDX-License-Identifier: AGPL-3.0-or-later */
1
+ /* SPDX-License-Identifier: Apache-2.0 */
2
2
  /* Copyright (c) 2026 ReifyDB */
3
3
 
4
4
  @theme {
5
- /* Background Colors - Pure black base */
6
- --color-bg-primary: #000000;
7
- --color-bg-secondary: #141414;
8
- --color-bg-tertiary: #1a1a1a;
9
- --color-bg-elevated: #3a3a3a;
5
+ /* Background Colors - Light neutral surfaces */
6
+ --color-bg-primary: #f7f7f8;
7
+ --color-bg-secondary: #ffffff;
8
+ --color-bg-tertiary: #f0f0f2;
9
+ --color-bg-elevated: #e4e4e7;
10
10
 
11
- /* Text Colors */
12
- --color-text-primary: #ffffff;
13
- --color-text-secondary: #a0a0a0;
14
- --color-text-muted: #585858;
11
+ /* Text Colors - Zinc ramp */
12
+ --color-text-primary: #18181b;
13
+ --color-text-secondary: #3f3f46;
14
+ --color-text-muted: #71717a;
15
15
 
16
- /* Primary Colors - Indigo (unchanged) */
17
- --color-primary: #818cf8;
18
- --color-primary-light: #a5b4fc;
19
- --color-primary-dark: #6366f1;
16
+ /* Primary Colors - Indigo-violet accent */
17
+ --color-primary: #7e85f2;
18
+ --color-primary-light: #6366f1;
19
+ --color-primary-dark: #2e39df;
20
20
 
21
21
  /* Forest Green - Secondary CTA */
22
22
  --color-forest: #166534;
23
23
  --color-forest-border: #14572f;
24
24
 
25
- /* Border Colors - Charcoal-based */
26
- --color-border-default: rgba(65, 65, 65, 0.8);
27
- --color-border-light: #343434;
28
- --color-border-subtle: #2a2a2a;
29
- --color-border-ghost: rgba(129, 140, 248, 0.3);
25
+ /* Border Colors - Near-black brutalist border + light hairlines */
26
+ --color-border-default: #18181b;
27
+ --color-border-light: #e4e4e7;
28
+ --color-border-subtle: #d4d4d8;
29
+ --color-border-ghost: rgba(126, 133, 242, 0.3);
30
30
 
31
- /* Code block colors */
32
- --color-code-bg: #0a0a0a;
33
- --color-code-bg-elevated: #141414;
34
- --color-code-border: #2a2a2a;
35
- --color-code-text: #E5E5E5;
36
- --color-code-text-muted: #585858;
31
+ /* Form inputs - fields blend into the page */
32
+ --color-input-bg: #f7f7f8;
33
+ --color-input-bg-focus: #f0f0f2;
37
34
 
38
- /* Status colors */
35
+ /* Code block colors - light */
36
+ --color-code-bg: #f0f0f2;
37
+ --color-code-bg-elevated: #ffffff;
38
+ --color-code-border: #d4d4d8;
39
+ --color-code-text: #18181b;
40
+ --color-code-text-muted: #71717a;
41
+
42
+ /* Status colors - functional (real errors/warnings) */
39
43
  --color-status-success: #22C55E;
40
44
  --color-status-warning: #F59E0B;
41
45
  --color-status-error: #DC2626;
42
- --color-status-info: #818cf8;
46
+ --color-status-info: #7e85f2;
43
47
 
44
48
  /* Shadows - Border-based depth */
45
49
  --shadow-soft: 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -47,25 +51,31 @@
47
51
  --shadow-large: 0px 4px 16px rgba(0, 0, 0, 0.3);
48
52
  --shadow-inset: 0px 4px 25px rgba(0, 0, 0, 0.14) inset;
49
53
 
50
- /* Rounded Corners - Sharp geometry */
51
- --radius-sm: 4px;
52
- --radius-md: 8px;
53
- --radius-lg: 8px;
54
- --radius-xl: 8px;
54
+ /* Hard offset shadows - Brutalist blocks (zero blur, near-black) */
55
+ --shadow-hard: 4px 4px 0 var(--color-border-default);
56
+ --shadow-hard-sm: 2px 2px 0 var(--color-border-default);
57
+ --shadow-hard-muted: 4px 4px 0 var(--color-border-subtle);
58
+ --shadow-hard-primary: 4px 4px 0 var(--color-primary-dark);
59
+
60
+ /* Rounded Corners - Brutalist square geometry */
61
+ --radius-sm: 0px;
62
+ --radius-md: 0px;
63
+ --radius-lg: 0px;
64
+ --radius-xl: 0px;
55
65
  --radius-pill: 9999px;
56
66
 
57
- /* Fonts */
58
- --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
59
- --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
60
- --font-mono: 'Inconsolata', 'SF Mono', Monaco, monospace;
67
+ /* Fonts - mono-first, Archivo Black display, Plex Sans body */
68
+ --font-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
69
+ --font-body: 'IBM Plex Sans Variable', ui-sans-serif, system-ui, sans-serif;
70
+ --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Monaco, monospace;
61
71
 
62
- /* Semantic grayscale */
63
- --color-gray-50: #0a0a0a;
64
- --color-gray-100: #141414;
65
- --color-gray-200: #1a1a1a;
66
- --color-gray-400: #585858;
67
- --color-gray-500: #888888;
68
- --color-gray-600: #aaaaaa;
69
- --color-gray-800: #e0e0e0;
70
- --color-gray-900: #ffffff;
72
+ /* Semantic grayscale - normal orientation (50 lightest -> 900 darkest) */
73
+ --color-gray-50: #fafafa;
74
+ --color-gray-100: #f4f4f5;
75
+ --color-gray-200: #e4e4e7;
76
+ --color-gray-400: #a1a1aa;
77
+ --color-gray-500: #71717a;
78
+ --color-gray-600: #52525b;
79
+ --color-gray-800: #27272a;
80
+ --color-gray-900: #18181b;
71
81
  }