@soulbatical/tetra-ui 0.2.9 → 0.2.10

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/styles/dark-mode.css +5 -5
  3. package/src/styles/tokens.css +16 -59
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
- "version": "0.2.9",
7
+ "version": "0.2.10",
8
8
  "description": "Shared React frontend framework for Tetra platform projects (Soulbatical BV) — config-driven components, hooks, providers, and styling",
9
9
  "type": "module",
10
10
  "main": "dist/index.js",
package/src/styles/dark-mode.css CHANGED
@@ -1,11 +1,11 @@
1
1
  /*
2
- * Tetra UI Dark Mode Tokens (standalone)
2
+ * Tetra UI Dark Mode — Optional standalone dark tokens
3
3
  *
4
- * Import this file if you ONLY need the dark-mode overrides
5
- * (e.g. you already define your own light-mode tokens).
6
- *
7
- * Usage:
4
+ * Import AFTER tokens.css if you want automatic dark mode:
5
+ * @import '@soulbatical/tetra-ui/styles/tokens.css';
8
6
  * @import '@soulbatical/tetra-ui/styles/dark-mode.css';
7
+ *
8
+ * Skip this file if you handle dark mode yourself (recommended).
9
9
  */
10
10
 
11
11
  @media (prefers-color-scheme: dark) {
package/src/styles/tokens.css CHANGED
@@ -1,40 +1,40 @@
1
1
  /*
2
- * Tetra UI Design Tokens
2
+ * Tetra UI Design Tokens — Light mode defaults
3
3
  *
4
- * These CSS custom properties define the visual language for all tetra-ui
5
- * layout and feature components. Consumers override them to theme their app.
6
- *
7
- * Usage:
4
+ * Import this file and override tokens for your brand/theme:
8
5
  * @import '@soulbatical/tetra-ui/styles/tokens.css';
9
6
  *
10
- * Or define your own values on :root / .dark / any parent element.
7
+ * For dark mode: override --tetra-* in your own [data-theme="dark"] block,
8
+ * or map them to your existing theme variables via var() references.
9
+ *
10
+ * Example (mapping to your own theme system):
11
+ * :root { --tetra-bg: var(--my-bg-card); }
11
12
  *
12
- * NOTE: shadcn/ui primitives (Button, Input, Card, etc.) use their own
13
- * token system (--background, --primary, etc.) and are NOT affected by these.
14
- * These tokens are for tetra-ui layout and feature components only.
13
+ * Example (direct dark mode override):
14
+ * [data-theme="dark"] { --tetra-bg: #1a1a2e; }
15
15
  */
16
16
 
17
17
  :root {
18
- /* -- Backgrounds ---------------------------------------- */
18
+ /* Backgrounds */
19
19
  --tetra-bg: #ffffff;
20
20
  --tetra-bg-subtle: #f9fafb;
21
21
  --tetra-bg-muted: #f3f4f6;
22
22
 
23
- /* -- Borders -------------------------------------------- */
23
+ /* Borders */
24
24
  --tetra-border: #e5e7eb;
25
25
  --tetra-border-subtle: #f3f4f6;
26
26
 
27
- /* -- Text ----------------------------------------------- */
27
+ /* Text */
28
28
  --tetra-text: #111827;
29
29
  --tetra-text-muted: #6b7280;
30
30
  --tetra-text-inverted: #ffffff;
31
31
 
32
- /* -- Accent (primary action color) ---------------------- */
32
+ /* Accent */
33
33
  --tetra-accent: #3b82f6;
34
34
  --tetra-accent-subtle: #eff6ff;
35
35
  --tetra-accent-hover: #2563eb;
36
36
 
37
- /* -- Semantic ------------------------------------------- */
37
+ /* Semantic */
38
38
  --tetra-danger: #ef4444;
39
39
  --tetra-danger-subtle: #fef2f2;
40
40
  --tetra-success: #22c55e;
@@ -42,55 +42,12 @@
42
42
  --tetra-warning: #f59e0b;
43
43
  --tetra-warning-subtle: #fffbeb;
44
44
 
45
- /* -- Shape ---------------------------------------------- */
45
+ /* Shape */
46
46
  --tetra-radius: 8px;
47
47
  --tetra-radius-sm: 4px;
48
48
  --tetra-radius-lg: 12px;
49
49
 
50
- /* -- Typography ----------------------------------------- */
50
+ /* Typography */
51
51
  --tetra-font: inherit;
52
52
  --tetra-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
53
53
  }
54
-
55
- /* Dark mode -- auto-applied via prefers-color-scheme or [data-theme="dark"] */
56
- @media (prefers-color-scheme: dark) {
57
- :root:not([data-theme="light"]) {
58
- --tetra-bg: #1a1a2e;
59
- --tetra-bg-subtle: #222240;
60
- --tetra-bg-muted: #2a2a4a;
61
- --tetra-border: rgba(255,255,255,0.15);
62
- --tetra-border-subtle: rgba(255,255,255,0.1);
63
- --tetra-text: #f0f0f5;
64
- --tetra-text-muted: #9999bb;
65
- --tetra-text-inverted: #0a0a1a;
66
- --tetra-accent: #3b82f6;
67
- --tetra-accent-subtle: rgba(59,130,246,0.15);
68
- --tetra-accent-hover: #2563eb;
69
- --tetra-danger: #ef4444;
70
- --tetra-danger-subtle: rgba(239,68,68,0.15);
71
- --tetra-success: #22c55e;
72
- --tetra-success-subtle: rgba(34,197,94,0.15);
73
- --tetra-warning: #f59e0b;
74
- --tetra-warning-subtle: rgba(245,158,11,0.15);
75
- }
76
- }
77
-
78
- [data-theme="dark"] {
79
- --tetra-bg: #1a1a2e;
80
- --tetra-bg-subtle: #222240;
81
- --tetra-bg-muted: #2a2a4a;
82
- --tetra-border: rgba(255,255,255,0.15);
83
- --tetra-border-subtle: rgba(255,255,255,0.1);
84
- --tetra-text: #f0f0f5;
85
- --tetra-text-muted: #9999bb;
86
- --tetra-text-inverted: #0a0a1a;
87
- --tetra-accent: #3b82f6;
88
- --tetra-accent-subtle: rgba(59,130,246,0.15);
89
- --tetra-accent-hover: #2563eb;
90
- --tetra-danger: #ef4444;
91
- --tetra-danger-subtle: rgba(239,68,68,0.15);
92
- --tetra-success: #22c55e;
93
- --tetra-success-subtle: rgba(34,197,94,0.15);
94
- --tetra-warning: #f59e0b;
95
- --tetra-warning-subtle: rgba(245,158,11,0.15);
96
- }