@kanso-protocol/core 0.3.2 → 0.5.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 (4) hide show
  1. package/package.json +1 -1
  2. package/styles/_tokens.scss +5 -0
  3. package/styles/dark.css +36 -31
  4. package/styles/tokens.css +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kanso-protocol/core",
3
- "version": "0.3.2",
3
+ "version": "0.5.0",
4
4
  "description": "Kanso Protocol — core design tokens (CSS/SCSS variables + generated TS constants).",
5
5
  "license": "MIT",
6
6
  "author": "GregNBlack",
package/styles/_tokens.scss CHANGED
@@ -242,6 +242,11 @@ $kp-layout-container-padding-none: 0;
242
242
  $kp-layout-container-padding-sm: 16px;
243
243
  $kp-layout-container-padding-md: 24px;
244
244
  $kp-layout-container-padding-lg: 32px;
245
+ $kp-color-accent-primary-fg: $kp-color-blue-600;
246
+ $kp-color-accent-danger-fg: $kp-color-red-600;
247
+ $kp-color-accent-success-fg: $kp-color-green-600;
248
+ $kp-color-accent-warning-fg: $kp-color-amber-600;
249
+ $kp-color-accent-info-fg: $kp-color-cyan-600;
245
250
  $kp-color-primary-default-bg-rest: $kp-color-blue-600;
246
251
  $kp-color-primary-default-bg-hover: $kp-color-blue-700;
247
252
  $kp-color-primary-default-bg-active: $kp-color-blue-800;
package/styles/dark.css CHANGED
@@ -34,9 +34,9 @@
34
34
  --kp-color-blue-300: #1d4ed8;
35
35
  --kp-color-blue-400: #2563eb;
36
36
  --kp-color-blue-500: #3b82f6;
37
- --kp-color-blue-600: #60a5fa;
38
- --kp-color-blue-700: #93c5fd;
39
- --kp-color-blue-800: #bfdbfe;
37
+ --kp-color-blue-600: #2563eb;
38
+ --kp-color-blue-700: #1d4ed8;
39
+ --kp-color-blue-800: #1e40af;
40
40
  --kp-color-blue-900: #dbeafe;
41
41
  --kp-color-blue-950: #eff6ff;
42
42
  --kp-color-red-50: #450a0a;
@@ -45,9 +45,9 @@
45
45
  --kp-color-red-300: #b91c1c;
46
46
  --kp-color-red-400: #dc2626;
47
47
  --kp-color-red-500: #ef4444;
48
- --kp-color-red-600: #f87171;
49
- --kp-color-red-700: #fca5a5;
50
- --kp-color-red-800: #fecaca;
48
+ --kp-color-red-600: #dc2626;
49
+ --kp-color-red-700: #b91c1c;
50
+ --kp-color-red-800: #991b1b;
51
51
  --kp-color-red-900: #fee2e2;
52
52
  --kp-color-red-950: #fef2f2;
53
53
  --kp-color-green-50: #052e16;
@@ -56,9 +56,9 @@
56
56
  --kp-color-green-300: #15803d;
57
57
  --kp-color-green-400: #16a34a;
58
58
  --kp-color-green-500: #22c55e;
59
- --kp-color-green-600: #4ade80;
60
- --kp-color-green-700: #86efac;
61
- --kp-color-green-800: #bbf7d0;
59
+ --kp-color-green-600: #16a34a;
60
+ --kp-color-green-700: #15803d;
61
+ --kp-color-green-800: #166534;
62
62
  --kp-color-green-900: #dcfce7;
63
63
  --kp-color-green-950: #f0fdf4;
64
64
  --kp-color-amber-50: #451a03;
@@ -67,9 +67,9 @@
67
67
  --kp-color-amber-300: #b45309;
68
68
  --kp-color-amber-400: #d97706;
69
69
  --kp-color-amber-500: #f59e0b;
70
- --kp-color-amber-600: #fbbf24;
71
- --kp-color-amber-700: #fcd34d;
72
- --kp-color-amber-800: #fde68a;
70
+ --kp-color-amber-600: #d97706;
71
+ --kp-color-amber-700: #b45309;
72
+ --kp-color-amber-800: #92400e;
73
73
  --kp-color-amber-900: #fef3c7;
74
74
  --kp-color-amber-950: #fffbeb;
75
75
  --kp-color-cyan-50: #083344;
@@ -78,9 +78,9 @@
78
78
  --kp-color-cyan-300: #0e7490;
79
79
  --kp-color-cyan-400: #0891b2;
80
80
  --kp-color-cyan-500: #06b6d4;
81
- --kp-color-cyan-600: #22d3ee;
82
- --kp-color-cyan-700: #67e8f9;
83
- --kp-color-cyan-800: #a5f3fc;
81
+ --kp-color-cyan-600: #0891b2;
82
+ --kp-color-cyan-700: #0e7490;
83
+ --kp-color-cyan-800: #155e75;
84
84
  --kp-color-cyan-900: #cffafe;
85
85
  --kp-color-cyan-950: #ecfeff;
86
86
  --kp-color-orange-50: #431407;
@@ -89,9 +89,9 @@
89
89
  --kp-color-orange-300: #c2410c;
90
90
  --kp-color-orange-400: #ea580c;
91
91
  --kp-color-orange-500: #f97316;
92
- --kp-color-orange-600: #fb923c;
93
- --kp-color-orange-700: #fdba74;
94
- --kp-color-orange-800: #fed7aa;
92
+ --kp-color-orange-600: #ea580c;
93
+ --kp-color-orange-700: #c2410c;
94
+ --kp-color-orange-800: #9a3412;
95
95
  --kp-color-orange-900: #ffedd5;
96
96
  --kp-color-orange-950: #fff7ed;
97
97
  --kp-color-violet-50: #2e1065;
@@ -100,9 +100,9 @@
100
100
  --kp-color-violet-300: #6d28d9;
101
101
  --kp-color-violet-400: #7c3aed;
102
102
  --kp-color-violet-500: #8b5cf6;
103
- --kp-color-violet-600: #a78bfa;
104
- --kp-color-violet-700: #c4b5fd;
105
- --kp-color-violet-800: #ddd6fe;
103
+ --kp-color-violet-600: #7c3aed;
104
+ --kp-color-violet-700: #6d28d9;
105
+ --kp-color-violet-800: #5b21b6;
106
106
  --kp-color-violet-900: #ede9fe;
107
107
  --kp-color-violet-950: #f5f3ff;
108
108
  --kp-color-badge-primary-subtle-bg: #1e3a8a;
@@ -125,11 +125,11 @@
125
125
  --kp-color-alert-warning-subtle-bg: #78350f;
126
126
  --kp-color-alert-info-subtle-bg: #164e63;
127
127
  --kp-color-alert-neutral-subtle-bg: #27272a;
128
- --kp-color-primary-default-fg-rest: #172554;
129
- --kp-color-primary-default-fg-hover: #172554;
130
- --kp-color-primary-default-fg-active: #172554;
131
- --kp-color-primary-default-fg-focus: #172554;
132
- --kp-color-primary-default-fg-loading: #172554;
128
+ --kp-color-primary-default-fg-rest: #ffffff;
129
+ --kp-color-primary-default-fg-hover: #ffffff;
130
+ --kp-color-primary-default-fg-active: #ffffff;
131
+ --kp-color-primary-default-fg-focus: #ffffff;
132
+ --kp-color-primary-default-fg-loading: #ffffff;
133
133
  --kp-color-primary-default-fg-disabled: #a1a1aa;
134
134
  --kp-color-primary-subtle-fg-rest: #93c5fd;
135
135
  --kp-color-primary-subtle-fg-hover: #bfdbfe;
@@ -137,11 +137,11 @@
137
137
  --kp-color-primary-subtle-fg-focus: #93c5fd;
138
138
  --kp-color-primary-subtle-fg-loading: #93c5fd;
139
139
  --kp-color-primary-subtle-fg-disabled: #52525b;
140
- --kp-color-danger-default-fg-rest: #450a0a;
141
- --kp-color-danger-default-fg-hover: #450a0a;
142
- --kp-color-danger-default-fg-active: #450a0a;
143
- --kp-color-danger-default-fg-focus: #450a0a;
144
- --kp-color-danger-default-fg-loading: #450a0a;
140
+ --kp-color-danger-default-fg-rest: #ffffff;
141
+ --kp-color-danger-default-fg-hover: #ffffff;
142
+ --kp-color-danger-default-fg-active: #ffffff;
143
+ --kp-color-danger-default-fg-focus: #ffffff;
144
+ --kp-color-danger-default-fg-loading: #ffffff;
145
145
  --kp-color-danger-default-fg-disabled: #a1a1aa;
146
146
  --kp-color-danger-subtle-fg-rest: #fca5a5;
147
147
  --kp-color-danger-subtle-fg-hover: #fecaca;
@@ -180,4 +180,9 @@
180
180
  --kp-color-datepicker-day-fg-outside: #71717a;
181
181
  --kp-color-sidebar-section-label: #a1a1aa;
182
182
  --kp-color-notif-item-time: #71717a;
183
+ --kp-color-accent-primary-fg: #60a5fa;
184
+ --kp-color-accent-danger-fg: #f87171;
185
+ --kp-color-accent-success-fg: #4ade80;
186
+ --kp-color-accent-warning-fg: #fbbf24;
187
+ --kp-color-accent-info-fg: #22d3ee;
183
188
  }
package/styles/tokens.css CHANGED
@@ -244,6 +244,11 @@
244
244
  --kp-layout-container-padding-sm: 16px;
245
245
  --kp-layout-container-padding-md: 24px;
246
246
  --kp-layout-container-padding-lg: 32px;
247
+ --kp-color-accent-primary-fg: var(--kp-color-blue-600);
248
+ --kp-color-accent-danger-fg: var(--kp-color-red-600);
249
+ --kp-color-accent-success-fg: var(--kp-color-green-600);
250
+ --kp-color-accent-warning-fg: var(--kp-color-amber-600);
251
+ --kp-color-accent-info-fg: var(--kp-color-cyan-600);
247
252
  --kp-color-primary-default-bg-rest: var(--kp-color-blue-600);
248
253
  --kp-color-primary-default-bg-hover: var(--kp-color-blue-700);
249
254
  --kp-color-primary-default-bg-active: var(--kp-color-blue-800);