@mantis-core/styles 0.2.0 → 0.3.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.
- package/package.json +1 -1
- package/scss/theme.scss +63 -0
package/package.json
CHANGED
package/scss/theme.scss
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ============================================================
|
|
3
|
+
* MANTIS CORE — TAILWIND v4 THEME MAPPING
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* Maps the Core's semantic design tokens (raw `--*` CSS vars) to
|
|
7
|
+
* Tailwind v4 `--color-*` theme keys, so utility classes used inside
|
|
8
|
+
* `@mantis-core/ui` components (`bg-primary`, `border-border`,
|
|
9
|
+
* `text-muted-foreground`, …) generate correctly.
|
|
10
|
+
*
|
|
11
|
+
* USAGE (consumer app global stylesheet, AFTER loading Tailwind):
|
|
12
|
+
* @use "tailwindcss";
|
|
13
|
+
* @use "@mantis-core/styles/scss/theme.scss"; // this file
|
|
14
|
+
* @source "../node_modules/@mantis-core/ui/dist"; // scan Core components
|
|
15
|
+
*
|
|
16
|
+
* The raw values themselves (`--primary`, `--border`, …) come from your
|
|
17
|
+
* branded copy of `tokens.template.scss`. `inline` keeps the var()
|
|
18
|
+
* reference live, so client branding overrides take effect at runtime.
|
|
19
|
+
* ============================================================
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
@theme inline {
|
|
23
|
+
/* === Base / Surface === */
|
|
24
|
+
--color-background: var(--background);
|
|
25
|
+
--color-foreground: var(--foreground);
|
|
26
|
+
--color-card: var(--card);
|
|
27
|
+
--color-card-foreground: var(--card-foreground);
|
|
28
|
+
|
|
29
|
+
/* === Brand === */
|
|
30
|
+
--color-primary: var(--primary);
|
|
31
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
32
|
+
/* No shade scale in the token system — alias `-600` to the brand var so
|
|
33
|
+
components referencing `bg-primary-600` still resolve.
|
|
34
|
+
ponytail: alias shade→brand var; wire a real scale if design adds one. */
|
|
35
|
+
--color-primary-600: var(--primary);
|
|
36
|
+
--color-secondary: var(--secondary);
|
|
37
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
38
|
+
--color-accent: var(--accent);
|
|
39
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
40
|
+
|
|
41
|
+
/* === Semantic === */
|
|
42
|
+
--color-success: var(--success);
|
|
43
|
+
--color-success-foreground: var(--success-foreground);
|
|
44
|
+
--color-warning: var(--warning);
|
|
45
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
46
|
+
--color-error: var(--error);
|
|
47
|
+
--color-error-foreground: var(--error-foreground);
|
|
48
|
+
--color-info: var(--info);
|
|
49
|
+
--color-info-foreground: var(--info-foreground);
|
|
50
|
+
|
|
51
|
+
/* === Neutral / Chrome === */
|
|
52
|
+
--color-muted: var(--muted);
|
|
53
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
54
|
+
--color-border: var(--border);
|
|
55
|
+
--color-input: var(--input);
|
|
56
|
+
--color-ring: var(--ring);
|
|
57
|
+
|
|
58
|
+
/* === Shape === */
|
|
59
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
60
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
61
|
+
--radius-lg: var(--radius);
|
|
62
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
63
|
+
}
|