@mohasinac/appkit 4.55.0-next.0 → 4.55.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 (47) hide show
  1. package/dist/.build-stamp.json +5 -5
  2. package/dist/_internal/server/features/checkout/actions.js +61 -2
  3. package/dist/_internal/shared/features/checkout/config.d.ts +1 -1
  4. package/dist/_internal/shared/features/checkout/config.js +1 -1
  5. package/dist/_internal/shared/features/site-settings/fees.d.ts +1 -1
  6. package/dist/_internal/shared/features/site-settings/fees.js +1 -1
  7. package/dist/_internal/shared/fees/calculator.d.ts +35 -3
  8. package/dist/_internal/shared/fees/calculator.js +34 -4
  9. package/dist/errors/error-codes.d.ts +15 -0
  10. package/dist/errors/error-codes.js +15 -0
  11. package/dist/errors/index.d.ts +1 -1
  12. package/dist/errors/index.js +1 -1
  13. package/dist/features/account/components/UserBidsView.js +4 -2
  14. package/dist/features/admin/components/AdminSiteSettingsView.js +18 -2
  15. package/dist/features/admin/schemas/firestore.d.ts +37 -2
  16. package/dist/features/admin/schemas/firestore.js +12 -1
  17. package/dist/features/cart/components/CartPriceBreakdown.js +1 -1
  18. package/dist/features/checkout/schemas/firestore.d.ts +12 -1
  19. package/dist/features/layout/NavbarLayout.js +139 -32
  20. package/dist/features/media/messages/en.json +67 -67
  21. package/dist/features/orders/schemas/firestore.d.ts +1 -1
  22. package/dist/features/products/components/ProductDetailPageView.js +2 -25
  23. package/dist/features/products/components/ProductOwnerQuickActions.d.ts +11 -0
  24. package/dist/features/products/components/ProductOwnerQuickActions.js +120 -0
  25. package/dist/features/products/components/ProductsIndexListing.js +35 -5
  26. package/dist/features/products/components/ProductsIndexPageView.js +40 -7
  27. package/dist/providers/shipping-shiprocket/index.d.ts +13 -4
  28. package/dist/providers/shipping-shiprocket/index.js +34 -10
  29. package/dist/security/csp.d.ts +1 -16
  30. package/dist/security/csp.js +3 -5
  31. package/dist/seed/faq-seed-data.js +1 -1
  32. package/dist/seed/site-settings-seed-data.js +1 -1
  33. package/dist/seo/json-ld.d.ts +8 -1
  34. package/dist/seo/json-ld.js +39 -2
  35. package/dist/styles.css +382 -537
  36. package/dist/tailwind-utilities.css +1 -1
  37. package/dist/tokens/themes/index.d.ts +1 -3
  38. package/dist/tokens/themes/index.js +1 -11
  39. package/dist/tokens/tokens.css +0 -155
  40. package/dist/ui/components/GatedPrice.style.css +43 -43
  41. package/dist/ui/components/QuickCreateModal.style.css +78 -78
  42. package/dist/ui/forms/FormShell.style.css +260 -260
  43. package/package.json +1 -1
  44. package/dist/tokens/themes/technical-dark.d.ts +0 -30
  45. package/dist/tokens/themes/technical-dark.js +0 -103
  46. package/dist/tokens/themes/technical-light.d.ts +0 -22
  47. package/dist/tokens/themes/technical-light.js +0 -89
@@ -1,260 +1,260 @@
1
- /* ─── FormShell ─────────────────────────────────────────────────────────────── */
2
-
3
- .appkit-formshell {
4
- display: flex;
5
- flex-direction: column;
6
- gap: var(--appkit-spacing-6, 1.5rem);
7
- }
8
-
9
- /* Header */
10
- .appkit-formshell__header {
11
- display: flex;
12
- flex-direction: column;
13
- gap: var(--appkit-spacing-4, 1rem);
14
- }
15
-
16
- .appkit-formshell__title {
17
- font-size: var(--appkit-font-size-lg, 1.125rem);
18
- font-weight: 600;
19
- color: var(--appkit-color-text-primary);
20
- }
21
-
22
- /* ─── Step Indicator ──────────────────────────────────────────────────────── */
23
-
24
- .appkit-formshell__step-indicator {
25
- display: flex;
26
- flex-wrap: wrap;
27
- gap: var(--appkit-spacing-1, 0.25rem);
28
- border-bottom: 1px solid var(--appkit-color-border);
29
- padding-bottom: var(--appkit-spacing-3, 0.75rem);
30
- }
31
-
32
- .appkit-formshell__step-btn {
33
- display: flex;
34
- align-items: center;
35
- gap: var(--appkit-spacing-2, 0.5rem);
36
- padding: var(--appkit-spacing-1-5, 0.375rem) var(--appkit-spacing-3, 0.75rem);
37
- border-radius: var(--appkit-radius-md, 0.375rem);
38
- background: transparent;
39
- border: 1px solid transparent;
40
- color: var(--appkit-color-text-secondary);
41
- cursor: pointer;
42
- font-size: var(--appkit-font-size-sm, 0.875rem);
43
- transition: background 0.15s, border-color 0.15s, color 0.15s;
44
- }
45
-
46
- .appkit-formshell__step-btn:hover {
47
- background: var(--appkit-color-surface-hover);
48
- border-color: var(--appkit-color-border);
49
- }
50
-
51
- .appkit-formshell__step-btn--active {
52
- background: var(--appkit-color-primary-subtle, rgb(from var(--appkit-color-primary) r g b / 0.1));
53
- border-color: var(--appkit-color-primary);
54
- color: var(--appkit-color-primary);
55
- font-weight: 500;
56
- }
57
-
58
- .appkit-formshell__step-btn--error {
59
- color: var(--appkit-color-error, #dc2626);
60
- border-color: var(--appkit-color-error, #dc2626);
61
- }
62
-
63
- .appkit-formshell__step-dot {
64
- position: relative;
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- width: 1.5rem;
69
- height: 1.5rem;
70
- border-radius: 9999px;
71
- background: var(--appkit-color-surface-secondary);
72
- font-size: var(--appkit-font-size-xs, 0.75rem);
73
- font-weight: 600;
74
- flex-shrink: 0;
75
- }
76
-
77
- .appkit-formshell__step-btn--active .appkit-formshell__step-dot {
78
- background: var(--appkit-color-primary);
79
- color: #fff;
80
- }
81
-
82
- .appkit-formshell__step-btn--error .appkit-formshell__step-dot {
83
- background: var(--appkit-color-error, #dc2626);
84
- color: #fff;
85
- }
86
-
87
- /* Red dot badge on step dot */
88
- .appkit-formshell__step-error-badge {
89
- position: absolute;
90
- top: -3px;
91
- right: -3px;
92
- width: 8px;
93
- height: 8px;
94
- border-radius: 9999px;
95
- background: var(--appkit-color-error, #dc2626);
96
- border: 2px solid var(--appkit-color-surface);
97
- }
98
-
99
- /* Inline error count badge (accordion header) */
100
- .appkit-formshell__step-error-badge--inline {
101
- position: static;
102
- width: auto;
103
- height: auto;
104
- border-radius: var(--appkit-radius-full, 9999px);
105
- padding: 0 0.375rem;
106
- font-size: var(--appkit-font-size-xs, 0.75rem);
107
- font-weight: 600;
108
- color: #fff;
109
- line-height: 1.4;
110
- border: none;
111
- }
112
-
113
- .appkit-formshell__step-label {
114
- display: none;
115
- }
116
-
117
- @media (min-width: 640px) {
118
- .appkit-formshell__step-label {
119
- display: inline;
120
- }
121
- }
122
-
123
- /* ─── Error Summary ───────────────────────────────────────────────────────── */
124
-
125
- .appkit-formshell__error-summary {
126
- border: 1px solid var(--appkit-color-error, #dc2626);
127
- border-radius: var(--appkit-radius-md, 0.375rem);
128
- padding: var(--appkit-spacing-3, 0.75rem);
129
- background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.05);
130
- }
131
-
132
- .appkit-formshell__error-summary__title {
133
- font-weight: 600;
134
- margin-bottom: var(--appkit-spacing-2, 0.5rem);
135
- }
136
-
137
- .appkit-formshell__error-summary__list {
138
- list-style: disc;
139
- padding-left: 1.25rem;
140
- display: flex;
141
- flex-direction: column;
142
- gap: var(--appkit-spacing-1, 0.25rem);
143
- }
144
-
145
- .appkit-formshell__error-summary__step-link {
146
- background: none;
147
- border: none;
148
- padding: 0;
149
- margin: 0;
150
- font: inherit;
151
- color: inherit;
152
- text-align: left;
153
- cursor: pointer;
154
- text-decoration: underline;
155
- text-underline-offset: 2px;
156
- }
157
-
158
- .appkit-formshell__error-summary__step-link:hover {
159
- color: var(--appkit-color-error, #dc2626);
160
- }
161
-
162
- /* ─── Body + Steps ───────────────────────────────────────────────────────── */
163
-
164
- .appkit-formshell__body {
165
- flex: 1;
166
- /* Ensure body content is not hidden under the sticky footer. The footer is
167
- ~56px tall; add generous padding so the last field is always reachable. */
168
- padding-bottom: 5rem;
169
- }
170
-
171
- .appkit-formshell__steps {
172
- display: flex;
173
- flex-direction: column;
174
- gap: var(--appkit-spacing-1, 0.25rem);
175
- }
176
-
177
- .appkit-formshell__step {
178
- border: 1px solid var(--appkit-color-border);
179
- border-radius: var(--appkit-radius-md, 0.375rem);
180
- overflow: hidden;
181
- }
182
-
183
- .appkit-formshell__step--active {
184
- border-color: var(--appkit-color-primary);
185
- }
186
-
187
- .appkit-formshell__step--error {
188
- border-color: var(--appkit-color-error, #dc2626);
189
- }
190
-
191
- /* Mobile accordion button — hidden on lg+ (step indicator handles navigation) */
192
- .appkit-formshell__step-accordion-btn {
193
- display: flex;
194
- align-items: center;
195
- justify-content: space-between;
196
- width: 100%;
197
- padding: var(--appkit-spacing-3, 0.75rem) var(--appkit-spacing-4, 1rem);
198
- background: var(--appkit-color-surface-secondary);
199
- border: none;
200
- cursor: pointer;
201
- font-size: var(--appkit-font-size-sm, 0.875rem);
202
- font-weight: 500;
203
- color: var(--appkit-color-text-primary);
204
- text-align: left;
205
- }
206
-
207
- .appkit-formshell__step-accordion-label {
208
- flex: 1;
209
- }
210
-
211
- /* On lg+ the accordion controls are purely decorative; the step indicator drives navigation */
212
- @media (min-width: 1024px) {
213
- .appkit-formshell--accordion-mobile .appkit-formshell__step-accordion-btn {
214
- display: none;
215
- }
216
-
217
- .appkit-formshell--accordion-mobile .appkit-formshell__step [hidden] {
218
- display: block !important;
219
- }
220
-
221
- .appkit-formshell--accordion-mobile .appkit-formshell__step-content {
222
- display: block !important;
223
- }
224
- }
225
-
226
- .appkit-formshell__step-content {
227
- padding: 0.75rem 1.25rem;
228
- }
229
-
230
- @media (max-width: 639px) {
231
- .appkit-formshell__step-content {
232
- padding: 0.5rem 0.875rem;
233
- }
234
- }
235
- /* --- Footer --------------------------------------------------------------- */
236
-
237
- /*
238
- * `.appkit-formshell__footer`, `__step-nav` and `__actions` were deleted here:
239
- * `ui/forms/FormShell.tsx` is context/state only and renders no footer JSX, so
240
- * nothing had referenced them for a long time. The real form footer lives in
241
- * `features/shell/FormShell.tsx` and is an ActionRow now.
242
- *
243
- * Worth recording: this dead block held the ONLY `flex-wrap: wrap` on any
244
- * action row in the codebase. Every live footer had lost it.
245
- */
246
-
247
- /* ─── Dark mode ──────────────────────────────────────────────────────────── */
248
-
249
- .dark .appkit-formshell__title {
250
- color: var(--appkit-color-text-primary-dark, inherit);
251
- }
252
-
253
- .dark .appkit-formshell__step-accordion-btn {
254
- background: var(--appkit-color-surface-secondary-dark, var(--appkit-color-surface-secondary));
255
- color: var(--appkit-color-text-primary-dark, inherit);
256
- }
257
-
258
- .dark .appkit-formshell__error-summary {
259
- background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.1);
260
- }
1
+ /* ─── FormShell ─────────────────────────────────────────────────────────────── */
2
+
3
+ .appkit-formshell {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--appkit-spacing-6, 1.5rem);
7
+ }
8
+
9
+ /* Header */
10
+ .appkit-formshell__header {
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: var(--appkit-spacing-4, 1rem);
14
+ }
15
+
16
+ .appkit-formshell__title {
17
+ font-size: var(--appkit-font-size-lg, 1.125rem);
18
+ font-weight: 600;
19
+ color: var(--appkit-color-text-primary);
20
+ }
21
+
22
+ /* ─── Step Indicator ──────────────────────────────────────────────────────── */
23
+
24
+ .appkit-formshell__step-indicator {
25
+ display: flex;
26
+ flex-wrap: wrap;
27
+ gap: var(--appkit-spacing-1, 0.25rem);
28
+ border-bottom: 1px solid var(--appkit-color-border);
29
+ padding-bottom: var(--appkit-spacing-3, 0.75rem);
30
+ }
31
+
32
+ .appkit-formshell__step-btn {
33
+ display: flex;
34
+ align-items: center;
35
+ gap: var(--appkit-spacing-2, 0.5rem);
36
+ padding: var(--appkit-spacing-1-5, 0.375rem) var(--appkit-spacing-3, 0.75rem);
37
+ border-radius: var(--appkit-radius-md, 0.375rem);
38
+ background: transparent;
39
+ border: 1px solid transparent;
40
+ color: var(--appkit-color-text-secondary);
41
+ cursor: pointer;
42
+ font-size: var(--appkit-font-size-sm, 0.875rem);
43
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
44
+ }
45
+
46
+ .appkit-formshell__step-btn:hover {
47
+ background: var(--appkit-color-surface-hover);
48
+ border-color: var(--appkit-color-border);
49
+ }
50
+
51
+ .appkit-formshell__step-btn--active {
52
+ background: var(--appkit-color-primary-subtle, rgb(from var(--appkit-color-primary) r g b / 0.1));
53
+ border-color: var(--appkit-color-primary);
54
+ color: var(--appkit-color-primary);
55
+ font-weight: 500;
56
+ }
57
+
58
+ .appkit-formshell__step-btn--error {
59
+ color: var(--appkit-color-error, #dc2626);
60
+ border-color: var(--appkit-color-error, #dc2626);
61
+ }
62
+
63
+ .appkit-formshell__step-dot {
64
+ position: relative;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ width: 1.5rem;
69
+ height: 1.5rem;
70
+ border-radius: 9999px;
71
+ background: var(--appkit-color-surface-secondary);
72
+ font-size: var(--appkit-font-size-xs, 0.75rem);
73
+ font-weight: 600;
74
+ flex-shrink: 0;
75
+ }
76
+
77
+ .appkit-formshell__step-btn--active .appkit-formshell__step-dot {
78
+ background: var(--appkit-color-primary);
79
+ color: #fff;
80
+ }
81
+
82
+ .appkit-formshell__step-btn--error .appkit-formshell__step-dot {
83
+ background: var(--appkit-color-error, #dc2626);
84
+ color: #fff;
85
+ }
86
+
87
+ /* Red dot badge on step dot */
88
+ .appkit-formshell__step-error-badge {
89
+ position: absolute;
90
+ top: -3px;
91
+ right: -3px;
92
+ width: 8px;
93
+ height: 8px;
94
+ border-radius: 9999px;
95
+ background: var(--appkit-color-error, #dc2626);
96
+ border: 2px solid var(--appkit-color-surface);
97
+ }
98
+
99
+ /* Inline error count badge (accordion header) */
100
+ .appkit-formshell__step-error-badge--inline {
101
+ position: static;
102
+ width: auto;
103
+ height: auto;
104
+ border-radius: var(--appkit-radius-full, 9999px);
105
+ padding: 0 0.375rem;
106
+ font-size: var(--appkit-font-size-xs, 0.75rem);
107
+ font-weight: 600;
108
+ color: #fff;
109
+ line-height: 1.4;
110
+ border: none;
111
+ }
112
+
113
+ .appkit-formshell__step-label {
114
+ display: none;
115
+ }
116
+
117
+ @media (min-width: 640px) {
118
+ .appkit-formshell__step-label {
119
+ display: inline;
120
+ }
121
+ }
122
+
123
+ /* ─── Error Summary ───────────────────────────────────────────────────────── */
124
+
125
+ .appkit-formshell__error-summary {
126
+ border: 1px solid var(--appkit-color-error, #dc2626);
127
+ border-radius: var(--appkit-radius-md, 0.375rem);
128
+ padding: var(--appkit-spacing-3, 0.75rem);
129
+ background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.05);
130
+ }
131
+
132
+ .appkit-formshell__error-summary__title {
133
+ font-weight: 600;
134
+ margin-bottom: var(--appkit-spacing-2, 0.5rem);
135
+ }
136
+
137
+ .appkit-formshell__error-summary__list {
138
+ list-style: disc;
139
+ padding-left: 1.25rem;
140
+ display: flex;
141
+ flex-direction: column;
142
+ gap: var(--appkit-spacing-1, 0.25rem);
143
+ }
144
+
145
+ .appkit-formshell__error-summary__step-link {
146
+ background: none;
147
+ border: none;
148
+ padding: 0;
149
+ margin: 0;
150
+ font: inherit;
151
+ color: inherit;
152
+ text-align: left;
153
+ cursor: pointer;
154
+ text-decoration: underline;
155
+ text-underline-offset: 2px;
156
+ }
157
+
158
+ .appkit-formshell__error-summary__step-link:hover {
159
+ color: var(--appkit-color-error, #dc2626);
160
+ }
161
+
162
+ /* ─── Body + Steps ───────────────────────────────────────────────────────── */
163
+
164
+ .appkit-formshell__body {
165
+ flex: 1;
166
+ /* Ensure body content is not hidden under the sticky footer. The footer is
167
+ ~56px tall; add generous padding so the last field is always reachable. */
168
+ padding-bottom: 5rem;
169
+ }
170
+
171
+ .appkit-formshell__steps {
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: var(--appkit-spacing-1, 0.25rem);
175
+ }
176
+
177
+ .appkit-formshell__step {
178
+ border: 1px solid var(--appkit-color-border);
179
+ border-radius: var(--appkit-radius-md, 0.375rem);
180
+ overflow: hidden;
181
+ }
182
+
183
+ .appkit-formshell__step--active {
184
+ border-color: var(--appkit-color-primary);
185
+ }
186
+
187
+ .appkit-formshell__step--error {
188
+ border-color: var(--appkit-color-error, #dc2626);
189
+ }
190
+
191
+ /* Mobile accordion button — hidden on lg+ (step indicator handles navigation) */
192
+ .appkit-formshell__step-accordion-btn {
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: space-between;
196
+ width: 100%;
197
+ padding: var(--appkit-spacing-3, 0.75rem) var(--appkit-spacing-4, 1rem);
198
+ background: var(--appkit-color-surface-secondary);
199
+ border: none;
200
+ cursor: pointer;
201
+ font-size: var(--appkit-font-size-sm, 0.875rem);
202
+ font-weight: 500;
203
+ color: var(--appkit-color-text-primary);
204
+ text-align: left;
205
+ }
206
+
207
+ .appkit-formshell__step-accordion-label {
208
+ flex: 1;
209
+ }
210
+
211
+ /* On lg+ the accordion controls are purely decorative; the step indicator drives navigation */
212
+ @media (min-width: 1024px) {
213
+ .appkit-formshell--accordion-mobile .appkit-formshell__step-accordion-btn {
214
+ display: none;
215
+ }
216
+
217
+ .appkit-formshell--accordion-mobile .appkit-formshell__step [hidden] {
218
+ display: block !important;
219
+ }
220
+
221
+ .appkit-formshell--accordion-mobile .appkit-formshell__step-content {
222
+ display: block !important;
223
+ }
224
+ }
225
+
226
+ .appkit-formshell__step-content {
227
+ padding: 0.75rem 1.25rem;
228
+ }
229
+
230
+ @media (max-width: 639px) {
231
+ .appkit-formshell__step-content {
232
+ padding: 0.5rem 0.875rem;
233
+ }
234
+ }
235
+ /* --- Footer --------------------------------------------------------------- */
236
+
237
+ /*
238
+ * `.appkit-formshell__footer`, `__step-nav` and `__actions` were deleted here:
239
+ * `ui/forms/FormShell.tsx` is context/state only and renders no footer JSX, so
240
+ * nothing had referenced them for a long time. The real form footer lives in
241
+ * `features/shell/FormShell.tsx` and is an ActionRow now.
242
+ *
243
+ * Worth recording: this dead block held the ONLY `flex-wrap: wrap` on any
244
+ * action row in the codebase. Every live footer had lost it.
245
+ */
246
+
247
+ /* ─── Dark mode ──────────────────────────────────────────────────────────── */
248
+
249
+ .dark .appkit-formshell__title {
250
+ color: var(--appkit-color-text-primary-dark, inherit);
251
+ }
252
+
253
+ .dark .appkit-formshell__step-accordion-btn {
254
+ background: var(--appkit-color-surface-secondary-dark, var(--appkit-color-surface-secondary));
255
+ color: var(--appkit-color-text-primary-dark, inherit);
256
+ }
257
+
258
+ .dark .appkit-formshell__error-summary {
259
+ background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.1);
260
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mohasinac/appkit",
3
- "version": "4.55.0-next.0",
3
+ "version": "4.55.0",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -1,30 +0,0 @@
1
- import type { ThemeRecord } from "./types";
2
- /**
3
- * Theme template — Technical Dark.
4
- *
5
- * A developer-tool identity rather than a marketing one: a near-black graphite
6
- * base, ONE elevation step, hairline borders, and accents drawn from a syntax
7
- * palette (keyword violet, string green, number amber, error red) reused
8
- * semantically for difficulty badges, submission verdicts and status chips.
9
- *
10
- * Deliberately different from `default-dark` (crimson + cyan on navy): there is
11
- * no brand gradient wash, surfaces sit close together in luminance, and the
12
- * type stack is mono-forward — `display`/`sans` are monospace for headings,
13
- * labels, IDs and tables, while `editorial` carries a real reading face so
14
- * 2,000-word lessons stay comfortable. That three-slot split is why no separate
15
- * "prose font" token was needed.
16
- *
17
- * Not a built-in (`builtIn: false`) — seeded as a selectable template that an
18
- * admin can assign as the default dark theme or clone from `ThemeManagerView`.
19
- * Only overrides the tokens the matching CSS block overrides; everything else
20
- * (spacing, font sizes, unredefined gradients) falls back to
21
- * `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
22
- *
23
- * Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
24
- * text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
25
- * colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
26
- *
27
- * Mirrors the `[data-theme="technical-dark"]` block in
28
- * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
29
- */
30
- export declare const TECHNICAL_DARK_THEME: ThemeRecord;
@@ -1,103 +0,0 @@
1
- import { DEFAULT_DARK_THEME } from "./default-dark.js";
2
- /**
3
- * Theme template — Technical Dark.
4
- *
5
- * A developer-tool identity rather than a marketing one: a near-black graphite
6
- * base, ONE elevation step, hairline borders, and accents drawn from a syntax
7
- * palette (keyword violet, string green, number amber, error red) reused
8
- * semantically for difficulty badges, submission verdicts and status chips.
9
- *
10
- * Deliberately different from `default-dark` (crimson + cyan on navy): there is
11
- * no brand gradient wash, surfaces sit close together in luminance, and the
12
- * type stack is mono-forward — `display`/`sans` are monospace for headings,
13
- * labels, IDs and tables, while `editorial` carries a real reading face so
14
- * 2,000-word lessons stay comfortable. That three-slot split is why no separate
15
- * "prose font" token was needed.
16
- *
17
- * Not a built-in (`builtIn: false`) — seeded as a selectable template that an
18
- * admin can assign as the default dark theme or clone from `ThemeManagerView`.
19
- * Only overrides the tokens the matching CSS block overrides; everything else
20
- * (spacing, font sizes, unredefined gradients) falls back to
21
- * `DEFAULT_DARK_THEME`, the same way the CSS block cascades from `:root`.
22
- *
23
- * Contrast against `appkit-color-bg` (#0b0d10), measured not estimated:
24
- * text 15.82:1, muted 7.72:1, faint 4.68:1, primary 6.53:1, and every status
25
- * colour ≥ 4.5:1 (lowest: error 7.01:1). Nothing here is AA-large-only.
26
- *
27
- * Mirrors the `[data-theme="technical-dark"]` block in
28
- * `appkit/src/tokens/tokens.css`; the two must stay byte-identical.
29
- */
30
- export const TECHNICAL_DARK_THEME = {
31
- id: "technical-dark",
32
- name: "Technical Dark",
33
- mode: "dark",
34
- builtIn: false,
35
- tokens: {
36
- // Brand — keyword violet. Chosen because it reads as "syntax", not
37
- // "product", and sits far from every status hue below.
38
- "appkit-color-primary": "#7c8cff",
39
- "appkit-color-primary-50": "#eef0ff",
40
- "appkit-color-primary-100": "#e0e4ff",
41
- "appkit-color-primary-200": "#c7cdff",
42
- "appkit-color-primary-300": "#a5aeff",
43
- "appkit-color-primary-400": "#8e99ff",
44
- "appkit-color-primary-500": "#7c8cff",
45
- "appkit-color-primary-600": "#5a68e8",
46
- "appkit-color-primary-700": "#4650c4",
47
- "appkit-color-primary-800": "#373f9c",
48
- "appkit-color-primary-900": "#2b317a",
49
- "appkit-color-primary-950": "#171a45",
50
- // Secondary — string green.
51
- "appkit-color-secondary": "#56d39a",
52
- "appkit-color-secondary-50": "#ecfdf5",
53
- "appkit-color-secondary-100": "#d1fae5",
54
- "appkit-color-secondary-200": "#a7f3d0",
55
- "appkit-color-secondary-300": "#7ee7b8",
56
- "appkit-color-secondary-400": "#56d39a",
57
- "appkit-color-secondary-500": "#34b87d",
58
- "appkit-color-secondary-600": "#1f9664",
59
- "appkit-color-secondary-700": "#187752",
60
- "appkit-color-secondary-800": "#155e42",
61
- "appkit-color-secondary-900": "#124b36",
62
- "appkit-color-secondary-950": "#062a1d",
63
- // Surfaces — one elevation step, hairline borders. Editor chrome.
64
- "appkit-color-bg": "#0b0d10",
65
- "appkit-color-surface": "#13161b",
66
- "appkit-color-surface-elevated": "rgba(19, 22, 27, 0.92)",
67
- "appkit-color-surface-input": "rgba(27, 31, 38, 0.7)",
68
- "appkit-color-surface-hover": "rgba(148, 163, 184, 0.1)",
69
- "appkit-color-surface-raised": "rgba(27, 31, 38, 0.8)",
70
- "appkit-color-primary-surface": "rgba(124, 140, 255, 0.16)",
71
- "appkit-color-border": "#242a33",
72
- "appkit-color-border-subtle": "rgba(36, 42, 51, 0.6)",
73
- "appkit-color-text": "#e4e8ee",
74
- "appkit-color-text-muted": "#9aa4b2",
75
- // 4.68:1 — clears AA at body size, so faint metadata is still readable
76
- // rather than merely decorative.
77
- "appkit-color-text-faint": "#747d8c",
78
- // Dark ink on the violet fill: 6.53:1, where white measures only 2.98:1
79
- // and would fail. This is why primary is not simply paired with white.
80
- "appkit-color-text-on-primary": "#0b0d10",
81
- "appkit-color-success": "#4ade80",
82
- "appkit-color-success-surface": "rgba(22, 101, 68, 0.22)",
83
- "appkit-color-warning": "#f2b544",
84
- "appkit-color-warning-surface": "rgba(120, 78, 10, 0.22)",
85
- "appkit-color-error": "#ff6b6b",
86
- "appkit-color-error-surface": "rgba(140, 30, 30, 0.22)",
87
- "appkit-color-info": "#58b4ff",
88
- "appkit-color-info-surface": "rgba(12, 74, 110, 0.22)",
89
- // Amber, deliberately NOT any status or brand hue: a focus ring that
90
- // doubles as an error colour is unreadable on an invalid field.
91
- "appkit-color-focus-ring": "#ffb86b",
92
- // Flatter than the default theme's glow — editor chrome, not neon.
93
- "appkit-shadow-glow": "0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2)",
94
- "appkit-shadow-glow-pink": "0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22)",
95
- // Mono-forward: headings, labels, IDs, nav and tables are monospace;
96
- // `editorial` is the reading face for lessons and blog prose.
97
- "appkit-font-display": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
98
- "appkit-font-sans": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
99
- "appkit-font-editorial": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
100
- "appkit-font-mono": "var(--font-mono), \"JetBrains Mono\", \"IBM Plex Mono\", ui-monospace, \"SFMono-Regular\", Consolas, monospace",
101
- },
102
- gradients: { ...DEFAULT_DARK_THEME.gradients },
103
- };