@lifeonlars/prime-yggdrasil 0.1.1 → 0.1.2
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/dist/components/button.css +613 -0
- package/dist/components/calendar.css +226 -0
- package/dist/components/data.css +919 -0
- package/dist/components/form.css +868 -0
- package/dist/components/media.css +167 -0
- package/dist/components/menu.css +1166 -0
- package/dist/components/message.css +491 -0
- package/dist/components/misc.css +621 -0
- package/dist/components/overlay.css +178 -0
- package/dist/components/panel.css +288 -0
- package/dist/components.css +15 -0
- package/dist/radius.css +44 -0
- package/dist/semantic-dark.css +208 -0
- package/dist/semantic-light.css +208 -0
- package/docs/Fixes.md +123 -0
- package/package.json +1 -1
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Yggdrasil Dark - Semantic Tokens
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@import "./foundations.css";
|
|
6
|
+
@import "./prime-palette.css";
|
|
7
|
+
|
|
8
|
+
/* ==================== Semantic Tokens (Dark Theme) ==================== */
|
|
9
|
+
:root {
|
|
10
|
+
/* Surfaces */
|
|
11
|
+
--surface-neutral-primary: #000D20;
|
|
12
|
+
--surface-neutral-secondary: var(--foundation-sky-900);
|
|
13
|
+
--surface-neutral-tertiary: var(--foundation-sky-950);
|
|
14
|
+
--surface-neutral-overlay: var(--foundation-lighter-100);
|
|
15
|
+
|
|
16
|
+
--surface-brand-primary: var(--foundation-sky-500);
|
|
17
|
+
--surface-brand-secondary: var(--foundation-sky-600);
|
|
18
|
+
--surface-brand-accent: var(--foundation-berries-500);
|
|
19
|
+
--surface-brand-overlay: var(--foundation-lighter-100);
|
|
20
|
+
|
|
21
|
+
--surface-context-success: var(--foundation-forest-700);
|
|
22
|
+
--surface-context-warning: var(--foundation-sand-700);
|
|
23
|
+
--surface-context-danger: var(--foundation-berries-700);
|
|
24
|
+
--surface-context-info: var(--foundation-sky-500);
|
|
25
|
+
--surface-context-signal: var(--foundation-sea-600);
|
|
26
|
+
--surface-context-dangeractive: var(--foundation-berries-500);
|
|
27
|
+
|
|
28
|
+
--surface-input-primary: var(--foundation-black);
|
|
29
|
+
--surface-input-secondary: var(--foundation-rock-900);
|
|
30
|
+
|
|
31
|
+
/* Text */
|
|
32
|
+
--text-neutral-default: var(--foundation-rock-050);
|
|
33
|
+
--text-neutral-subdued: var(--foundation-rock-300);
|
|
34
|
+
--text-neutral-loud: var(--foundation-white);
|
|
35
|
+
--text-neutral-disabled: var(--foundation-rock-500);
|
|
36
|
+
|
|
37
|
+
--text-state-interactive: var(--foundation-sky-300);
|
|
38
|
+
--text-state-selected: var(--foundation-sea-500);
|
|
39
|
+
|
|
40
|
+
--text-onsurface-onbrand: var(--foundation-white);
|
|
41
|
+
--text-onsurface-onaccent: var(--foundation-white);
|
|
42
|
+
--text-onsurface-oncontext: var(--foundation-white);
|
|
43
|
+
--text-onsurface-oncontextactive: var(--foundation-white);
|
|
44
|
+
--text-onsurface-onsentiment: var(--foundation-black);
|
|
45
|
+
--text-onsurface-onhighlight: var(--foundation-white);
|
|
46
|
+
|
|
47
|
+
--text-context-success: var(--foundation-forest-300);
|
|
48
|
+
--text-context-warning: var(--foundation-rock-300);
|
|
49
|
+
--text-context-danger: var(--foundation-berries-300);
|
|
50
|
+
|
|
51
|
+
/* Borders */
|
|
52
|
+
--border-neutral-default: var(--foundation-rock-700);
|
|
53
|
+
--border-neutral-subdued: var(--foundation-rock-800);
|
|
54
|
+
--border-neutral-loud: var(--foundation-rock-500);
|
|
55
|
+
--border-neutral-glassoutline: var(--foundation-rock-900);
|
|
56
|
+
|
|
57
|
+
--border-state-interactive: var(--foundation-sky-500);
|
|
58
|
+
--border-state-selected: var(--foundation-sea-500);
|
|
59
|
+
--border-state-focus: var(--foundation-sky-400);
|
|
60
|
+
|
|
61
|
+
--border-brand-brand: var(--foundation-sky-400);
|
|
62
|
+
--border-brand-onbrand: var(--foundation-lighter-200);
|
|
63
|
+
|
|
64
|
+
--border-context-success: var(--foundation-forest-400);
|
|
65
|
+
--border-context-warning: var(--foundation-sand-300);
|
|
66
|
+
--border-context-danger: var(--foundation-berries-500);
|
|
67
|
+
--border-context-info: var(--foundation-sky-300);
|
|
68
|
+
--border-context-signal: var(--foundation-sea-300);
|
|
69
|
+
|
|
70
|
+
/* Icons */
|
|
71
|
+
--icon-neutral-default: var(--foundation-rock-050);
|
|
72
|
+
--icon-neutral-subdued: var(--foundation-rock-400);
|
|
73
|
+
--icon-neutral-loud: var(--foundation-white);
|
|
74
|
+
--icon-neutral-disabled: var(--foundation-rock-400);
|
|
75
|
+
|
|
76
|
+
--icon-state-interactive: var(--foundation-sky-300);
|
|
77
|
+
--icon-state-selected: var(--foundation-sea-500);
|
|
78
|
+
|
|
79
|
+
--icon-onsurface-onbrand: var(--foundation-white);
|
|
80
|
+
--icon-onsurface-onaccent: var(--foundation-white);
|
|
81
|
+
--icon-onsurface-oncontext: var(--foundation-rock-050);
|
|
82
|
+
|
|
83
|
+
--icon-context-success: var(--foundation-forest-400);
|
|
84
|
+
--icon-context-warning: var(--foundation-sand-400);
|
|
85
|
+
--icon-context-danger: var(--foundation-berries-400);
|
|
86
|
+
--icon-context-info: var(--foundation-sky-300);
|
|
87
|
+
|
|
88
|
+
/* Elevation (Shadows) - Dark mode uses lighter rim + stronger shadows */
|
|
89
|
+
--elevation-subtle: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.05);
|
|
90
|
+
--elevation-moderate: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 16px 0 rgba(255, 255, 255, 0.1), 0 4px 8px 0 rgba(255, 255, 255, 0.05);
|
|
91
|
+
--elevation-elevated: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 32px -10px rgba(255, 255, 255, 0.15), 0 0 30px 0px rgba(255, 255, 255, 0.2);
|
|
92
|
+
--elevation-high: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 64px 0 rgba(255, 255, 255, 0.15), 0 0 64px 0px rgba(255, 255, 255, 0.2);
|
|
93
|
+
/* Severity aliases */
|
|
94
|
+
--severity-info-surface: var(--surface-context-info);
|
|
95
|
+
--severity-info-surface-tint: color-mix(in srgb, var(--surface-context-info) 70%, transparent);
|
|
96
|
+
--severity-info-border: var(--border-context-info);
|
|
97
|
+
--severity-info-text: var(--text-onsurface-oncontext);
|
|
98
|
+
--severity-info-icon: var(--icon-onsurface-oncontext);
|
|
99
|
+
|
|
100
|
+
--severity-success-surface: var(--surface-context-success);
|
|
101
|
+
--severity-success-surface-tint: color-mix(in srgb, var(--surface-context-success) 70%, transparent);
|
|
102
|
+
--severity-success-border: var(--border-context-success);
|
|
103
|
+
--severity-success-text: var(--text-onsurface-oncontext);
|
|
104
|
+
--severity-success-icon: var(--icon-onsurface-oncontext);
|
|
105
|
+
|
|
106
|
+
--severity-warn-surface: var(--surface-context-warning);
|
|
107
|
+
--severity-warn-surface-tint: color-mix(in srgb, var(--surface-context-warning) 70%, transparent);
|
|
108
|
+
--severity-warn-border: var(--border-context-warning);
|
|
109
|
+
--severity-warn-text: var(--text-onsurface-oncontext);
|
|
110
|
+
--severity-warn-icon: var(--icon-onsurface-oncontext);
|
|
111
|
+
|
|
112
|
+
--severity-error-surface: var(--surface-context-danger);
|
|
113
|
+
--severity-error-surface-tint: color-mix(in srgb, var(--surface-context-danger) 70%, transparent);
|
|
114
|
+
--severity-error-border: var(--border-context-danger);
|
|
115
|
+
--severity-error-text: var(--text-onsurface-oncontext);
|
|
116
|
+
--severity-error-icon: var(--icon-onsurface-oncontext);
|
|
117
|
+
|
|
118
|
+
--severity-danger-surface: var(--surface-context-danger);
|
|
119
|
+
--severity-danger-surface-tint: color-mix(in srgb, var(--surface-context-danger) 70%, transparent);
|
|
120
|
+
--severity-danger-border: var(--border-context-danger);
|
|
121
|
+
--severity-danger-text: var(--text-context-danger);
|
|
122
|
+
--severity-danger-icon: var(--icon-context-danger);
|
|
123
|
+
|
|
124
|
+
/* Charts + misc (copied straight from your semantic-dark list) */
|
|
125
|
+
--charts-boolean-primary: var(--charts-aquamarine-300);
|
|
126
|
+
--charts-boolean-primaryemphasis: var(--charts-charoite-600);
|
|
127
|
+
--charts-boolean-secondary: var(--charts-sapphire-300);
|
|
128
|
+
--charts-boolean-secondaryemphasis: var(--charts-garnet-300);
|
|
129
|
+
--charts-boolean-diminish: var(--foundation-rock-500);
|
|
130
|
+
--charts-boolean-subdued: var(--foundation-rock-500);
|
|
131
|
+
|
|
132
|
+
--charts-sentiment-positve: var(--charts-emerald-500);
|
|
133
|
+
--charts-sentiment-neutral: var(--charts-topaz-300);
|
|
134
|
+
--charts-sentiment-negative: var(--charts-ruby-500);
|
|
135
|
+
--charts-sentiment-undefined: var(--foundation-rock-400);
|
|
136
|
+
|
|
137
|
+
--charts-scale-scale-0: var(--charts-sapphire-800);
|
|
138
|
+
--charts-scale-scale-1: var(--charts-sapphire-700);
|
|
139
|
+
--charts-scale-scale-2: var(--charts-sapphire-600);
|
|
140
|
+
--charts-scale-scale-3: var(--charts-sapphire-500);
|
|
141
|
+
--charts-scale-scale-4: var(--charts-sapphire-300);
|
|
142
|
+
--charts-scale-scale-5: var(--charts-sapphire-100);
|
|
143
|
+
|
|
144
|
+
--charts-category-chart-1: var(--charts-aquamarine-300);
|
|
145
|
+
--charts-category-chart-2: var(--charts-amber-100);
|
|
146
|
+
--charts-category-chart-3: var(--charts-garnet-500);
|
|
147
|
+
--charts-category-chart-4: var(--charts-charoite-500);
|
|
148
|
+
--charts-category-chart-5: var(--charts-sapphire-300);
|
|
149
|
+
--charts-category-chart-6: var(--charts-amethyst-500);
|
|
150
|
+
--charts-category-chart-7: var(--charts-aquamarine-600);
|
|
151
|
+
--charts-category-chart-8: var(--charts-amber-600);
|
|
152
|
+
--charts-category-chart-9: var(--charts-garnet-700);
|
|
153
|
+
--charts-category-chart-10: var(--charts-charoite-700);
|
|
154
|
+
--charts-category-chart-11: var(--charts-sapphire-700);
|
|
155
|
+
--charts-category-chart-12: var(--charts-amethyst-700);
|
|
156
|
+
|
|
157
|
+
--charts-scaffolding-border: var(--foundation-rock-800);
|
|
158
|
+
|
|
159
|
+
--surface-services-social: var(--foundation-sea-800);
|
|
160
|
+
--surface-services-editorial: var(--foundation-sand-800);
|
|
161
|
+
--surface-services-business: var(--foundation-rock-700);
|
|
162
|
+
--surface-services-analysis: var(--foundation-sky-600);
|
|
163
|
+
--surface-services-mobile: var(--foundation-berries-600);
|
|
164
|
+
|
|
165
|
+
--surface-state-hover: var(--foundation-lighter-100);
|
|
166
|
+
--surface-state-selected: var(--charts-sapphire-900);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* ==================== PrimeReact Theme Mappings ==================== */
|
|
170
|
+
:root {
|
|
171
|
+
--font-family: "Roboto", Arial, sans-serif;
|
|
172
|
+
|
|
173
|
+
/* Prime “surface” slots */
|
|
174
|
+
--surface-a: var(--surface-neutral-primary);
|
|
175
|
+
--surface-b: var(--surface-neutral-secondary);
|
|
176
|
+
--surface-c: var(--surface-neutral-tertiary);
|
|
177
|
+
--surface-d: var(--border-neutral-subdued);
|
|
178
|
+
--surface-e: var(--surface-neutral-primary);
|
|
179
|
+
--surface-f: var(--surface-neutral-primary);
|
|
180
|
+
|
|
181
|
+
/* Text */
|
|
182
|
+
--text-color: var(--text-neutral-default);
|
|
183
|
+
--text-color-secondary: var(--text-neutral-subdued);
|
|
184
|
+
|
|
185
|
+
/* Primary actions */
|
|
186
|
+
--primary-color: var(--surface-brand-primary);
|
|
187
|
+
--primary-color-text: var(--text-onsurface-onbrand);
|
|
188
|
+
|
|
189
|
+
/* Background helpers */
|
|
190
|
+
--surface-ground: var(--surface-neutral-secondary);
|
|
191
|
+
--surface-section: var(--surface-neutral-primary);
|
|
192
|
+
--surface-card: var(--surface-neutral-primary);
|
|
193
|
+
--surface-overlay: var(--surface-neutral-primary);
|
|
194
|
+
|
|
195
|
+
/* Borders + hover */
|
|
196
|
+
--surface-border: var(--border-neutral-default);
|
|
197
|
+
--surface-hover: var(--surface-state-hover);
|
|
198
|
+
|
|
199
|
+
/* Focus ring + highlight */
|
|
200
|
+
--focus-ring: 0 0 0 0.2rem var(--surface-context-info);
|
|
201
|
+
--highlight-bg: var(--surface-state-selected);
|
|
202
|
+
--highlight-text-color: var(--text-neutral-default);
|
|
203
|
+
|
|
204
|
+
color-scheme: dark;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Yggdrasil Light - Semantic Tokens
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@import "./foundations.css";
|
|
6
|
+
@import "./prime-palette.css";
|
|
7
|
+
|
|
8
|
+
/* ==================== Semantic Tokens (Light Theme) ==================== */
|
|
9
|
+
:root {
|
|
10
|
+
/* Surfaces */
|
|
11
|
+
--surface-neutral-primary: var(--foundation-white);
|
|
12
|
+
--surface-neutral-secondary: var(--foundation-rock-050);
|
|
13
|
+
--surface-neutral-tertiary: var(--foundation-rock-100);
|
|
14
|
+
--surface-neutral-overlay: var(--foundation-darker-300);
|
|
15
|
+
|
|
16
|
+
--surface-brand-primary: var(--foundation-sky-700);
|
|
17
|
+
--surface-brand-secondary: var(--foundation-sky-600);
|
|
18
|
+
--surface-brand-accent: var(--foundation-berries-600);
|
|
19
|
+
--surface-brand-overlay: var(--foundation-lighter-200);
|
|
20
|
+
|
|
21
|
+
--surface-context-success: var(--foundation-forest-200);
|
|
22
|
+
--surface-context-warning: var(--foundation-sand-200);
|
|
23
|
+
--surface-context-danger: var(--foundation-berries-200);
|
|
24
|
+
--surface-context-info: var(--foundation-sea-200);
|
|
25
|
+
--surface-context-signal: var(--foundation-sea-300);
|
|
26
|
+
--surface-context-dangeractive: var(--foundation-berries-700);
|
|
27
|
+
|
|
28
|
+
--surface-input-primary: var(--foundation-white);
|
|
29
|
+
--surface-input-secondary: var(--foundation-rock-050);
|
|
30
|
+
|
|
31
|
+
/* Text */
|
|
32
|
+
--text-neutral-default: var(--foundation-sky-700);
|
|
33
|
+
--text-neutral-subdued: var(--foundation-rock-600);
|
|
34
|
+
--text-neutral-loud: var(--foundation-sky-900);
|
|
35
|
+
--text-neutral-disabled: var(--foundation-rock-400);
|
|
36
|
+
|
|
37
|
+
--text-state-interactive: var(--foundation-sky-600);
|
|
38
|
+
--text-state-selected: var(--foundation-sea-700);
|
|
39
|
+
|
|
40
|
+
--text-onsurface-onbrand: var(--foundation-white);
|
|
41
|
+
--text-onsurface-onaccent: var(--foundation-white);
|
|
42
|
+
--text-onsurface-oncontext: var(--foundation-sky-900);
|
|
43
|
+
--text-onsurface-oncontextactive: var(--foundation-white);
|
|
44
|
+
--text-onsurface-onsentiment: var(--foundation-white);
|
|
45
|
+
--text-onsurface-onhighlight: var(--foundation-sky-900);
|
|
46
|
+
|
|
47
|
+
--text-context-success: var(--foundation-forest-700);
|
|
48
|
+
--text-context-warning: var(--foundation-sand-700);
|
|
49
|
+
--text-context-danger: var(--foundation-berries-700);
|
|
50
|
+
|
|
51
|
+
/* Borders */
|
|
52
|
+
--border-neutral-default: var(--foundation-rock-200);
|
|
53
|
+
--border-neutral-subdued: var(--foundation-rock-100);
|
|
54
|
+
--border-neutral-loud: var(--foundation-rock-400);
|
|
55
|
+
--border-neutral-glassoutline: var(--foundation-rock-050);
|
|
56
|
+
|
|
57
|
+
--border-state-interactive: var(--foundation-sky-600);
|
|
58
|
+
--border-state-selected: var(--foundation-sea-700);
|
|
59
|
+
--border-state-focus: var(--foundation-sky-500);
|
|
60
|
+
|
|
61
|
+
--border-brand-brand: var(--foundation-sky-600);
|
|
62
|
+
--border-brand-onbrand: var(--foundation-darker-200);
|
|
63
|
+
|
|
64
|
+
--border-context-success: var(--foundation-forest-500);
|
|
65
|
+
--border-context-warning: var(--foundation-sand-400);
|
|
66
|
+
--border-context-danger: var(--foundation-berries-600);
|
|
67
|
+
--border-context-info: var(--foundation-sea-500);
|
|
68
|
+
--border-context-signal: var(--foundation-sea-600);
|
|
69
|
+
|
|
70
|
+
/* Icons */
|
|
71
|
+
--icon-neutral-default: var(--foundation-sky-700);
|
|
72
|
+
--icon-neutral-subdued: var(--foundation-rock-500);
|
|
73
|
+
--icon-neutral-loud: var(--foundation-sky-900);
|
|
74
|
+
--icon-neutral-disabled: var(--foundation-rock-400);
|
|
75
|
+
|
|
76
|
+
--icon-state-interactive: var(--foundation-sky-600);
|
|
77
|
+
--icon-state-selected: var(--foundation-sea-700);
|
|
78
|
+
|
|
79
|
+
--icon-onsurface-onbrand: var(--foundation-white);
|
|
80
|
+
--icon-onsurface-onaccent: var(--foundation-white);
|
|
81
|
+
--icon-onsurface-oncontext: var(--foundation-sky-900);
|
|
82
|
+
|
|
83
|
+
--icon-context-success: var(--foundation-forest-600);
|
|
84
|
+
--icon-context-warning: var(--foundation-sand-600);
|
|
85
|
+
--icon-context-danger: var(--foundation-berries-600);
|
|
86
|
+
--icon-context-info: var(--foundation-sea-600);
|
|
87
|
+
|
|
88
|
+
/* Elevation (Shadows) */
|
|
89
|
+
--elevation-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
90
|
+
--elevation-moderate: 0 4px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 8px -1px rgba(0, 0, 0, 0.06);
|
|
91
|
+
--elevation-elevated: 0 12px 16px -3px rgba(0, 0, 0, 0.1), 0 12px 16px -2px rgba(0, 0, 0, 0.05);
|
|
92
|
+
--elevation-high: 0 24px 32px -5px rgba(0, 0, 0, 0.1), 0 16px 16px -5px rgba(0, 0, 0, 0.04);
|
|
93
|
+
|
|
94
|
+
/* Severity aliases */
|
|
95
|
+
--severity-info-surface: var(--surface-context-info);
|
|
96
|
+
--severity-info-surface-tint: color-mix(in srgb, var(--surface-context-info) 70%, transparent);
|
|
97
|
+
--severity-info-border: var(--border-context-info);
|
|
98
|
+
--severity-info-text: var(--text-onsurface-oncontext);
|
|
99
|
+
--severity-info-icon: var(--icon-onsurface-oncontext);
|
|
100
|
+
|
|
101
|
+
--severity-success-surface: var(--surface-context-success);
|
|
102
|
+
--severity-success-surface-tint: color-mix(in srgb, var(--surface-context-success) 70%, transparent);
|
|
103
|
+
--severity-success-border: var(--border-context-success);
|
|
104
|
+
--severity-success-text: var(--text-onsurface-oncontext);
|
|
105
|
+
--severity-success-icon: var(--icon-onsurface-oncontext);
|
|
106
|
+
|
|
107
|
+
--severity-warn-surface: var(--surface-context-warning);
|
|
108
|
+
--severity-warn-surface-tint: color-mix(in srgb, var(--surface-context-warning) 70%, transparent);
|
|
109
|
+
--severity-warn-border: var(--border-context-warning);
|
|
110
|
+
--severity-warn-text: var(--text-onsurface-oncontext);
|
|
111
|
+
--severity-warn-icon: var(--icon-onsurface-oncontext);
|
|
112
|
+
|
|
113
|
+
--severity-error-surface: var(--surface-context-danger);
|
|
114
|
+
--severity-error-surface-tint: color-mix(in srgb, var(--surface-context-danger) 70%, transparent);
|
|
115
|
+
--severity-error-border: var(--border-context-danger);
|
|
116
|
+
--severity-error-text: var(--text-onsurface-oncontext);
|
|
117
|
+
--severity-error-icon: var(--icon-onsurface-oncontext);
|
|
118
|
+
|
|
119
|
+
--severity-danger-surface: var(--surface-context-danger);
|
|
120
|
+
--severity-danger-surface-tint: color-mix(in srgb, var(--surface-context-danger) 70%, transparent);
|
|
121
|
+
--severity-danger-border: var(--border-context-danger);
|
|
122
|
+
--severity-danger-text: var(--text-context-danger);
|
|
123
|
+
--severity-danger-icon: var(--icon-context-danger);
|
|
124
|
+
|
|
125
|
+
/* Charts + misc (copied straight from your semantic-dark list) */
|
|
126
|
+
--charts-boolean-primary: var(--charts-aquamarine-300);
|
|
127
|
+
--charts-boolean-primaryemphasis: var(--charts-charoite-600);
|
|
128
|
+
--charts-boolean-secondary: var(--charts-sapphire-300);
|
|
129
|
+
--charts-boolean-secondaryemphasis: var(--charts-garnet-300);
|
|
130
|
+
--charts-boolean-diminish: var(--foundation-rock-500);
|
|
131
|
+
--charts-boolean-subdued: var(--foundation-rock-500);
|
|
132
|
+
|
|
133
|
+
--charts-sentiment-positve: var(--charts-emerald-500);
|
|
134
|
+
--charts-sentiment-neutral: var(--charts-topaz-300);
|
|
135
|
+
--charts-sentiment-negative: var(--charts-ruby-500);
|
|
136
|
+
--charts-sentiment-undefined: var(--foundation-rock-400);
|
|
137
|
+
|
|
138
|
+
--charts-scale-scale-0: var(--charts-sapphire-800);
|
|
139
|
+
--charts-scale-scale-1: var(--charts-sapphire-700);
|
|
140
|
+
--charts-scale-scale-2: var(--charts-sapphire-600);
|
|
141
|
+
--charts-scale-scale-3: var(--charts-sapphire-500);
|
|
142
|
+
--charts-scale-scale-4: var(--charts-sapphire-300);
|
|
143
|
+
--charts-scale-scale-5: var(--charts-sapphire-100);
|
|
144
|
+
|
|
145
|
+
--charts-category-chart-1: var(--charts-aquamarine-300);
|
|
146
|
+
--charts-category-chart-2: var(--charts-amber-100);
|
|
147
|
+
--charts-category-chart-3: var(--charts-garnet-500);
|
|
148
|
+
--charts-category-chart-4: var(--charts-charoite-500);
|
|
149
|
+
--charts-category-chart-5: var(--charts-sapphire-300);
|
|
150
|
+
--charts-category-chart-6: var(--charts-amethyst-500);
|
|
151
|
+
--charts-category-chart-7: var(--charts-aquamarine-600);
|
|
152
|
+
--charts-category-chart-8: var(--charts-amber-600);
|
|
153
|
+
--charts-category-chart-9: var(--charts-garnet-700);
|
|
154
|
+
--charts-category-chart-10: var(--charts-charoite-700);
|
|
155
|
+
--charts-category-chart-11: var(--charts-sapphire-700);
|
|
156
|
+
--charts-category-chart-12: var(--charts-amethyst-700);
|
|
157
|
+
|
|
158
|
+
--charts-scaffolding-border: var(--foundation-rock-200);
|
|
159
|
+
|
|
160
|
+
--surface-services-social: var(--foundation-sea-200);
|
|
161
|
+
--surface-services-editorial: var(--foundation-sand-200);
|
|
162
|
+
--surface-services-business: var(--foundation-rock-300);
|
|
163
|
+
--surface-services-analysis: var(--foundation-sky-300);
|
|
164
|
+
--surface-services-mobile: var(--foundation-berries-300);
|
|
165
|
+
|
|
166
|
+
--surface-state-hover: var(--foundation-rock-100);
|
|
167
|
+
--surface-state-selected: var(--foundation-sky-100);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
/* ==================== PrimeReact Theme Mappings ==================== */
|
|
171
|
+
:root {
|
|
172
|
+
--font-family: "Roboto", Arial, sans-serif;
|
|
173
|
+
|
|
174
|
+
/* Prime "surface" slots */
|
|
175
|
+
--surface-a: var(--surface-neutral-primary);
|
|
176
|
+
--surface-b: var(--surface-neutral-secondary);
|
|
177
|
+
--surface-c: var(--surface-neutral-tertiary);
|
|
178
|
+
--surface-d: var(--border-neutral-subdued);
|
|
179
|
+
--surface-e: var(--surface-neutral-primary);
|
|
180
|
+
--surface-f: var(--surface-neutral-primary);
|
|
181
|
+
|
|
182
|
+
/* Text */
|
|
183
|
+
--text-color: var(--text-neutral-default);
|
|
184
|
+
--text-color-secondary: var(--text-neutral-subdued);
|
|
185
|
+
|
|
186
|
+
/* Primary actions */
|
|
187
|
+
--primary-color: var(--surface-brand-primary);
|
|
188
|
+
--primary-color-text: var(--text-onsurface-onbrand);
|
|
189
|
+
|
|
190
|
+
/* Background helpers */
|
|
191
|
+
--surface-ground: var(--surface-neutral-secondary);
|
|
192
|
+
--surface-section: var(--surface-neutral-primary);
|
|
193
|
+
--surface-card: var(--surface-neutral-primary);
|
|
194
|
+
--surface-overlay: var(--surface-neutral-primary);
|
|
195
|
+
|
|
196
|
+
/* Borders + hover */
|
|
197
|
+
--surface-border: var(--border-neutral-default);
|
|
198
|
+
--surface-hover: var(--surface-state-hover);
|
|
199
|
+
|
|
200
|
+
/* Focus ring + highlight */
|
|
201
|
+
--focus-ring: 0 0 0 0.2rem var(--surface-context-info);
|
|
202
|
+
--highlight-bg: var(--surface-state-selected);
|
|
203
|
+
--highlight-text-color: var(--text-neutral-default);
|
|
204
|
+
|
|
205
|
+
color-scheme: light;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
|
package/docs/Fixes.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# Prime Yggdrasil npm Package Issues
|
|
2
|
+
|
|
3
|
+
## Critical Issues Found
|
|
4
|
+
|
|
5
|
+
### 1. **Broken CSS Build** (CRITICAL - Blocks Usage)
|
|
6
|
+
|
|
7
|
+
**Package Version:** `@lifeonlars/prime-yggdrasil@0.1.1`
|
|
8
|
+
|
|
9
|
+
**Problem:**
|
|
10
|
+
The `yggdrasil-light.css` and `yggdrasil-dark.css` files contain `@import` statements that reference CSS files that don't exist in the published package.
|
|
11
|
+
|
|
12
|
+
**yggdrasil-light.css contains:**
|
|
13
|
+
|
|
14
|
+
```css
|
|
15
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:...');
|
|
16
|
+
@import "./foundations.css"; ✅ EXISTS
|
|
17
|
+
@import "./radius.css"; ❌ MISSING
|
|
18
|
+
@import "./semantic-light.css"; ❌ MISSING
|
|
19
|
+
@import "./components.css"; ❌ MISSING
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
**Files in dist folder:**
|
|
23
|
+
|
|
24
|
+
- ✅ `foundations.css` (6KB, contains foundation color tokens)
|
|
25
|
+
- ✅ `yggdrasil-light.css` (401 bytes, just imports)
|
|
26
|
+
- ✅ `yggdrasil-dark.css` (399 bytes, just imports)
|
|
27
|
+
- ❌ `radius.css` (MISSING)
|
|
28
|
+
- ❌ `semantic-light.css` (MISSING)
|
|
29
|
+
- ❌ `semantic-dark.css` (MISSING)
|
|
30
|
+
- ❌ `components.css` (MISSING)
|
|
31
|
+
|
|
32
|
+
**Impact:**
|
|
33
|
+
|
|
34
|
+
- Cannot use the theme as documented
|
|
35
|
+
- Importing `@lifeonlars/prime-yggdrasil/yggdrasil-light.css` fails silently or throws errors
|
|
36
|
+
- Semantic tokens referenced in documentation are not available
|
|
37
|
+
|
|
38
|
+
**Root Cause:**
|
|
39
|
+
The Vite build configuration is not properly bundling CSS files. The `@import` statements are being left as-is instead of:
|
|
40
|
+
|
|
41
|
+
1. Being resolved and bundled into a single file, OR
|
|
42
|
+
2. Having the referenced files copied to the dist folder
|
|
43
|
+
|
|
44
|
+
## Recommended Fixes
|
|
45
|
+
|
|
46
|
+
### Option 1: Bundle All Imports (Recommended)
|
|
47
|
+
|
|
48
|
+
Update `vite.config.lib.ts` to use PostCSS with the `postcss-import` plugin to inline all `@import` statements:
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
// vite.config.lib.ts
|
|
52
|
+
import { defineConfig } from 'vite';
|
|
53
|
+
import postcssImport from 'postcss-import';
|
|
54
|
+
|
|
55
|
+
export default defineConfig({
|
|
56
|
+
css: {
|
|
57
|
+
postcss: {
|
|
58
|
+
plugins: [postcssImport()],
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
build: {
|
|
62
|
+
lib: {
|
|
63
|
+
// ... existing config
|
|
64
|
+
},
|
|
65
|
+
cssCodeSplit: false, // Bundle all CSS into one file
|
|
66
|
+
},
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Option 2: Copy All Referenced Files
|
|
71
|
+
|
|
72
|
+
Update the build script to copy all referenced CSS files to dist:
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"scripts": {
|
|
77
|
+
"build": "tsc -p tsconfig.lib.json && vite build --config vite.config.lib.ts && npm run copy-css",
|
|
78
|
+
"copy-css": "cp src/theme/radius.css src/theme/semantic-light.css src/theme/semantic-dark.css src/theme/components.css dist/"
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Option 3: Update Package Exports
|
|
84
|
+
|
|
85
|
+
If the files are supposed to be separate, update the build to include them and update package.json exports:
|
|
86
|
+
|
|
87
|
+
```json
|
|
88
|
+
{
|
|
89
|
+
"exports": {
|
|
90
|
+
"./radius.css": "./dist/radius.css",
|
|
91
|
+
"./semantic-light.css": "./dist/semantic-light.css",
|
|
92
|
+
"./semantic-dark.css": "./dist/semantic-dark.css",
|
|
93
|
+
"./components.css": "./dist/components.css"
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Current Workaround in This Project
|
|
99
|
+
|
|
100
|
+
Since the Yggdrasil theme is broken, this project uses:
|
|
101
|
+
|
|
102
|
+
- PrimeReact's base `lara-light-blue` theme
|
|
103
|
+
- Yggdrasil's `foundations.css` (for foundation color tokens)
|
|
104
|
+
|
|
105
|
+
See [src/main.tsx](src/main.tsx:3-8) for the workaround implementation.
|
|
106
|
+
|
|
107
|
+
## Testing Checklist for Fixed Package
|
|
108
|
+
|
|
109
|
+
When the package is fixed, verify:
|
|
110
|
+
|
|
111
|
+
- [ ] `yggdrasil-light.css` loads without errors
|
|
112
|
+
- [ ] `yggdrasil-dark.css` loads without errors
|
|
113
|
+
- [ ] All semantic tokens are available (--text-neutral-default, --surface-brand-primary, etc.)
|
|
114
|
+
- [ ] PrimeReact components are properly styled
|
|
115
|
+
- [ ] Dark mode switching works
|
|
116
|
+
- [ ] No 404 errors in browser console for CSS files
|
|
117
|
+
|
|
118
|
+
## Additional Notes
|
|
119
|
+
|
|
120
|
+
- The package.json version shows `0.1.1`, which suggests this is an early release
|
|
121
|
+
- Documentation references Storybook but no Storybook URL is provided
|
|
122
|
+
- The foundations.css works correctly and contains all expected foundation tokens
|
|
123
|
+
- The JS exports (version, theme metadata) work correctly
|
package/package.json
CHANGED