@akcelik/strct 4.25.0 → 5.0.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/fesm2022/akcelik-strct.mjs +4 -4
  2. package/fesm2022/akcelik-strct.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/_tokens.scss +25 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akcelik/strct",
3
- "version": "4.25.0",
3
+ "version": "5.0.0",
4
4
  "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
5
5
  "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
6
6
  "license": "MIT",
package/styles/_tokens.scss CHANGED
@@ -5,7 +5,13 @@
5
5
  // re-skins the entire component tree.
6
6
  //
7
7
  // Token groups:
8
- // --bg-0..--bg-a surfaces (lowest -> raised/active) --hdr header surface
8
+ // --bg-0..--bg-a surfaces by ROLE, not by lightness:
9
+ // --bg-0 page ground · --bg-1 raised surface (card, menu,
10
+ // window) · --bg-2 recessed fill (input, track, chip) ·
11
+ // --bg-3/h/a fills for rest / hover / active.
12
+ // A raised surface is lighter than its ground in BOTH
13
+ // themes, so a card never reads as sunk into the page.
14
+ // --hdr header surface
9
15
  // --b1/--b2/--b3 hairline -> strong borders
10
16
  // --t1..--t4 text (primary -> faint) --inv inverse text
11
17
  // --acc + acc-* accent and its translucent tints
@@ -61,8 +67,8 @@
61
67
  --chart-6: #d95926;
62
68
  --chart-7: #9085e9;
63
69
  --chart-8: #e66767;
64
- --bg-1: #161920;
65
- --bg-2: #1c2028;
70
+ --bg-1: #1c2028;
71
+ --bg-2: #161920;
66
72
  --bg-3: #23282f;
67
73
  --bg-h: #272c35;
68
74
  --bg-a: #2e343e;
@@ -88,7 +94,7 @@
88
94
  --critical-bg: rgba(184, 120, 114, 0.12);
89
95
  --hdr: #12141a;
90
96
  --hdr-fg: rgba(255, 255, 255, 0.9);
91
- --sh: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--b1);
97
+ --sh: 0 1px 3px rgba(0, 0, 0, 0.5);
92
98
  --shh: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--b2);
93
99
  --sb: rgba(255, 255, 255, 0.08);
94
100
  --dn: rgba(255, 255, 255, 0.06);
@@ -131,8 +137,8 @@
131
137
  --chart-6: #eb6834;
132
138
  --chart-7: #4a3aa7;
133
139
  --chart-8: #e34948;
134
- --bg-1: #fbfcfd;
135
- --bg-2: #f8f9fb;
140
+ --bg-1: #ffffff;
141
+ --bg-2: #f4f6f8;
136
142
  --bg-3: #eef0f3;
137
143
  --bg-h: #f0f1f4;
138
144
  --bg-a: #e6e8ec;
@@ -158,7 +164,7 @@
158
164
  --critical-bg: rgba(160, 99, 92, 0.12);
159
165
  --hdr: #1c2330;
160
166
  --hdr-fg: rgba(255, 255, 255, 0.9);
161
- --sh: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--b1);
167
+ --sh: 0 1px 3px rgba(0, 0, 0, 0.06);
162
168
  --shh: 0 4px 14px rgba(0, 0, 0, 0.09), 0 0 0 1px var(--b2);
163
169
  --sb: rgba(0, 0, 0, 0.1);
164
170
  --dn: rgba(0, 0, 0, 0.04);
@@ -201,8 +207,8 @@
201
207
  --chart-6: #d95926;
202
208
  --chart-7: #9085e9;
203
209
  --chart-8: #e66767;
204
- --bg-1: #1a1714;
205
- --bg-2: #211e1a;
210
+ --bg-1: #211e1a;
211
+ --bg-2: #1a1714;
206
212
  --bg-3: #2a2621;
207
213
  --bg-h: #302b25;
208
214
  --bg-a: #37312a;
@@ -228,7 +234,7 @@
228
234
  --critical-bg: rgba(191, 126, 114, 0.12);
229
235
  --hdr: #15120f;
230
236
  --hdr-fg: rgba(255, 255, 255, 0.9);
231
- --sh: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--b1);
237
+ --sh: 0 1px 3px rgba(0, 0, 0, 0.5);
232
238
  --shh: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--b2);
233
239
  --sb: rgba(255, 235, 210, 0.08);
234
240
  --dn: rgba(255, 235, 210, 0.05);
@@ -271,8 +277,8 @@
271
277
  --chart-6: #eb6834;
272
278
  --chart-7: #4a3aa7;
273
279
  --chart-8: #e34948;
274
- --bg-1: #fdfcfa;
275
- --bg-2: #f9f7f4;
280
+ --bg-1: #fffefc;
281
+ --bg-2: #f5f2ed;
276
282
  --bg-3: #f0ece7;
277
283
  --bg-h: #eee9e3;
278
284
  --bg-a: #e5e0d8;
@@ -298,7 +304,7 @@
298
304
  --critical-bg: rgba(160, 96, 90, 0.12);
299
305
  --hdr: #2a2118;
300
306
  --hdr-fg: rgba(255, 255, 255, 0.9);
301
- --sh: 0 1px 3px rgba(40, 25, 10, 0.07), 0 0 0 1px var(--b1);
307
+ --sh: 0 1px 3px rgba(40, 25, 10, 0.07);
302
308
  --shh: 0 4px 14px rgba(40, 25, 10, 0.1), 0 0 0 1px var(--b2);
303
309
  --sb: rgba(60, 40, 20, 0.1);
304
310
  --dn: rgba(60, 40, 20, 0.04);
@@ -341,8 +347,8 @@
341
347
  --chart-6: #d95926;
342
348
  --chart-7: #9085e9;
343
349
  --chart-8: #e66767;
344
- --bg-1: #141a17;
345
- --bg-2: #1a211e;
350
+ --bg-1: #1a211e;
351
+ --bg-2: #141a17;
346
352
  --bg-3: #222a26;
347
353
  --bg-h: #283530;
348
354
  --bg-a: #2f3b36;
@@ -368,7 +374,7 @@
368
374
  --critical-bg: rgba(176, 122, 116, 0.12);
369
375
  --hdr: #101815;
370
376
  --hdr-fg: rgba(255, 255, 255, 0.9);
371
- --sh: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--b1);
377
+ --sh: 0 1px 3px rgba(0, 0, 0, 0.5);
372
378
  --shh: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--b2);
373
379
  --sb: rgba(210, 240, 225, 0.08);
374
380
  --dn: rgba(210, 240, 225, 0.05);
@@ -411,8 +417,8 @@
411
417
  --chart-6: #eb6834;
412
418
  --chart-7: #4a3aa7;
413
419
  --chart-8: #e34948;
414
- --bg-1: #fafcfb;
415
- --bg-2: #f5f8f6;
420
+ --bg-1: #fdfffe;
421
+ --bg-2: #f1f5f2;
416
422
  --bg-3: #eaf0ec;
417
423
  --bg-h: #e8eeea;
418
424
  --bg-a: #dfe6e1;
@@ -438,7 +444,7 @@
438
444
  --critical-bg: rgba(154, 94, 88, 0.12);
439
445
  --hdr: #1a2820;
440
446
  --hdr-fg: rgba(255, 255, 255, 0.9);
441
- --sh: 0 1px 3px rgba(10, 30, 20, 0.07), 0 0 0 1px var(--b1);
447
+ --sh: 0 1px 3px rgba(10, 30, 20, 0.07);
442
448
  --shh: 0 4px 14px rgba(10, 30, 20, 0.1), 0 0 0 1px var(--b2);
443
449
  --sb: rgba(20, 60, 40, 0.1);
444
450
  --dn: rgba(20, 60, 40, 0.04);