@kanso-protocol/core 0.1.0 → 0.2.1

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles/dark.css +158 -150
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kanso-protocol/core",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "description": "Kanso Protocol — core design tokens (CSS/SCSS variables + generated TS constants).",
5
5
  "license": "MIT",
6
6
  "author": "GregNBlack",
package/styles/dark.css CHANGED
@@ -1,161 +1,169 @@
1
1
  /**
2
- * Kanso Protocol — dark theme overrides.
2
+ * Do not edit directly — generated by style-dictionary from
3
+ * tokens/themes/dark.json. Run `npm run build:tokens` to regenerate.
3
4
  *
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.
5
+ * Architecture: every semantic token in tokens.css references a
6
+ * primitive via var(--kp-color-*). Inverting the primitive ramp
7
+ * here cascades through the entire system. The handful of explicit
8
+ * semantic overrides (alert/badge subtle backgrounds) are listed at
9
+ * the bottom of tokens/themes/dark.json — see that file for why.
16
10
  */
17
11
 
18
12
  :root[data-theme="dark"],
19
13
  [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
14
  color-scheme: dark;
133
15
  background-color: #09090B;
134
16
  color: #FAFAFA;
135
17
 
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;
18
+ --kp-color-white: #18181b;
19
+ --kp-color-black: #fafafa;
20
+ --kp-color-gray-50: #09090b;
21
+ --kp-color-gray-100: #18181b;
22
+ --kp-color-gray-200: #27272a;
23
+ --kp-color-gray-300: #3f3f46;
24
+ --kp-color-gray-400: #52525b;
25
+ --kp-color-gray-500: #71717a;
26
+ --kp-color-gray-600: #a1a1aa;
27
+ --kp-color-gray-700: #d4d4d8;
28
+ --kp-color-gray-800: #e4e4e7;
29
+ --kp-color-gray-900: #f4f4f5;
30
+ --kp-color-gray-950: #fafafa;
31
+ --kp-color-blue-50: #172554;
32
+ --kp-color-blue-100: #1e3a8a;
33
+ --kp-color-blue-200: #1e40af;
34
+ --kp-color-blue-300: #1d4ed8;
35
+ --kp-color-blue-400: #2563eb;
36
+ --kp-color-blue-500: #3b82f6;
37
+ --kp-color-blue-600: #60a5fa;
38
+ --kp-color-blue-700: #93c5fd;
39
+ --kp-color-blue-800: #bfdbfe;
40
+ --kp-color-blue-900: #dbeafe;
41
+ --kp-color-blue-950: #eff6ff;
42
+ --kp-color-red-50: #450a0a;
43
+ --kp-color-red-100: #7f1d1d;
44
+ --kp-color-red-200: #991b1b;
45
+ --kp-color-red-300: #b91c1c;
46
+ --kp-color-red-400: #dc2626;
47
+ --kp-color-red-500: #ef4444;
48
+ --kp-color-red-600: #f87171;
49
+ --kp-color-red-700: #fca5a5;
50
+ --kp-color-red-800: #fecaca;
51
+ --kp-color-red-900: #fee2e2;
52
+ --kp-color-red-950: #fef2f2;
53
+ --kp-color-green-50: #052e16;
54
+ --kp-color-green-100: #14532d;
55
+ --kp-color-green-200: #166534;
56
+ --kp-color-green-300: #15803d;
57
+ --kp-color-green-400: #16a34a;
58
+ --kp-color-green-500: #22c55e;
59
+ --kp-color-green-600: #4ade80;
60
+ --kp-color-green-700: #86efac;
61
+ --kp-color-green-800: #bbf7d0;
62
+ --kp-color-green-900: #dcfce7;
63
+ --kp-color-green-950: #f0fdf4;
64
+ --kp-color-amber-50: #451a03;
65
+ --kp-color-amber-100: #78350f;
66
+ --kp-color-amber-200: #92400e;
67
+ --kp-color-amber-300: #b45309;
68
+ --kp-color-amber-400: #d97706;
69
+ --kp-color-amber-500: #f59e0b;
70
+ --kp-color-amber-600: #fbbf24;
71
+ --kp-color-amber-700: #fcd34d;
72
+ --kp-color-amber-800: #fde68a;
73
+ --kp-color-amber-900: #fef3c7;
74
+ --kp-color-amber-950: #fffbeb;
75
+ --kp-color-cyan-50: #083344;
76
+ --kp-color-cyan-100: #164e63;
77
+ --kp-color-cyan-200: #155e75;
78
+ --kp-color-cyan-300: #0e7490;
79
+ --kp-color-cyan-400: #0891b2;
80
+ --kp-color-cyan-500: #06b6d4;
81
+ --kp-color-cyan-600: #22d3ee;
82
+ --kp-color-cyan-700: #67e8f9;
83
+ --kp-color-cyan-800: #a5f3fc;
84
+ --kp-color-cyan-900: #cffafe;
85
+ --kp-color-cyan-950: #ecfeff;
86
+ --kp-color-orange-50: #431407;
87
+ --kp-color-orange-100: #7c2d12;
88
+ --kp-color-orange-200: #9a3412;
89
+ --kp-color-orange-300: #c2410c;
90
+ --kp-color-orange-400: #ea580c;
91
+ --kp-color-orange-500: #f97316;
92
+ --kp-color-orange-600: #fb923c;
93
+ --kp-color-orange-700: #fdba74;
94
+ --kp-color-orange-800: #fed7aa;
95
+ --kp-color-orange-900: #ffedd5;
96
+ --kp-color-orange-950: #fff7ed;
97
+ --kp-color-violet-50: #2e1065;
98
+ --kp-color-violet-100: #4c1d95;
99
+ --kp-color-violet-200: #5b21b6;
100
+ --kp-color-violet-300: #6d28d9;
101
+ --kp-color-violet-400: #7c3aed;
102
+ --kp-color-violet-500: #8b5cf6;
103
+ --kp-color-violet-600: #a78bfa;
104
+ --kp-color-violet-700: #c4b5fd;
105
+ --kp-color-violet-800: #ddd6fe;
106
+ --kp-color-violet-900: #ede9fe;
107
+ --kp-color-violet-950: #f5f3ff;
108
+ --kp-color-badge-primary-subtle-bg: #1e3a8a;
109
+ --kp-color-badge-primary-subtle-fg: #93c5fd;
110
+ --kp-color-badge-danger-subtle-bg: #7f1d1d;
111
+ --kp-color-badge-danger-subtle-fg: #fca5a5;
112
+ --kp-color-badge-success-subtle-bg: #14532d;
113
+ --kp-color-badge-success-subtle-fg: #86efac;
114
+ --kp-color-badge-warning-subtle-bg: #78350f;
115
+ --kp-color-badge-warning-subtle-fg: #fde68a;
116
+ --kp-color-badge-info-subtle-bg: #164e63;
117
+ --kp-color-badge-info-subtle-fg: #67e8f9;
118
+ --kp-color-badge-neutral-subtle-bg: #27272a;
119
+ --kp-color-badge-neutral-subtle-fg: #d4d4d8;
120
+ --kp-color-alert-primary-subtle-bg: #1e3a8a;
121
+ --kp-color-alert-danger-subtle-bg: #7f1d1d;
122
+ --kp-color-alert-success-subtle-bg: #14532d;
123
+ --kp-color-alert-warning-subtle-bg: #78350f;
124
+ --kp-color-alert-info-subtle-bg: #164e63;
125
+ --kp-color-alert-neutral-subtle-bg: #27272a;
126
+ --kp-color-primary-default-fg-rest: #0f1729;
127
+ --kp-color-primary-default-fg-hover: #0f1729;
128
+ --kp-color-primary-default-fg-active: #0f1729;
129
+ --kp-color-primary-default-fg-focus: #0f1729;
130
+ --kp-color-primary-default-fg-loading: #0f1729;
131
+ --kp-color-primary-default-fg-disabled: #71717a;
132
+ --kp-color-primary-subtle-fg-rest: #93c5fd;
133
+ --kp-color-primary-subtle-fg-hover: #bfdbfe;
134
+ --kp-color-primary-subtle-fg-active: #dbeafe;
135
+ --kp-color-primary-subtle-fg-focus: #93c5fd;
136
+ --kp-color-primary-subtle-fg-loading: #93c5fd;
137
+ --kp-color-primary-subtle-fg-disabled: #52525b;
138
+ --kp-color-danger-default-fg-rest: #450a0a;
139
+ --kp-color-danger-default-fg-hover: #450a0a;
140
+ --kp-color-danger-default-fg-active: #450a0a;
141
+ --kp-color-danger-default-fg-focus: #450a0a;
142
+ --kp-color-danger-default-fg-loading: #450a0a;
143
+ --kp-color-danger-default-fg-disabled: #71717a;
144
+ --kp-color-danger-subtle-fg-rest: #fca5a5;
145
+ --kp-color-danger-subtle-fg-hover: #fecaca;
146
+ --kp-color-danger-subtle-fg-active: #fee2e2;
147
+ --kp-color-danger-subtle-fg-focus: #fca5a5;
148
+ --kp-color-danger-subtle-fg-loading: #fca5a5;
149
+ --kp-color-danger-subtle-fg-disabled: #52525b;
150
+ --kp-color-neutral-default-fg-rest: #09090b;
151
+ --kp-color-neutral-default-fg-hover: #09090b;
152
+ --kp-color-neutral-default-fg-active: #09090b;
153
+ --kp-color-neutral-default-fg-focus: #09090b;
154
+ --kp-color-neutral-default-fg-loading: #09090b;
155
+ --kp-color-neutral-default-fg-disabled: #71717a;
156
+ --kp-color-neutral-subtle-fg-rest: #d4d4d8;
157
+ --kp-color-neutral-subtle-fg-hover: #e4e4e7;
158
+ --kp-color-neutral-subtle-fg-active: #f4f4f5;
159
+ --kp-color-neutral-subtle-fg-focus: #d4d4d8;
160
+ --kp-color-neutral-subtle-fg-loading: #d4d4d8;
161
+ --kp-color-neutral-subtle-fg-disabled: #52525b;
162
+ --kp-color-card-fg-desc: #a1a1aa;
163
+ --kp-color-input-fg-default: #71717a;
164
+ --kp-color-popover-fg-desc: #a1a1aa;
165
+ --kp-color-tabs-tab-fg-rest: #a1a1aa;
166
+ --kp-color-nav-item-fg-disabled: #52525b;
167
+ --kp-color-breadcrumbs-item-fg-link-rest: #93c5fd;
168
+ --kp-color-table-header-fg: #a1a1aa;
161
169
  }