@brickslab./theme-default 2.0.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/tokens.css +222 -0
  2. package/package.json +26 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,222 @@
1
+ :root {
2
+ /* ──────────────────────────────────────────────────────────────
3
+ LIGHT MODE - Default theme implementation
4
+ ────────────────────────────────────────────────────────────── */
5
+
6
+ /* ── COLORS: Semantic ──────────────────────────────────────── */
7
+ --color-bg: #ffffff;
8
+ --color-fg: #0b1220;
9
+ --color-muted: #52607a;
10
+ --color-brand: #CC4A48;
11
+ --color-brand-dark: #8F2834;
12
+ --color-excellent: #22C55E;
13
+ --color-success: #4ADE80;
14
+ --color-warning: #F59E0B;
15
+ --color-error: #CC4A48;
16
+ --color-info: #3B82F6;
17
+
18
+ /* ── COLORS: Surfaces (App-specific, but part of theme) ────── */
19
+ --c-surface: #ffffff;
20
+ --c-surface-elevated: #f7f7f7;
21
+ --c-surface-secondary: #f5f5f5;
22
+ --c-table-row-alt: rgba(0, 0, 0, 0.02);
23
+ --c-border: #e0e0e0;
24
+ --c-brand-subtle: rgba(204, 74, 72, 0.08);
25
+ --c-brand-border: rgba(204, 74, 72, 0.3);
26
+
27
+ /* ── COLORS: Status subtle (for Alert, Banner, Badge) ──────── */
28
+ --c-success-subtle: rgba(74, 222, 128, 0.10);
29
+ --c-warning-subtle: rgba(245, 158, 11, 0.10);
30
+ --c-info-subtle: rgba(59, 130, 246, 0.10);
31
+ /* --c-error-subtle = --c-brand-subtle */
32
+
33
+ /* ── COLORS: Status borders ─────────────────────────────────── */
34
+ --c-success-border: rgba(74, 222, 128, 0.35);
35
+ --c-warning-border: rgba(245, 158, 11, 0.35);
36
+ --c-info-border: rgba(59, 130, 246, 0.35);
37
+ /* --c-error-border = --c-brand-border */
38
+
39
+ /* ── SPACING ──────────────────────────────────────────────── */
40
+ /* Already defined in contract, reinforcing here for clarity */
41
+ --space-1: 2px; --space-1-5: 4px; --space-2: 8px;
42
+ --space-3: 12px; --space-4: 16px;
43
+ --space-5: 20px; --space-6: 24px; --space-7: 28px;
44
+ --space-8: 32px; --space-10: 40px; --space-12: 48px;
45
+ --space-15: 60px; --space-20: 80px;
46
+
47
+ /* ── TYPOGRAPHY ───────────────────────────────────────────── */
48
+ /* Font sizes (from contract) */
49
+ --fontsize-2xs: 10px;
50
+ --fontsize-xs: 12px;
51
+ --fontsize-sm: 14px;
52
+ --fontsize-medium: 16px;
53
+ --fontsize-lg: clamp(18px, 5vw, 48px);
54
+ --fontsize-xl: clamp(20px, 5vw, 48px);
55
+ --fontsize-2xl: clamp(24px, 5vw, 48px);
56
+ --fontsize-3xl: clamp(30px, 5vw, 48px);
57
+ --fontsize-4xl: clamp(36px, 5vw, 48px);
58
+ --fontsize-5xl: clamp(32px, 5vw, 48px);
59
+
60
+ /* Font weights (from contract) */
61
+ --fontweight-normal: 400;
62
+ --fontweight-light: 300;
63
+ --fontweight-medium: 500;
64
+ --fontweight-semibold: 600;
65
+ --fontweight-bold: 700;
66
+ --fontweight-extrabold: 800;
67
+ --fontweight-black: 900;
68
+
69
+ /* ── RADIUS ───────────────────────────────────────────────– */
70
+ --radius-sm: 6px;
71
+ --radius-md: 12px;
72
+ --radius-lg: 16px;
73
+ --radius-full: 999px;
74
+
75
+ /* ── SHADOWS ──────────────────────────────────────────────– */
76
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
77
+ --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.10);
78
+
79
+ /* ── GRADIENTS ────────────────────────────────────────────– */
80
+ --gradient-brand: linear-gradient(135deg, var(--color-brand) 0%, rgba(204, 74, 72, 0.8) 100%);
81
+
82
+ /* ── Z-INDEX ──────────────────────────────────────────────– */
83
+ --z-base: 0;
84
+ --z-dropdown: 100;
85
+ --z-drawer: 50;
86
+ --z-modal: 1000;
87
+ /* ── LAYOUT ───────────────────────────────────────────────– */
88
+ --height-topbar: 60px;
89
+ --height-input: 38px;
90
+
91
+ /* ── TRANSITIONS ──────────────────────────────────────────– */
92
+ --transition-bg: background 0.2s ease;
93
+ --transition-all: all 0.2s ease;
94
+
95
+ /* ── FOCUS RING — accessibilité ────────────────────────────– */
96
+ --focus-ring: 0 0 0 3px rgba(204, 74, 72, 0.25);
97
+
98
+ /* ── MISC (From contract) ───────────────────────────────── */
99
+ --border-solid: solid;
100
+ --display-flex: flex;
101
+ }
102
+
103
+ /* ──────────────────────────────────────────────────────────────
104
+ DARK MODE - System preference override
105
+ ────────────────────────────────────────────────────────────── */
106
+ @media (prefers-color-scheme: dark) {
107
+ :root {
108
+ /* ── COLORS: Semantic ──────────────────────────────────── */
109
+ --color-bg: #0F1116;
110
+ --color-fg: #FBFBFB;
111
+ --color-muted: #B7BCC6;
112
+ --color-brand: #CC4A48;
113
+ --color-brand-dark: #8F2834; --color-excellent: #10B981; --color-success: #34D399;
114
+ --color-warning: #F59E0B;
115
+ --color-error: #F87171;
116
+ --color-info: #60A5FA;
117
+
118
+ /* ── COLORS: Surfaces ──────────────────────────────────– */
119
+ --c-surface: #161A22;
120
+ --c-surface-elevated: #1D2330;
121
+ --c-surface-secondary: #212936;
122
+ --c-table-row-alt: rgba(255, 255, 255, 0.04);
123
+ --c-border: #2A3140;
124
+ --c-brand-subtle: rgba(204, 74, 72, 0.08);
125
+ --c-brand-border: rgba(204, 74, 72, 0.3);
126
+
127
+ /* ── COLORS: Status subtle ─────────────────────────────– */
128
+ --c-success-subtle: rgba(52, 211, 153, 0.12);
129
+ --c-warning-subtle: rgba(245, 158, 11, 0.12);
130
+ --c-info-subtle: rgba(96, 165, 250, 0.12);
131
+
132
+ /* ── COLORS: Status borders ────────────────────────────– */
133
+ --c-success-border: rgba(52, 211, 153, 0.35);
134
+ --c-warning-border: rgba(245, 158, 11, 0.35);
135
+ --c-info-border: rgba(96, 165, 250, 0.35);
136
+
137
+ /* ── SHADOWS (Darker for dark mode) ───────────────────– */
138
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.16);
139
+ --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.24);
140
+ }
141
+ }
142
+
143
+ /* ──────────────────────────────────────────────────────────────
144
+ LIGHT MODE - CSS Class override (for manual theme toggle)
145
+ ────────────────────────────────────────────────────────────── */
146
+ :root.light {
147
+ /* ── COLORS: Semantic ──────────────────────────────────── */
148
+ --color-bg: #ffffff;
149
+ --color-fg: #0b1220;
150
+ --color-muted: #52607a;
151
+ --color-brand: #CC4A48;
152
+ --color-brand-dark: #8F2834;
153
+ --color-excellent: #22C55E;
154
+ --color-success: #4ADE80;
155
+ --color-warning: #F59E0B;
156
+ --color-error: #CC4A48;
157
+ --color-info: #3B82F6;
158
+
159
+ /* ── COLORS: Surfaces ──────────────────────────────────– */
160
+ --c-surface: #ffffff;
161
+ --c-surface-elevated: #f7f7f7;
162
+ --c-surface-secondary: #f5f5f5;
163
+ --c-table-row-alt: rgba(0, 0, 0, 0.02);
164
+ --c-border: #e0e0e0;
165
+ --c-brand-subtle: rgba(204, 74, 72, 0.08);
166
+ --c-brand-border: rgba(204, 74, 72, 0.3);
167
+
168
+ /* ── COLORS: Status subtle ─────────────────────────────– */
169
+ --c-success-subtle: rgba(74, 222, 128, 0.10);
170
+ --c-warning-subtle: rgba(245, 158, 11, 0.10);
171
+ --c-info-subtle: rgba(59, 130, 246, 0.10);
172
+
173
+ /* ── COLORS: Status borders ────────────────────────────– */
174
+ --c-success-border: rgba(74, 222, 128, 0.35);
175
+ --c-warning-border: rgba(245, 158, 11, 0.35);
176
+ --c-info-border: rgba(59, 130, 246, 0.35);
177
+
178
+ /* ── SHADOWS ──────────────────────────────────────────– */
179
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
180
+ --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.10);
181
+ }
182
+
183
+ /* ──────────────────────────────────────────────────────────────
184
+ DARK MODE - CSS Class override (for manual theme toggle)
185
+ ────────────────────────────────────────────────────────────── */
186
+ :root.dark {
187
+ /* ── COLORS: Semantic ──────────────────────────────────── */
188
+ --color-bg: #0F1116;
189
+ --color-fg: #FBFBFB;
190
+ --color-muted: #B7BCC6;
191
+ --color-brand: #CC4A48;
192
+ --color-brand-dark: #8F2834;
193
+ --color-excellent: #10B981;
194
+ --color-success: #34D399;
195
+ --color-warning: #F59E0B;
196
+ --color-error: #F87171;
197
+ --color-info: #60A5FA;
198
+
199
+ /* ── COLORS: Surfaces ──────────────────────────────────– */
200
+ --c-surface: #161A22;
201
+ --c-surface-elevated: #1D2330;
202
+ --c-surface-secondary: #212936;
203
+ --c-table-row-alt: rgba(255, 255, 255, 0.04);
204
+ --c-border: #2A3140;
205
+ --c-brand-subtle: rgba(204, 74, 72, 0.08);
206
+ --c-brand-border: rgba(204, 74, 72, 0.3);
207
+
208
+ /* ── COLORS: Status subtle ─────────────────────────────– */
209
+ --c-success-subtle: rgba(52, 211, 153, 0.12);
210
+ --c-warning-subtle: rgba(245, 158, 11, 0.12);
211
+ --c-info-subtle: rgba(96, 165, 250, 0.12);
212
+
213
+ /* ── COLORS: Status borders ────────────────────────────– */
214
+ --c-success-border: rgba(52, 211, 153, 0.35);
215
+ --c-warning-border: rgba(245, 158, 11, 0.35);
216
+ --c-info-border: rgba(96, 165, 250, 0.35);
217
+
218
+ /* ── SHADOWS ──────────────────────────────────────────– */
219
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.16);
220
+ --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.24);
221
+ }
222
+
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "@brickslab./theme-default",
3
+ "version": "2.0.0",
4
+ "private": false,
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "https://github.com/brickslab/brickslab-v1.git"
12
+ },
13
+ "publishConfig": {
14
+ "registry": "https://registry.npmjs.org/",
15
+ "access": "public"
16
+ },
17
+ "dependencies": {
18
+ "@brickslab./token-contract": "^2.0.0"
19
+ },
20
+ "scripts": {
21
+ "build": "node -e \"const fs=require('fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/tokens.css','dist/tokens.css')\"",
22
+ "clean": "node -e \"const fs=require('fs');fs.rmSync('dist',{recursive:true,force:true})\"",
23
+ "lint": "echo \"skip\"",
24
+ "typecheck": "echo \"skip\""
25
+ }
26
+ }