anentrypoint-design 0.0.11 → 0.0.13

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/dist/247420.app.js +2 -2
  2. package/dist/247420.css +120 -125
  3. package/dist/247420.js +4 -4
  4. package/package.json +1 -1
package/dist/247420.css CHANGED
@@ -157,22 +157,22 @@
157
157
  Loads before any consumer rule; all var(--*) refs resolve.
158
158
  ============================================================ */
159
159
  .ds-247420 {
160
- --paper: #EFE9DD;
161
- --ink: #0B0B09;
162
- --acid: #B8FF00;
163
- --link: #1F4DFF;
164
- --warn: #FF3B1F;
165
- --live: #00A86B;
166
-
167
- --green: #247420;
168
- --green-2: #92CEAC;
169
- --green-deep: #1c5a19;
160
+ --paper: #F5F0E4;
161
+ --ink: #1F1B16;
162
+ --acid: #C8FF4D;
163
+ --link: #3A66FF;
164
+ --warn: #FF6B4A;
165
+ --live: #2BB07F;
166
+
167
+ --green: #3F8A4A;
168
+ --green-2: #B6DEC1;
169
+ --green-deep: #2B6B36;
170
170
  --green-fg: #FFFFFF;
171
- --purple: #420247;
171
+ --purple: #6B3A78;
172
172
  --purple-fg: #FFFFFF;
173
- --mascot: #E84B8A;
173
+ --mascot: #F07AA8;
174
174
  --mascot-fg: #FFFFFF;
175
- --sun: #FFD100;
175
+ --sun: #FFD86B;
176
176
 
177
177
  --ff-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
178
178
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -192,14 +192,14 @@
192
192
  --surface-2: rgba(0,0,0,0.04);
193
193
  --surface-ink-2: rgba(255,255,255,0.06);
194
194
 
195
- --r-1: 0;
196
- --r-2: 0;
197
- --r-3: 0;
195
+ --r-1: 6px;
196
+ --r-2: 10px;
197
+ --r-3: 18px;
198
198
  --r-pill: 9999px;
199
199
 
200
200
  /* Extended brand palette */
201
- --flame: #FF5C1A;
202
- --sky: #3B82F6;
201
+ --flame: #FF8454;
202
+ --sky: #6FA9FF;
203
203
 
204
204
  /* Foreground / background aliases — resolved after panel tokens are set;
205
205
  these are reset below once panel tokens exist, but raw defaults here
@@ -343,12 +343,11 @@
343
343
  }
344
344
  .ds-247420 .prose p { margin: 0 0 var(--space-4) 0; }
345
345
 
346
- /* Label — mono caps, terminal voice */
346
+ /* Label — mono, gentle */
347
347
  .ds-247420 .t-label {
348
348
  font-family: var(--ff-mono);
349
349
  font-size: var(--fs-xs);
350
- text-transform: uppercase;
351
- letter-spacing: var(--tr-label);
350
+ letter-spacing: 0.02em;
352
351
  font-weight: 500;
353
352
  }
354
353
 
@@ -363,8 +362,7 @@
363
362
  .ds-247420 .t-micro {
364
363
  font-family: var(--ff-mono);
365
364
  font-size: var(--fs-micro);
366
- letter-spacing: var(--tr-label);
367
- text-transform: uppercase;
365
+ letter-spacing: 0.02em;
368
366
  color: var(--fg-3);
369
367
  }
370
368
 
@@ -449,16 +447,15 @@
449
447
  .ds-247420 .stamp {
450
448
  display: inline-block;
451
449
  padding: var(--space-1) var(--space-3);
452
-
450
+
453
451
  border-radius: var(--r-pill);
454
452
  color: var(--fg);
455
453
  background: transparent;
456
454
  font-family: var(--ff-mono);
457
455
  font-size: var(--fs-tiny);
458
- letter-spacing: var(--tr-label);
459
- text-transform: uppercase;
456
+ letter-spacing: 0.02em;
460
457
  font-weight: 600;
461
- transform: rotate(-2deg);
458
+ transform: none;
462
459
  }
463
460
  .ds-247420 .stamp.ink { background: var(--fg); color: var(--bg); }
464
461
  .ds-247420 .stamp.green { background: var(--green); color: var(--green-fg); }
@@ -475,68 +472,66 @@
475
472
  display: inline-flex;
476
473
  align-items: center;
477
474
  gap: var(--space-2);
478
- padding: var(--space-3) var(--space-4);
475
+ padding: var(--space-3) var(--space-5);
479
476
  background: var(--fg);
480
477
  color: var(--bg);
481
-
482
- border-radius: var(--r-2);
483
- box-shadow: 4px 4px 0 var(--fg);
478
+
479
+ border-radius: var(--r-pill);
480
+ box-shadow: 0 2px 0 rgba(0,0,0,0.08);
484
481
  font-family: var(--ff-mono);
485
482
  font-weight: 600;
486
483
  font-size: var(--fs-sm);
487
- text-transform: uppercase;
488
- letter-spacing: var(--tr-caps);
484
+ letter-spacing: 0.01em;
489
485
  text-decoration: none;
490
486
  cursor: pointer;
491
- transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
487
+ transition: transform var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease), filter var(--dur-snap) var(--ease);
492
488
  }
493
- .ds-247420 .btn-stamp:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--fg); }
494
- .ds-247420 .btn-stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--fg); }
489
+ .ds-247420 .btn-stamp:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(0,0,0,0.10); filter: brightness(1.04); }
490
+ .ds-247420 .btn-stamp:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.10); }
495
491
 
496
- .ds-247420 .btn-stamp.green { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); }
497
- .ds-247420 .btn-stamp.purple { background: var(--purple); color: var(--purple-fg); box-shadow: 4px 4px 0 var(--ink); }
498
- .ds-247420 .btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg); box-shadow: 4px 4px 0 var(--ink); }
499
- .ds-247420 .btn-stamp.sun { background: var(--sun); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
500
- .ds-247420 .btn-stamp.flame { background: var(--flame); color: var(--paper); box-shadow: 4px 4px 0 var(--ink); }
501
- .ds-247420 .btn-stamp.acid { background: var(--green); color: var(--green-fg); box-shadow: 4px 4px 0 var(--ink); } /* legacy */
492
+ .ds-247420 .btn-stamp.green { background: var(--green); color: var(--green-fg); }
493
+ .ds-247420 .btn-stamp.purple { background: var(--purple); color: var(--purple-fg); }
494
+ .ds-247420 .btn-stamp.mascot { background: var(--mascot); color: var(--mascot-fg); }
495
+ .ds-247420 .btn-stamp.sun { background: var(--sun); color: var(--ink); }
496
+ .ds-247420 .btn-stamp.flame { background: var(--flame); color: var(--paper); }
497
+ .ds-247420 .btn-stamp.acid { background: var(--green); color: var(--green-fg); }
502
498
 
503
499
  /* Plain button — default */
504
500
  .ds-247420 .btn {
505
501
  display: inline-flex;
506
502
  align-items: center;
507
503
  gap: var(--space-2);
508
- padding: var(--space-3) var(--space-4);
509
- background: transparent;
504
+ padding: var(--space-3) var(--space-5);
505
+ background: var(--bg-2);
510
506
  color: var(--fg);
511
-
512
- border-radius: var(--r-2);
507
+
508
+ border-radius: var(--r-pill);
513
509
  font-family: var(--ff-mono);
514
510
  font-weight: 500;
515
511
  font-size: var(--fs-sm);
516
- text-transform: uppercase;
517
- letter-spacing: var(--tr-caps);
512
+ letter-spacing: 0.01em;
518
513
  text-decoration: none;
519
514
  cursor: pointer;
520
- transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
515
+ transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
521
516
  }
522
- .ds-247420 .btn:hover { background: var(--fg); color: var(--bg); }
523
- .ds-247420 .btn:active { background: var(--green); color: var(--green-fg); }
517
+ .ds-247420 .btn:hover { background: var(--green-2); color: var(--ink); }
518
+ .ds-247420 .btn:active { background: var(--green); color: var(--green-fg); }
524
519
 
525
520
  /* Ghost/link button */
526
521
  .ds-247420 .btn-ghost {
527
522
  background: transparent;
528
-
523
+
529
524
  color: var(--fg);
530
525
  font-family: var(--ff-mono);
531
526
  font-size: var(--fs-sm);
532
- text-transform: uppercase;
533
- letter-spacing: var(--tr-caps);
534
- padding: var(--space-2) 0;
527
+ letter-spacing: 0.01em;
528
+ padding: var(--space-2) var(--space-3);
529
+ border-radius: var(--r-pill);
535
530
  cursor: pointer;
536
- text-decoration: underline;
537
- text-underline-offset: 4px;
531
+ text-decoration: none;
532
+ transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
538
533
  }
539
- .ds-247420 .btn-ghost:hover { color: var(--green-fg); background: var(--green); }
534
+ .ds-247420 .btn-ghost:hover { color: var(--ink); background: var(--green-2); }
540
535
 
541
536
  /* Input — softened: full border, rounded, 2px default */
542
537
  .ds-247420 .input {
@@ -569,11 +564,11 @@
569
564
  align-items: baseline;
570
565
  gap: var(--space-4);
571
566
  padding-bottom: var(--space-2);
572
-
567
+
573
568
  font-family: var(--ff-mono);
574
569
  font-size: var(--fs-xs);
575
- text-transform: uppercase;
576
- letter-spacing: var(--tr-label);
570
+ letter-spacing: 0.02em;
571
+ color: var(--fg-3);
577
572
  }
578
573
  .ds-247420 .dateline > * { white-space: nowrap; }
579
574
  .ds-247420 .dateline .spread { flex: 1; align-self: center; }
@@ -592,21 +587,22 @@
592
587
  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
593
588
  }
594
589
  .ds-247420 .row + .row { margin-top: var(--space-2); margin-bottom: 0; }
595
- .ds-247420 .row .row-code { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--mono-1); }
590
+ .ds-247420 .row .row-code { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--mono-1); }
596
591
  .ds-247420 .row .row-title { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
597
- .ds-247420 .row .row-meta { font-family: var(--ff-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
598
- .ds-247420 .row:hover { background: var(--green); color: var(--green-fg); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
599
- .ds-247420 .row:hover .row-code { color: var(--sun); }
600
- .ds-247420 .row:hover .row-meta { color: var(--green-fg); }
592
+ .ds-247420 .row .row-meta { font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--fg-3); }
593
+ .ds-247420 .row:hover { background: var(--green-2); color: var(--ink); }
594
+ .ds-247420 .row:hover .row-code { color: var(--green-deep); }
595
+ .ds-247420 .row:hover .row-meta { color: var(--ink); }
601
596
 
602
597
  /* Soft card — the generic container */
603
598
  .ds-247420 .card {
604
-
599
+
605
600
  border-radius: var(--r-3);
606
601
  background: var(--bg);
607
602
  padding: var(--space-5);
603
+ box-shadow: var(--panel-shadow, none);
608
604
  }
609
- .ds-247420 .card.chunk { }
605
+ .ds-247420 .card.chunk { }
610
606
 
611
607
  /* ============================================================
612
608
  Selection
@@ -619,33 +615,33 @@
619
615
  Light default. Dark via prefers-color-scheme or [data-theme="dark"].
620
616
  ============================================================ */
621
617
  .ds-247420 {
622
- --panel-0: var(--paper); /* #EFE9DD canvas */
623
- --panel-1: #f6f1e7;
624
- --panel-2: #ece5d8;
625
- --panel-3: #ddd4c3;
626
- --panel-hover: #e3dccb;
627
- --panel-select: #c9e8c5;
628
- --panel-text: var(--ink); /* #0B0B09 */
629
- --panel-text-2: #4a473f;
630
- --panel-text-3: #6d675b;
618
+ --panel-0: var(--paper); /* warm canvas */
619
+ --panel-1: #FBF6EB;
620
+ --panel-2: #F0E9DA;
621
+ --panel-3: #E3DAC7;
622
+ --panel-hover: #EBE1CD;
623
+ --panel-select: #D8ECCB;
624
+ --panel-text: var(--ink);
625
+ --panel-text-2: #5A5246;
626
+ --panel-text-3: #857B6C;
631
627
  --panel-accent: var(--green);
632
628
  --panel-accent-2: var(--green-deep);
633
629
  --panel-accent-fg: #ffffff;
634
- --panel-shadow: none;
630
+ --panel-shadow: 0 1px 2px rgba(31,27,22,0.04);
635
631
  --panel-shadow-top: none;
636
632
  }
637
633
 
638
634
  @media (prefers-color-scheme: dark) {
639
635
  .ds-247420 {
640
- --panel-0: #131517;
641
- --panel-1: #1b1d20;
642
- --panel-2: #23262a;
643
- --panel-3: #2d3035;
644
- --panel-hover: #2d3035;
645
- --panel-select: #1f3a2a;
646
- --panel-text: #e8eaee;
647
- --panel-text-2: #b6bac1;
648
- --panel-text-3: #868c95;
636
+ --panel-0: #1A1B1E;
637
+ --panel-1: #232428;
638
+ --panel-2: #2B2D31;
639
+ --panel-3: #36383E;
640
+ --panel-hover: #36383E;
641
+ --panel-select: #29402F;
642
+ --panel-text: #ECEEF2;
643
+ --panel-text-2: #BFC3CB;
644
+ --panel-text-3: #92979F;
649
645
  --panel-accent: var(--green-2);
650
646
  --panel-accent-2: var(--green-2);
651
647
  --panel-accent-fg: var(--ink);
@@ -655,15 +651,15 @@
655
651
  }
656
652
 
657
653
  .ds-247420 [data-theme="dark"] {
658
- --panel-0: #131517;
659
- --panel-1: #1b1d20;
660
- --panel-2: #23262a;
661
- --panel-3: #2d3035;
662
- --panel-hover: #2d3035;
663
- --panel-select: #1f3a2a;
664
- --panel-text: #e8eaee;
665
- --panel-text-2: #b6bac1;
666
- --panel-text-3: #868c95;
654
+ --panel-0: #1A1B1E;
655
+ --panel-1: #232428;
656
+ --panel-2: #2B2D31;
657
+ --panel-3: #36383E;
658
+ --panel-hover: #36383E;
659
+ --panel-select: #29402F;
660
+ --panel-text: #ECEEF2;
661
+ --panel-text-2: #BFC3CB;
662
+ --panel-text-3: #92979F;
667
663
  --panel-accent: var(--green-2);
668
664
  --panel-accent-2: var(--green-2);
669
665
  --panel-accent-fg: var(--ink);
@@ -673,11 +669,11 @@
673
669
 
674
670
  .ds-247420 [data-theme="light"] {
675
671
  --panel-0: var(--paper);
676
- --panel-1: #f6f1e7;
677
- --panel-2: #ece5d8;
678
- --panel-3: #ddd4c3;
679
- --panel-hover: #e3dccb;
680
- --panel-select: #c9e8c5;
672
+ --panel-1: #FBF6EB;
673
+ --panel-2: #F0E9DA;
674
+ --panel-3: #E3DAC7;
675
+ --panel-hover: #EBE1CD;
676
+ --panel-select: #D8ECCB;
681
677
  --panel-text: var(--ink);
682
678
  --panel-text-2: #4a473f;
683
679
  --panel-text-3: #6d675b;
@@ -885,12 +881,11 @@
885
881
  height: 100%;
886
882
  }
887
883
  .ds-247420 .app-side .group {
888
- padding: 12px 16px 4px 16px;
884
+ padding: 14px 18px 6px 18px;
889
885
  font-family: var(--ff-mono);
890
- font-size: 11px;
891
- text-transform: uppercase;
892
- letter-spacing: 0.08em;
893
- color: var(--panel-text-2);
886
+ font-size: 12px;
887
+ letter-spacing: 0.01em;
888
+ color: var(--panel-text-3);
894
889
  font-weight: 600;
895
890
  }
896
891
  .ds-247420 .app-side a {
@@ -937,12 +932,11 @@
937
932
  }
938
933
  .ds-247420 .app-main h3 {
939
934
  font-family: var(--ff-mono);
940
- font-size: 12px;
935
+ font-size: 13px;
941
936
  font-weight: 600;
942
937
  margin: 24px 0 8px 0;
943
938
  color: var(--panel-accent);
944
- text-transform: uppercase;
945
- letter-spacing: 0.08em;
939
+ letter-spacing: 0.01em;
946
940
  }
947
941
  .ds-247420 .app-main p {
948
942
  margin: 0 0 12px 0;
@@ -989,18 +983,19 @@
989
983
  /* Panel — grouped content block, flat tonal surface */
990
984
  .ds-247420 .panel {
991
985
  background: var(--panel-1);
992
- border-radius: 16px;
986
+ border-radius: 20px;
993
987
  overflow: hidden;
994
988
  margin: 16px 0;
989
+ box-shadow: var(--panel-shadow, none);
995
990
  }
996
991
  .ds-247420 .panel-head {
997
- padding: 12px 20px;
992
+ padding: 14px 22px;
998
993
  background: var(--panel-1);
999
994
  font-family: var(--ff-mono);
1000
- font-size: 11px;
1001
- text-transform: uppercase;
1002
- letter-spacing: 0.08em;
995
+ font-size: 13px;
996
+ letter-spacing: 0.005em;
1003
997
  color: var(--panel-text-2);
998
+ font-weight: 600;
1004
999
  display: flex;
1005
1000
  justify-content: space-between;
1006
1001
  align-items: center;
@@ -1039,9 +1034,10 @@
1039
1034
  /* List — dense single-line item set, full-bleed. Drop into .app-main directly. */
1040
1035
  .ds-247420 .list {
1041
1036
  background: var(--panel-1);
1042
- border-radius: 16px;
1037
+ border-radius: 20px;
1043
1038
  overflow: hidden;
1044
1039
  margin: 8px 0;
1040
+ box-shadow: var(--panel-shadow, none);
1045
1041
  }
1046
1042
  .ds-247420 .list-row {
1047
1043
  display: grid;
@@ -1288,9 +1284,8 @@
1288
1284
  background: var(--panel-2);
1289
1285
  color: var(--panel-text-2);
1290
1286
  cursor: pointer;
1291
- font-size: 11px;
1292
- text-transform: uppercase;
1293
- letter-spacing: 0.08em;
1287
+ font-size: 12px;
1288
+ letter-spacing: 0.01em;
1294
1289
  display: flex;
1295
1290
  align-items: center;
1296
1291
  }
@@ -1398,9 +1393,8 @@
1398
1393
  .ds-247420 .kv td:first-child {
1399
1394
  color: var(--panel-text-2);
1400
1395
  font-family: var(--ff-mono);
1401
- font-size: 11px;
1402
- text-transform: uppercase;
1403
- letter-spacing: 0.08em;
1396
+ font-size: 12px;
1397
+ letter-spacing: 0.01em;
1404
1398
  width: 160px;
1405
1399
  }
1406
1400
  .ds-247420 .kv td:last-child { color: var(--panel-text); }
@@ -1416,15 +1410,16 @@
1416
1410
  display: grid;
1417
1411
  grid-template-columns: 44px 1fr;
1418
1412
  gap: 10px;
1419
- padding: 16px 18px;
1413
+ padding: 18px 20px;
1420
1414
  background: var(--panel-1);
1421
1415
  color: var(--panel-text);
1422
1416
  text-decoration: none;
1423
1417
  align-items: baseline;
1424
- border-radius: 16px;
1425
- transition: background 80ms ease;
1418
+ border-radius: 20px;
1419
+ box-shadow: var(--panel-shadow, none);
1420
+ transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
1426
1421
  }
1427
- .ds-247420 .card-item:hover { background: var(--panel-hover); }
1422
+ .ds-247420 .card-item:hover { background: var(--panel-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31,27,22,0.06); }
1428
1423
  .ds-247420 .card-item .code {
1429
1424
  font-family: var(--ff-mono);
1430
1425
  font-size: 11px;