@kanso-protocol/core 0.1.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 (7) hide show
  1. package/fesm2022/kanso-protocol-core.mjs +40 -0
  2. package/fesm2022/kanso-protocol-core.mjs.map +1 -0
  3. package/package.json +40 -0
  4. package/styles/_tokens.scss +898 -0
  5. package/styles/dark.css +161 -0
  6. package/styles/tokens.css +901 -0
  7. package/types/kanso-protocol-core.d.ts +21 -0
package/styles/dark.css ADDED
@@ -0,0 +1,161 @@
1
+ /**
2
+ * Kanso Protocol — dark theme overrides.
3
+ *
4
+ * Approach: invert the primitive gray ramp under `[data-theme="dark"]`
5
+ * and remap `color/white` to a dark surface. Every semantic token
6
+ * (text, border, card, sidebar, header, input, etc.) already references
7
+ * the primitives, so they cascade automatically.
8
+ *
9
+ * The brand ramps (blue/red/green/amber/cyan/violet/orange) flip too,
10
+ * so subtle backgrounds (e.g. blue-50) become deep tinted surfaces in
11
+ * dark mode while the action shades (blue-600 etc.) stay bright. Use
12
+ * with `data-theme="dark"` on `<html>` or `<body>`.
13
+ *
14
+ * NOT auto-generated yet — extend the Style Dictionary build to emit
15
+ * this block once the dark palette is signed off in design.
16
+ */
17
+
18
+ :root[data-theme="dark"],
19
+ [data-theme="dark"] {
20
+ /* Surfaces and base ink */
21
+ --kp-color-white: #18181B; /* the new "white" — top elevation surface */
22
+ --kp-color-black: #FAFAFA; /* the new "black" — primary text on dark */
23
+
24
+ /* Inverted gray ramp.
25
+ gray-50 was lightest; in dark it becomes the darkest plane.
26
+ gray-950 was darkest; in dark it becomes the brightest body text.
27
+ gray-500 stays — it's the perceptual pivot. */
28
+ --kp-color-gray-50: #09090B;
29
+ --kp-color-gray-100: #18181B;
30
+ --kp-color-gray-200: #27272A;
31
+ --kp-color-gray-300: #3F3F46;
32
+ --kp-color-gray-400: #52525B;
33
+ --kp-color-gray-500: #71717A;
34
+ --kp-color-gray-600: #A1A1AA;
35
+ --kp-color-gray-700: #D4D4D8;
36
+ --kp-color-gray-800: #E4E4E7;
37
+ --kp-color-gray-900: #F4F4F5;
38
+ --kp-color-gray-950: #FAFAFA;
39
+
40
+ /* Brand: blue. Subtle tints invert; action shades stay bright. */
41
+ --kp-color-blue-50: #172554;
42
+ --kp-color-blue-100: #1E3A8A;
43
+ --kp-color-blue-200: #1E40AF;
44
+ --kp-color-blue-300: #1D4ED8;
45
+ --kp-color-blue-400: #2563EB;
46
+ --kp-color-blue-500: #3B82F6;
47
+ --kp-color-blue-600: #60A5FA;
48
+ --kp-color-blue-700: #93C5FD;
49
+ --kp-color-blue-800: #BFDBFE;
50
+ --kp-color-blue-900: #DBEAFE;
51
+ --kp-color-blue-950: #EFF6FF;
52
+
53
+ /* Danger: red. */
54
+ --kp-color-red-50: #450A0A;
55
+ --kp-color-red-100: #7F1D1D;
56
+ --kp-color-red-200: #991B1B;
57
+ --kp-color-red-300: #B91C1C;
58
+ --kp-color-red-400: #DC2626;
59
+ --kp-color-red-500: #EF4444;
60
+ --kp-color-red-600: #F87171;
61
+ --kp-color-red-700: #FCA5A5;
62
+ --kp-color-red-800: #FECACA;
63
+ --kp-color-red-900: #FEE2E2;
64
+ --kp-color-red-950: #FEF2F2;
65
+
66
+ /* Success: green. */
67
+ --kp-color-green-50: #052E16;
68
+ --kp-color-green-100: #14532D;
69
+ --kp-color-green-200: #166534;
70
+ --kp-color-green-300: #15803D;
71
+ --kp-color-green-400: #16A34A;
72
+ --kp-color-green-500: #22C55E;
73
+ --kp-color-green-600: #4ADE80;
74
+ --kp-color-green-700: #86EFAC;
75
+ --kp-color-green-800: #BBF7D0;
76
+ --kp-color-green-900: #DCFCE7;
77
+ --kp-color-green-950: #F0FDF4;
78
+
79
+ /* Warning: amber. */
80
+ --kp-color-amber-50: #451A03;
81
+ --kp-color-amber-100: #78350F;
82
+ --kp-color-amber-200: #92400E;
83
+ --kp-color-amber-300: #B45309;
84
+ --kp-color-amber-400: #D97706;
85
+ --kp-color-amber-500: #F59E0B;
86
+ --kp-color-amber-600: #FBBF24;
87
+ --kp-color-amber-700: #FCD34D;
88
+ --kp-color-amber-800: #FDE68A;
89
+ --kp-color-amber-900: #FEF3C7;
90
+ --kp-color-amber-950: #FFFBEB;
91
+
92
+ /* Info: cyan. */
93
+ --kp-color-cyan-50: #083344;
94
+ --kp-color-cyan-100: #164E63;
95
+ --kp-color-cyan-200: #155E75;
96
+ --kp-color-cyan-300: #0E7490;
97
+ --kp-color-cyan-400: #0891B2;
98
+ --kp-color-cyan-500: #06B6D4;
99
+ --kp-color-cyan-600: #22D3EE;
100
+ --kp-color-cyan-700: #67E8F9;
101
+ --kp-color-cyan-800: #A5F3FC;
102
+ --kp-color-cyan-900: #CFFAFE;
103
+ --kp-color-cyan-950: #ECFEFF;
104
+
105
+ /* Optional: orange + violet, if used by alerts / progress. */
106
+ --kp-color-orange-50: #431407;
107
+ --kp-color-orange-100: #7C2D12;
108
+ --kp-color-orange-200: #9A3412;
109
+ --kp-color-orange-300: #C2410C;
110
+ --kp-color-orange-400: #EA580C;
111
+ --kp-color-orange-500: #F97316;
112
+ --kp-color-orange-600: #FB923C;
113
+ --kp-color-orange-700: #FDBA74;
114
+ --kp-color-orange-800: #FED7AA;
115
+ --kp-color-orange-900: #FFEDD5;
116
+ --kp-color-orange-950: #FFF7ED;
117
+
118
+ --kp-color-violet-50: #2E1065;
119
+ --kp-color-violet-100: #4C1D95;
120
+ --kp-color-violet-200: #5B21B6;
121
+ --kp-color-violet-300: #6D28D9;
122
+ --kp-color-violet-400: #7C3AED;
123
+ --kp-color-violet-500: #8B5CF6;
124
+ --kp-color-violet-600: #A78BFA;
125
+ --kp-color-violet-700: #C4B5FD;
126
+ --kp-color-violet-800: #DDD6FE;
127
+ --kp-color-violet-900: #EDE9FE;
128
+ --kp-color-violet-950: #F5F3FF;
129
+
130
+ /* Page-level background — slightly lower than card surface so
131
+ elevated cards still read as "floating" against the canvas. */
132
+ color-scheme: dark;
133
+ background-color: #09090B;
134
+ color: #FAFAFA;
135
+
136
+ /* ----------------------------------------------------------------
137
+ Subtle surface remaps.
138
+
139
+ The primitive ramp inverts so that `*-50` becomes the *deepest*
140
+ shade of the brand colour (e.g. blue-50 → #172554). That works
141
+ for borders / subtle outlines, but solid `subtle` backgrounds
142
+ end up nearly indistinguishable from the page (#09090B). Bump
143
+ them one step brighter so they read as "tinted surface".
144
+ ---------------------------------------------------------------- */
145
+
146
+ /* Badge — subtle backgrounds. */
147
+ --kp-color-badge-primary-subtle-bg: #1E3A8A; /* blue-100 in dark */
148
+ --kp-color-badge-danger-subtle-bg: #7F1D1D; /* red-100 */
149
+ --kp-color-badge-success-subtle-bg: #14532D; /* green-100 */
150
+ --kp-color-badge-warning-subtle-bg: #78350F; /* amber-100 */
151
+ --kp-color-badge-info-subtle-bg: #164E63; /* cyan-100 */
152
+ --kp-color-badge-neutral-subtle-bg: #27272A; /* gray-200 */
153
+
154
+ /* Alert — subtle backgrounds (same logic as badge). */
155
+ --kp-color-alert-primary-subtle-bg: #1E3A8A;
156
+ --kp-color-alert-danger-subtle-bg: #7F1D1D;
157
+ --kp-color-alert-success-subtle-bg: #14532D;
158
+ --kp-color-alert-warning-subtle-bg: #78350F;
159
+ --kp-color-alert-info-subtle-bg: #164E63;
160
+ --kp-color-alert-neutral-subtle-bg: #27272A;
161
+ }