@mantis-core/styles 0.1.3 → 0.2.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/tokens.template.scss +122 -0
package/package.json
CHANGED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ============================================================
|
|
3
|
+
* MANTIS CORE — DESIGN TOKENS TEMPLATE
|
|
4
|
+
* ============================================================
|
|
5
|
+
*
|
|
6
|
+
* THIS IS A TEMPLATE — do NOT @use/@import this file directly
|
|
7
|
+
* into scss/index.scss or any Core partial.
|
|
8
|
+
*
|
|
9
|
+
* HOW TO USE:
|
|
10
|
+
* 1. Copy the :root and .dark blocks below into your app's
|
|
11
|
+
* global stylesheet (e.g. src/app/globals.scss).
|
|
12
|
+
* 2. Replace the OKLCH values with your brand palette.
|
|
13
|
+
* 3. All @mantis-core/styles components consume these tokens
|
|
14
|
+
* via var(--token-name) — your overrides take effect
|
|
15
|
+
* automatically across the entire UI.
|
|
16
|
+
*
|
|
17
|
+
* TOKEN GROUPS:
|
|
18
|
+
* - Base / surface : --background, --foreground, --card, --card-foreground
|
|
19
|
+
* - Brand : --primary, --secondary, --accent (+ -foreground pairs)
|
|
20
|
+
* - Semantic : --success, --warning, --error, --info (+ -foreground pairs)
|
|
21
|
+
* - Neutral : --muted, --muted-foreground, --border, --input, --ring
|
|
22
|
+
* - Shape : --radius
|
|
23
|
+
*
|
|
24
|
+
* COLOR SPACE: OKLCH (lightness chroma hue)
|
|
25
|
+
* oklch(<L 0–1> <C 0–0.4> <H 0–360>)
|
|
26
|
+
* L=0.5 is perceptually mid-gray; C=0 is achromatic.
|
|
27
|
+
*
|
|
28
|
+
* ============================================================
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
:root {
|
|
32
|
+
/* === Base / Surface === */
|
|
33
|
+
--background: oklch(0.98 0.003 250); /* Page background */
|
|
34
|
+
--foreground: oklch(0.25 0.04 240); /* Default text */
|
|
35
|
+
|
|
36
|
+
--card: oklch(1 0 0); /* Card / panel background */
|
|
37
|
+
--card-foreground: oklch(0.25 0.04 240); /* Card text */
|
|
38
|
+
|
|
39
|
+
/* === Brand Colors === */
|
|
40
|
+
/* Replace these three pairs with your brand palette */
|
|
41
|
+
--primary: oklch(0.45 0.15 142); /* Primary brand color */
|
|
42
|
+
--primary-foreground: oklch(0.98 0.01 55);
|
|
43
|
+
|
|
44
|
+
--secondary: oklch(0.75 0.18 85); /* Secondary brand color */
|
|
45
|
+
--secondary-foreground: oklch(0.25 0.04 240);
|
|
46
|
+
|
|
47
|
+
--accent: oklch(0.82 0.2 85); /* Accent / CTA color */
|
|
48
|
+
--accent-foreground: oklch(0.25 0.04 240);
|
|
49
|
+
|
|
50
|
+
/* === Semantic Colors === */
|
|
51
|
+
/* Adjust hue/chroma to match your brand tone while preserving
|
|
52
|
+
lightness levels so contrast ratios stay accessible (WCAG AA). */
|
|
53
|
+
--success: oklch(0.65 0.18 145);
|
|
54
|
+
--success-foreground: oklch(0.98 0.01 145);
|
|
55
|
+
|
|
56
|
+
--warning: oklch(0.75 0.15 75);
|
|
57
|
+
--warning-foreground: oklch(0.25 0.04 75);
|
|
58
|
+
|
|
59
|
+
--error: oklch(0.58 0.22 27);
|
|
60
|
+
--error-foreground: oklch(0.98 0.01 27);
|
|
61
|
+
|
|
62
|
+
--info: oklch(0.6 0.15 240);
|
|
63
|
+
--info-foreground: oklch(0.98 0.01 240);
|
|
64
|
+
|
|
65
|
+
/* === Neutral / Chrome === */
|
|
66
|
+
--muted: oklch(0.92 0.01 240); /* Muted backgrounds */
|
|
67
|
+
--muted-foreground: oklch(0.55 0.03 240); /* Muted / placeholder text */
|
|
68
|
+
--border: oklch(0.93 0.01 240); /* Dividers and borders */
|
|
69
|
+
--input: oklch(1 0 0); /* Input field background */
|
|
70
|
+
--ring: oklch(0.82 0.2 85); /* Focus ring (usually = --accent) */
|
|
71
|
+
|
|
72
|
+
/* === Shape === */
|
|
73
|
+
--radius: 0.75rem; /* Base border-radius; used by --radius-{sm,md,lg,xl} */
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* ============================================================
|
|
77
|
+
* DARK MODE OVERRIDES
|
|
78
|
+
* Applied when the <html> (or any ancestor) has class="dark".
|
|
79
|
+
* Convention in this project: @custom-variant dark (&:is(.dark *))
|
|
80
|
+
* ============================================================ */
|
|
81
|
+
.dark {
|
|
82
|
+
/* === Base / Surface === */
|
|
83
|
+
--background: oklch(0.18 0.04 240);
|
|
84
|
+
--foreground: oklch(0.95 0.01 55);
|
|
85
|
+
|
|
86
|
+
--card: oklch(0.22 0.04 240);
|
|
87
|
+
--card-foreground: oklch(0.95 0.01 55);
|
|
88
|
+
|
|
89
|
+
/* === Brand Colors (dark-adjusted) === */
|
|
90
|
+
/* In dark mode, brand colors typically shift to higher lightness
|
|
91
|
+
so they stand out against dark backgrounds. */
|
|
92
|
+
--primary: oklch(0.75 0.18 85);
|
|
93
|
+
--primary-foreground: oklch(0.25 0.04 240);
|
|
94
|
+
|
|
95
|
+
--secondary: oklch(0.55 0.12 142);
|
|
96
|
+
--secondary-foreground: oklch(0.95 0.01 55);
|
|
97
|
+
|
|
98
|
+
--accent: oklch(0.85 0.22 85);
|
|
99
|
+
--accent-foreground: oklch(0.25 0.04 240);
|
|
100
|
+
|
|
101
|
+
/* === Semantic Colors (dark-adjusted) === */
|
|
102
|
+
--success: oklch(0.7 0.2 145);
|
|
103
|
+
--success-foreground: oklch(0.18 0.04 145);
|
|
104
|
+
|
|
105
|
+
--warning: oklch(0.8 0.18 75);
|
|
106
|
+
--warning-foreground: oklch(0.2 0.04 75);
|
|
107
|
+
|
|
108
|
+
--error: oklch(0.65 0.25 27);
|
|
109
|
+
--error-foreground: oklch(0.18 0.04 27);
|
|
110
|
+
|
|
111
|
+
--info: oklch(0.7 0.18 240);
|
|
112
|
+
--info-foreground: oklch(0.18 0.04 240);
|
|
113
|
+
|
|
114
|
+
/* === Neutral / Chrome === */
|
|
115
|
+
--muted: oklch(0.3 0.04 240);
|
|
116
|
+
--muted-foreground: oklch(0.7 0.03 240);
|
|
117
|
+
--border: oklch(0.27 0.04 240);
|
|
118
|
+
--input: oklch(0.22 0.04 240);
|
|
119
|
+
--ring: oklch(0.85 0.22 85);
|
|
120
|
+
|
|
121
|
+
/* --radius is theme-independent; no override needed */
|
|
122
|
+
}
|