@astryxdesign/theme-matcha 0.0.0-bootstrap.0 → 0.0.15

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 (21) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +62 -1
  3. package/dist/chunk-EDWXH23Y.mjs +66 -0
  4. package/dist/icons.d.ts +3 -0
  5. package/dist/icons.d.ts.map +1 -0
  6. package/dist/icons.js +63 -0
  7. package/dist/icons.mjs +6 -0
  8. package/dist/matcha.d.ts +11 -0
  9. package/dist/matcha.js +210 -0
  10. package/dist/matcha.variants.d.ts +20 -0
  11. package/dist/matchaTheme.d.ts +2 -0
  12. package/dist/matchaTheme.d.ts.map +1 -0
  13. package/dist/source.d.ts +3 -0
  14. package/dist/source.d.ts.map +1 -0
  15. package/dist/source.js +275 -0
  16. package/dist/source.mjs +213 -0
  17. package/dist/theme.css +415 -0
  18. package/package.json +55 -5
  19. package/src/icons.tsx +67 -0
  20. package/src/matchaTheme.ts +247 -0
  21. package/src/source.ts +4 -0
package/dist/source.js ADDED
@@ -0,0 +1,275 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/source.ts
21
+ var source_exports = {};
22
+ __export(source_exports, {
23
+ matchaIconRegistry: () => matchaIconRegistry,
24
+ matchaTheme: () => matchaTheme
25
+ });
26
+ module.exports = __toCommonJS(source_exports);
27
+
28
+ // src/matchaTheme.ts
29
+ var import_theme = require("@astryxdesign/core/theme");
30
+
31
+ // src/icons.tsx
32
+ var import_lucide_react = require("lucide-react");
33
+ var import_jsx_runtime = require("react/jsx-runtime");
34
+ var iconProps = {
35
+ size: "1em",
36
+ "aria-hidden": true
37
+ };
38
+ var matchaIconRegistry = {
39
+ close: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { ...iconProps }),
40
+ chevronDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { ...iconProps }),
41
+ chevronLeft: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { ...iconProps }),
42
+ chevronRight: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { ...iconProps }),
43
+ check: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { ...iconProps }),
44
+ success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle, { ...iconProps }),
45
+ error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.XCircle, { ...iconProps }),
46
+ warning: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AlertTriangle, { ...iconProps }),
47
+ info: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { ...iconProps }),
48
+ calendar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Calendar, { ...iconProps }),
49
+ clock: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Clock, { ...iconProps }),
50
+ externalLink: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ExternalLink, { ...iconProps }),
51
+ menu: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Menu, { ...iconProps }),
52
+ moreHorizontal: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MoreHorizontal, { ...iconProps }),
53
+ search: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Search, { ...iconProps }),
54
+ arrowUp: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUp, { ...iconProps }),
55
+ arrowDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowDown, { ...iconProps }),
56
+ arrowsUpDown: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUpDown, { ...iconProps }),
57
+ funnel: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Filter, { ...iconProps }),
58
+ eyeSlash: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.EyeOff, { ...iconProps }),
59
+ viewColumns: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Columns, { ...iconProps }),
60
+ copy: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { ...iconProps }),
61
+ checkDouble: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCheck, { ...iconProps }),
62
+ wrench: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Wrench, { ...iconProps }),
63
+ stop: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Square, { ...iconProps }),
64
+ microphone: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Mic, { ...iconProps })
65
+ };
66
+
67
+ // src/matchaTheme.ts
68
+ var matchaSyntax = (0, import_theme.defineSyntaxTheme)({
69
+ name: "xds-matcha",
70
+ tokens: {
71
+ keyword: ["#5a6b2a", "#a8bf6a"],
72
+ string: ["#2e6b4a", "#7bc49e"],
73
+ comment: ["#707E46", "#707E46"],
74
+ number: ["#8c6b30", "#d4b870"],
75
+ function: ["#3a5e8c", "#7ba8d4"],
76
+ type: ["#6b4a8c", "#b08ed4"],
77
+ variable: ["#3E481D", "#C0CBA9"],
78
+ operator: ["#707E46", "#94a468"],
79
+ constant: ["#8c6b30", "#d4b870"],
80
+ tag: ["#8c3a3a", "#d47a7a"],
81
+ attribute: ["#7c5e3a", "#c4a882"],
82
+ property: ["#3a7c6b", "#70c4b0"],
83
+ punctuation: ["#707E46", "#5a6440"],
84
+ background: ["#F0F0E0", "#1a1c14"]
85
+ }
86
+ });
87
+ var matchaTheme = (0, import_theme.defineTheme)({
88
+ name: "matcha",
89
+ typography: {
90
+ // base 16 / ratio 1.25 — aligned with the other themes' geometric scale.
91
+ scale: { base: 16, ratio: 1.25 },
92
+ body: {
93
+ family: "DM Sans",
94
+ fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
95
+ },
96
+ heading: {
97
+ family: "Playwrite US Trad",
98
+ fallbacks: 'Georgia, "Times New Roman", Times, serif'
99
+ },
100
+ code: {
101
+ family: "JetBrains Mono",
102
+ fallbacks: '"SF Mono", Monaco, Consolas, monospace'
103
+ }
104
+ },
105
+ motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
106
+ syntax: matchaSyntax,
107
+ tokens: {
108
+ // =========================================================================
109
+ // Colors — earthy matcha palette
110
+ // Core: #3E481D, #707E46, #C0CBA9, #F0F0E0, #FFFFFF
111
+ // =========================================================================
112
+ // Core semantic
113
+ "--color-accent": ["#3E481D", "#C0CBA9"],
114
+ "--color-accent-muted": ["#3E481D14", "#C0CBA920"],
115
+ "--color-neutral": ["#3E481D0F", "#C0CBA91A"],
116
+ "--color-background-surface": ["#FFFFFF", "#1a1c14"],
117
+ "--color-background-body": ["#F0F0E0", "#12140e"],
118
+ "--color-overlay": ["#3E481D80", "#3E481DCC"],
119
+ "--color-overlay-hover": ["#3E481D0D", "#C0CBA90D"],
120
+ "--color-overlay-pressed": ["#3E481D1A", "#C0CBA91A"],
121
+ "--color-background-muted": ["#F0F0E0", "#3E481D"],
122
+ // Text
123
+ "--color-text-primary": ["#3E481D", "#C0CBA9"],
124
+ "--color-text-secondary": ["#707E46", "#94a468"],
125
+ "--color-text-disabled": ["#C0CBA9", "#5a6440"],
126
+ "--color-text-accent": ["#3E481D", "#C0CBA9"],
127
+ "--color-on-dark": "#FFFFFF",
128
+ "--color-on-light": "#3E481D",
129
+ "--color-on-accent": ["#FFFFFF", "#3E481D"],
130
+ "--color-on-success": ["#FFFFFF", "#3E481D"],
131
+ "--color-on-error": ["#FFFFFF", "#3E481D"],
132
+ "--color-on-warning": ["#3E481D", "#3E481D"],
133
+ // Icon
134
+ "--color-icon-accent": ["#3E481D", "#C0CBA9"],
135
+ "--color-icon-primary": ["#3E481D", "#C0CBA9"],
136
+ "--color-icon-secondary": ["#707E46", "#94a468"],
137
+ "--color-icon-disabled": ["#C0CBA9", "#5a6440"],
138
+ // Surface variants
139
+ "--color-background-card": ["#FFFFFF", "#1e2016"],
140
+ "--color-background-popover": ["#FFFFFF", "#3E481D"],
141
+ "--color-background-inverted": ["#3E481D", "#C0CBA9"],
142
+ // Status / Sentiment
143
+ "--color-success": ["#4D9900", "#6dbf2a"],
144
+ "--color-success-muted": ["#4D990020", "#6dbf2a20"],
145
+ "--color-error": ["#FD0000", "#ff5c5c"],
146
+ "--color-error-muted": ["#FD000020", "#ff5c5c20"],
147
+ "--color-warning": ["#FFB600", "#ffc940"],
148
+ "--color-warning-muted": ["#FFB60020", "#ffc94020"],
149
+ // Border
150
+ // Softer sage borders (default + emphasized/card) in light mode.
151
+ "--color-border": ["#DCE3CE", "#C0CBA91A"],
152
+ "--color-border-emphasized": ["#B7C29E", "#5a6440"],
153
+ // Effects
154
+ "--color-skeleton": ["#C0CBA9", "#5a6440"],
155
+ "--color-shadow": ["#3E481D1A", "#0000004D"],
156
+ "--color-tint-hover": ["black", "white"],
157
+ // Categorical — Blue
158
+ "--color-background-blue": ["#3a5e8c33", "#3a5e8c33"],
159
+ "--color-border-blue": ["#3a5e8c", "#7ba8d4"],
160
+ "--color-icon-blue": ["#3a5e8c", "#7ba8d4"],
161
+ "--color-text-blue": ["#2e4a6e", "#8dbce0"],
162
+ // Categorical — Cyan
163
+ "--color-background-cyan": ["#3a7c7c33", "#3a7c7c33"],
164
+ "--color-border-cyan": ["#3a7c7c", "#70c4c4"],
165
+ "--color-icon-cyan": ["#3a7c7c", "#70c4c4"],
166
+ "--color-text-cyan": ["#2e6060", "#82d4d4"],
167
+ // Categorical — Gray
168
+ "--color-background-gray": ["#707E4633", "#5a644033"],
169
+ "--color-border-gray": ["#707E46", "#707E46"],
170
+ "--color-icon-gray": ["#707E46", "#94a468"],
171
+ "--color-text-gray": ["#3E481D", "#C0CBA9"],
172
+ // Categorical — Green
173
+ "--color-background-green": ["#4D990033", "#6dbf2a33"],
174
+ "--color-border-green": ["#4D9900", "#6dbf2a"],
175
+ "--color-icon-green": ["#4D9900", "#6dbf2a"],
176
+ "--color-text-green": ["#3d7a00", "#80d43a"],
177
+ // Categorical — Orange
178
+ "--color-background-orange": ["#c4762033", "#d4903a33"],
179
+ "--color-border-orange": ["#c47620", "#d4903a"],
180
+ "--color-icon-orange": ["#c47620", "#d4903a"],
181
+ "--color-text-orange": ["#a06018", "#e0a04a"],
182
+ // Categorical — Pink
183
+ "--color-background-pink": ["#c44a7033", "#e07a9a33"],
184
+ "--color-border-pink": ["#c44a70", "#e07a9a"],
185
+ "--color-icon-pink": ["#c44a70", "#e07a9a"],
186
+ "--color-text-pink": ["#a03a5a", "#f08aaa"],
187
+ // Categorical — Purple
188
+ "--color-background-purple": ["#6b4a8c33", "#b08ed433"],
189
+ "--color-border-purple": ["#6b4a8c", "#b08ed4"],
190
+ "--color-icon-purple": ["#6b4a8c", "#b08ed4"],
191
+ "--color-text-purple": ["#553a70", "#c0a0e0"],
192
+ // Categorical — Red
193
+ "--color-background-red": ["#FD000033", "#ff5c5c33"],
194
+ "--color-border-red": ["#FD0000", "#ff5c5c"],
195
+ "--color-icon-red": ["#FD0000", "#ff5c5c"],
196
+ "--color-text-red": ["#cc0000", "#ff7a7a"],
197
+ // Categorical — Teal
198
+ "--color-background-teal": ["#2e6b5a33", "#5ab89833"],
199
+ "--color-border-teal": ["#2e6b5a", "#5ab898"],
200
+ "--color-icon-teal": ["#2e6b5a", "#5ab898"],
201
+ "--color-text-teal": ["#245546", "#6ccaaa"],
202
+ // Categorical — Yellow
203
+ "--color-background-yellow": ["#FFB60033", "#ffc94033"],
204
+ "--color-border-yellow": ["#FFB600", "#ffc940"],
205
+ "--color-icon-yellow": ["#FFB600", "#ffc940"],
206
+ "--color-text-yellow": ["#cc9200", "#ffd960"],
207
+ // =========================================================================
208
+ // Spacing
209
+ // =========================================================================
210
+ "--spacing-0-5": "3px",
211
+ "--spacing-1": "6px",
212
+ "--spacing-1-5": "9px",
213
+ "--spacing-2": "12px",
214
+ "--spacing-3": "18px",
215
+ "--spacing-4": "24px",
216
+ "--spacing-5": "30px",
217
+ "--spacing-6": "36px",
218
+ "--spacing-7": "42px",
219
+ "--spacing-8": "48px",
220
+ "--spacing-9": "54px",
221
+ "--spacing-10": "60px",
222
+ "--spacing-11": "66px",
223
+ "--spacing-12": "72px",
224
+ // =========================================================================
225
+ // Radius — soft and rounded
226
+ // =========================================================================
227
+ "--radius-inner": "6px",
228
+ "--radius-element": "12px",
229
+ "--radius-container": "18px",
230
+ "--radius-page": "42px",
231
+ // No explicit --font-size-* overrides — font sizes come from
232
+ // typography.scale above, keeping the scale the single source of truth.
233
+ // =========================================================================
234
+ // Element sizes
235
+ // =========================================================================
236
+ "--size-element-sm": "36px",
237
+ "--size-element-md": "40px",
238
+ "--size-element-lg": "44px",
239
+ // =========================================================================
240
+ // Shadows
241
+ // =========================================================================
242
+ "--shadow-low": "0 2px 4px #3E481D0D, 0 4px 8px #3E481D1A",
243
+ "--shadow-med": "0 2px 4px #3E481D0D, 0 4px 12px #3E481D1A",
244
+ "--shadow-high": "0 4px 6px #3E481D1A, 0 12px 24px #3E481D26",
245
+ "--shadow-inset-hover": "inset 0px 0px 0px 2px #3E481D30",
246
+ "--shadow-inset-selected": "inset 0px 0px 0px 2px #3E481D50",
247
+ "--shadow-inset-success": "inset 0px 0px 0px 2px #4D990050",
248
+ "--shadow-inset-warning": "inset 0px 0px 0px 2px #FFB60050",
249
+ "--shadow-inset-error": "inset 0px 0px 0px 2px #FD000050"
250
+ },
251
+ components: {
252
+ button: {
253
+ base: {
254
+ borderRadius: "var(--radius-full)"
255
+ }
256
+ },
257
+ card: {
258
+ base: {
259
+ borderRadius: "var(--radius-page)",
260
+ padding: "var(--spacing-3)"
261
+ }
262
+ },
263
+ section: {
264
+ base: {
265
+ padding: "var(--spacing-3)"
266
+ }
267
+ }
268
+ },
269
+ icons: matchaIconRegistry
270
+ });
271
+ // Annotate the CommonJS export names for ESM import in node:
272
+ 0 && (module.exports = {
273
+ matchaIconRegistry,
274
+ matchaTheme
275
+ });
package/dist/source.mjs ADDED
@@ -0,0 +1,213 @@
1
+ import {
2
+ matchaIconRegistry
3
+ } from "./chunk-EDWXH23Y.mjs";
4
+
5
+ // src/matchaTheme.ts
6
+ import { defineTheme, defineSyntaxTheme } from "@astryxdesign/core/theme";
7
+ var matchaSyntax = defineSyntaxTheme({
8
+ name: "xds-matcha",
9
+ tokens: {
10
+ keyword: ["#5a6b2a", "#a8bf6a"],
11
+ string: ["#2e6b4a", "#7bc49e"],
12
+ comment: ["#707E46", "#707E46"],
13
+ number: ["#8c6b30", "#d4b870"],
14
+ function: ["#3a5e8c", "#7ba8d4"],
15
+ type: ["#6b4a8c", "#b08ed4"],
16
+ variable: ["#3E481D", "#C0CBA9"],
17
+ operator: ["#707E46", "#94a468"],
18
+ constant: ["#8c6b30", "#d4b870"],
19
+ tag: ["#8c3a3a", "#d47a7a"],
20
+ attribute: ["#7c5e3a", "#c4a882"],
21
+ property: ["#3a7c6b", "#70c4b0"],
22
+ punctuation: ["#707E46", "#5a6440"],
23
+ background: ["#F0F0E0", "#1a1c14"]
24
+ }
25
+ });
26
+ var matchaTheme = defineTheme({
27
+ name: "matcha",
28
+ typography: {
29
+ // base 16 / ratio 1.25 — aligned with the other themes' geometric scale.
30
+ scale: { base: 16, ratio: 1.25 },
31
+ body: {
32
+ family: "DM Sans",
33
+ fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
34
+ },
35
+ heading: {
36
+ family: "Playwrite US Trad",
37
+ fallbacks: 'Georgia, "Times New Roman", Times, serif'
38
+ },
39
+ code: {
40
+ family: "JetBrains Mono",
41
+ fallbacks: '"SF Mono", Monaco, Consolas, monospace'
42
+ }
43
+ },
44
+ motion: { fast: 125, medium: 300, slow: 700, ratio: 0.75 },
45
+ syntax: matchaSyntax,
46
+ tokens: {
47
+ // =========================================================================
48
+ // Colors — earthy matcha palette
49
+ // Core: #3E481D, #707E46, #C0CBA9, #F0F0E0, #FFFFFF
50
+ // =========================================================================
51
+ // Core semantic
52
+ "--color-accent": ["#3E481D", "#C0CBA9"],
53
+ "--color-accent-muted": ["#3E481D14", "#C0CBA920"],
54
+ "--color-neutral": ["#3E481D0F", "#C0CBA91A"],
55
+ "--color-background-surface": ["#FFFFFF", "#1a1c14"],
56
+ "--color-background-body": ["#F0F0E0", "#12140e"],
57
+ "--color-overlay": ["#3E481D80", "#3E481DCC"],
58
+ "--color-overlay-hover": ["#3E481D0D", "#C0CBA90D"],
59
+ "--color-overlay-pressed": ["#3E481D1A", "#C0CBA91A"],
60
+ "--color-background-muted": ["#F0F0E0", "#3E481D"],
61
+ // Text
62
+ "--color-text-primary": ["#3E481D", "#C0CBA9"],
63
+ "--color-text-secondary": ["#707E46", "#94a468"],
64
+ "--color-text-disabled": ["#C0CBA9", "#5a6440"],
65
+ "--color-text-accent": ["#3E481D", "#C0CBA9"],
66
+ "--color-on-dark": "#FFFFFF",
67
+ "--color-on-light": "#3E481D",
68
+ "--color-on-accent": ["#FFFFFF", "#3E481D"],
69
+ "--color-on-success": ["#FFFFFF", "#3E481D"],
70
+ "--color-on-error": ["#FFFFFF", "#3E481D"],
71
+ "--color-on-warning": ["#3E481D", "#3E481D"],
72
+ // Icon
73
+ "--color-icon-accent": ["#3E481D", "#C0CBA9"],
74
+ "--color-icon-primary": ["#3E481D", "#C0CBA9"],
75
+ "--color-icon-secondary": ["#707E46", "#94a468"],
76
+ "--color-icon-disabled": ["#C0CBA9", "#5a6440"],
77
+ // Surface variants
78
+ "--color-background-card": ["#FFFFFF", "#1e2016"],
79
+ "--color-background-popover": ["#FFFFFF", "#3E481D"],
80
+ "--color-background-inverted": ["#3E481D", "#C0CBA9"],
81
+ // Status / Sentiment
82
+ "--color-success": ["#4D9900", "#6dbf2a"],
83
+ "--color-success-muted": ["#4D990020", "#6dbf2a20"],
84
+ "--color-error": ["#FD0000", "#ff5c5c"],
85
+ "--color-error-muted": ["#FD000020", "#ff5c5c20"],
86
+ "--color-warning": ["#FFB600", "#ffc940"],
87
+ "--color-warning-muted": ["#FFB60020", "#ffc94020"],
88
+ // Border
89
+ // Softer sage borders (default + emphasized/card) in light mode.
90
+ "--color-border": ["#DCE3CE", "#C0CBA91A"],
91
+ "--color-border-emphasized": ["#B7C29E", "#5a6440"],
92
+ // Effects
93
+ "--color-skeleton": ["#C0CBA9", "#5a6440"],
94
+ "--color-shadow": ["#3E481D1A", "#0000004D"],
95
+ "--color-tint-hover": ["black", "white"],
96
+ // Categorical — Blue
97
+ "--color-background-blue": ["#3a5e8c33", "#3a5e8c33"],
98
+ "--color-border-blue": ["#3a5e8c", "#7ba8d4"],
99
+ "--color-icon-blue": ["#3a5e8c", "#7ba8d4"],
100
+ "--color-text-blue": ["#2e4a6e", "#8dbce0"],
101
+ // Categorical — Cyan
102
+ "--color-background-cyan": ["#3a7c7c33", "#3a7c7c33"],
103
+ "--color-border-cyan": ["#3a7c7c", "#70c4c4"],
104
+ "--color-icon-cyan": ["#3a7c7c", "#70c4c4"],
105
+ "--color-text-cyan": ["#2e6060", "#82d4d4"],
106
+ // Categorical — Gray
107
+ "--color-background-gray": ["#707E4633", "#5a644033"],
108
+ "--color-border-gray": ["#707E46", "#707E46"],
109
+ "--color-icon-gray": ["#707E46", "#94a468"],
110
+ "--color-text-gray": ["#3E481D", "#C0CBA9"],
111
+ // Categorical — Green
112
+ "--color-background-green": ["#4D990033", "#6dbf2a33"],
113
+ "--color-border-green": ["#4D9900", "#6dbf2a"],
114
+ "--color-icon-green": ["#4D9900", "#6dbf2a"],
115
+ "--color-text-green": ["#3d7a00", "#80d43a"],
116
+ // Categorical — Orange
117
+ "--color-background-orange": ["#c4762033", "#d4903a33"],
118
+ "--color-border-orange": ["#c47620", "#d4903a"],
119
+ "--color-icon-orange": ["#c47620", "#d4903a"],
120
+ "--color-text-orange": ["#a06018", "#e0a04a"],
121
+ // Categorical — Pink
122
+ "--color-background-pink": ["#c44a7033", "#e07a9a33"],
123
+ "--color-border-pink": ["#c44a70", "#e07a9a"],
124
+ "--color-icon-pink": ["#c44a70", "#e07a9a"],
125
+ "--color-text-pink": ["#a03a5a", "#f08aaa"],
126
+ // Categorical — Purple
127
+ "--color-background-purple": ["#6b4a8c33", "#b08ed433"],
128
+ "--color-border-purple": ["#6b4a8c", "#b08ed4"],
129
+ "--color-icon-purple": ["#6b4a8c", "#b08ed4"],
130
+ "--color-text-purple": ["#553a70", "#c0a0e0"],
131
+ // Categorical — Red
132
+ "--color-background-red": ["#FD000033", "#ff5c5c33"],
133
+ "--color-border-red": ["#FD0000", "#ff5c5c"],
134
+ "--color-icon-red": ["#FD0000", "#ff5c5c"],
135
+ "--color-text-red": ["#cc0000", "#ff7a7a"],
136
+ // Categorical — Teal
137
+ "--color-background-teal": ["#2e6b5a33", "#5ab89833"],
138
+ "--color-border-teal": ["#2e6b5a", "#5ab898"],
139
+ "--color-icon-teal": ["#2e6b5a", "#5ab898"],
140
+ "--color-text-teal": ["#245546", "#6ccaaa"],
141
+ // Categorical — Yellow
142
+ "--color-background-yellow": ["#FFB60033", "#ffc94033"],
143
+ "--color-border-yellow": ["#FFB600", "#ffc940"],
144
+ "--color-icon-yellow": ["#FFB600", "#ffc940"],
145
+ "--color-text-yellow": ["#cc9200", "#ffd960"],
146
+ // =========================================================================
147
+ // Spacing
148
+ // =========================================================================
149
+ "--spacing-0-5": "3px",
150
+ "--spacing-1": "6px",
151
+ "--spacing-1-5": "9px",
152
+ "--spacing-2": "12px",
153
+ "--spacing-3": "18px",
154
+ "--spacing-4": "24px",
155
+ "--spacing-5": "30px",
156
+ "--spacing-6": "36px",
157
+ "--spacing-7": "42px",
158
+ "--spacing-8": "48px",
159
+ "--spacing-9": "54px",
160
+ "--spacing-10": "60px",
161
+ "--spacing-11": "66px",
162
+ "--spacing-12": "72px",
163
+ // =========================================================================
164
+ // Radius — soft and rounded
165
+ // =========================================================================
166
+ "--radius-inner": "6px",
167
+ "--radius-element": "12px",
168
+ "--radius-container": "18px",
169
+ "--radius-page": "42px",
170
+ // No explicit --font-size-* overrides — font sizes come from
171
+ // typography.scale above, keeping the scale the single source of truth.
172
+ // =========================================================================
173
+ // Element sizes
174
+ // =========================================================================
175
+ "--size-element-sm": "36px",
176
+ "--size-element-md": "40px",
177
+ "--size-element-lg": "44px",
178
+ // =========================================================================
179
+ // Shadows
180
+ // =========================================================================
181
+ "--shadow-low": "0 2px 4px #3E481D0D, 0 4px 8px #3E481D1A",
182
+ "--shadow-med": "0 2px 4px #3E481D0D, 0 4px 12px #3E481D1A",
183
+ "--shadow-high": "0 4px 6px #3E481D1A, 0 12px 24px #3E481D26",
184
+ "--shadow-inset-hover": "inset 0px 0px 0px 2px #3E481D30",
185
+ "--shadow-inset-selected": "inset 0px 0px 0px 2px #3E481D50",
186
+ "--shadow-inset-success": "inset 0px 0px 0px 2px #4D990050",
187
+ "--shadow-inset-warning": "inset 0px 0px 0px 2px #FFB60050",
188
+ "--shadow-inset-error": "inset 0px 0px 0px 2px #FD000050"
189
+ },
190
+ components: {
191
+ button: {
192
+ base: {
193
+ borderRadius: "var(--radius-full)"
194
+ }
195
+ },
196
+ card: {
197
+ base: {
198
+ borderRadius: "var(--radius-page)",
199
+ padding: "var(--spacing-3)"
200
+ }
201
+ },
202
+ section: {
203
+ base: {
204
+ padding: "var(--spacing-3)"
205
+ }
206
+ }
207
+ },
208
+ icons: matchaIconRegistry
209
+ });
210
+ export {
211
+ matchaIconRegistry,
212
+ matchaTheme
213
+ };