@snacky/ui 0.9.1 → 0.10.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 (10) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/dist/index.cjs +144 -138
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +67 -57
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.d.cts +12 -7
  7. package/dist/index.d.ts +12 -7
  8. package/dist/index.js +144 -138
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,15 +1,15 @@
1
1
  /* src/theme/tokens.css */
2
2
  :root {
3
- --color-primary-50: #fef8eb;
4
- --color-primary-100: #fde9bf;
5
- --color-primary-200: #fcdea1;
6
- --color-primary-300: #facf76;
7
- --color-primary-400: #f9c55b;
8
- --color-primary-500: #f8b732;
9
- --color-primary-600: #e2a72e;
10
- --color-primary-700: #b08224;
11
- --color-primary-800: #88651c;
12
- --color-primary-900: #684d15;
3
+ --color-amber-50: #fef8eb;
4
+ --color-amber-100: #fde9bf;
5
+ --color-amber-200: #fcdea1;
6
+ --color-amber-300: #facf76;
7
+ --color-amber-400: #f9c55b;
8
+ --color-amber-500: #f8b732;
9
+ --color-amber-600: #e2a72e;
10
+ --color-amber-700: #b08224;
11
+ --color-amber-800: #88651c;
12
+ --color-amber-900: #684d15;
13
13
  --color-neutral-0: #ffffff;
14
14
  --color-neutral-10: #fdfdfd;
15
15
  --color-neutral-20: #f7f7f7;
@@ -35,14 +35,14 @@
35
35
  --color-red-900: #632525;
36
36
  --bg-app: var(--color-neutral-20);
37
37
  --bg-surface: var(--color-neutral-0);
38
- --bg-surface-primary: var(--color-primary-500);
38
+ --bg-surface-primary: var(--color-amber-500);
39
39
  --bg-surface-accent: var(--color-red-500);
40
40
  --bg-surface-variant: var(--color-neutral-50);
41
41
  --bg-surface-field: var(--color-neutral-0);
42
- --bg-surface-highlight: var(--color-primary-50);
43
- --bg-action-primary: var(--color-primary-500);
44
- --bg-action-primary-hover: var(--color-primary-600);
45
- --bg-action-primary-pressed: var(--color-primary-700);
42
+ --bg-surface-highlight: var(--color-amber-50);
43
+ --bg-action-primary: var(--color-amber-500);
44
+ --bg-action-primary-hover: var(--color-amber-600);
45
+ --bg-action-primary-pressed: var(--color-amber-700);
46
46
  --bg-action-secondary: var(--color-neutral-0);
47
47
  --bg-action-secondary-hover: var(--color-neutral-50);
48
48
  --bg-action-secondary-pressed: var(--color-neutral-100);
@@ -52,9 +52,9 @@
52
52
  --bg-action-primary-danger-pressed: var(--color-red-700);
53
53
  --bg-overlay-dim: rgba(51,51,51,0.8);
54
54
  --border-main: var(--color-neutral-200);
55
- --border-highlight: var(--color-primary-200);
55
+ --border-highlight: var(--color-amber-200);
56
56
  --border-input-default: var(--color-neutral-200);
57
- --border-input-active: var(--color-primary-500);
57
+ --border-input-active: var(--color-amber-500);
58
58
  --border-input-error: var(--color-red-500);
59
59
  --border-action-secondary: var(--color-neutral-200);
60
60
  --border-action-secondary-pressed: var(--color-neutral-400);
@@ -64,21 +64,21 @@
64
64
  --text-secondary: var(--color-neutral-500);
65
65
  --text-placeholder: var(--color-neutral-500);
66
66
  --text-disabled: var(--color-neutral-400);
67
- --text-link: var(--color-primary-800);
67
+ --text-link: var(--color-amber-800);
68
68
  --text-error: var(--color-red-700);
69
69
  --text-inverse: var(--color-neutral-0);
70
70
  --text-on-action-primary: var(--color-neutral-950);
71
71
  --text-on-action-secondary: var(--color-neutral-950);
72
- --text-on-action-tertiary: var(--color-primary-700);
73
- --text-on-action-tertiary-hovered: var(--color-primary-800);
74
- --text-on-action-tertiary-pressed: var(--color-primary-900);
72
+ --text-on-action-tertiary: var(--color-amber-700);
73
+ --text-on-action-tertiary-hovered: var(--color-amber-800);
74
+ --text-on-action-tertiary-pressed: var(--color-amber-900);
75
75
  --text-action-danger: var(--color-red-600);
76
76
  --text-action-danger-hovered: var(--color-red-700);
77
77
  --text-action-danger-pressed: var(--color-red-800);
78
78
  --text-action-disabled: var(--color-neutral-400);
79
79
  --icon-primary: var(--color-neutral-950);
80
80
  --icon-secondary: var(--color-neutral-700);
81
- --icon-brand: var(--color-primary-500);
81
+ --icon-brand: var(--color-amber-500);
82
82
  --icon-disabled: var(--color-neutral-400);
83
83
  --icon-active: var(--color-red-500);
84
84
  --icon-on-accent: var(--color-neutral-0);
@@ -365,7 +365,11 @@
365
365
  .snacky-iconbtn--primary.snacky-iconbtn--small {
366
366
  width: 24px;
367
367
  height: 24px;
368
- padding: var(--spacing-4);
368
+ padding: 0;
369
+ }
370
+ .snacky-iconbtn--primary.snacky-iconbtn--small .snacky-iconbtn__icon {
371
+ width: 24px;
372
+ height: 24px;
369
373
  }
370
374
  .snacky-iconbtn--secondary {
371
375
  width: 40px;
@@ -421,18 +425,28 @@
421
425
 
422
426
  /* src/components/IconButton/UploadButton.css */
423
427
  .snacky-upload {
428
+ position: relative;
424
429
  display: inline-flex;
425
430
  align-items: center;
426
431
  justify-content: center;
427
432
  width: 72px;
428
433
  height: 72px;
429
434
  padding: var(--spacing-24);
435
+ border: none;
430
436
  border-radius: var(--radius-full);
431
- background: var(--bg-surface);
432
- border: 1px dashed var(--border-main);
437
+ background: var(--bg-action-secondary);
438
+ color: var(--icon-primary);
433
439
  cursor: pointer;
434
440
  transition: background-color 0.12s ease;
435
441
  }
442
+ .snacky-upload::before {
443
+ content: "";
444
+ position: absolute;
445
+ inset: -1px;
446
+ border: 1px dashed var(--border-action-secondary);
447
+ border-radius: inherit;
448
+ pointer-events: none;
449
+ }
436
450
  .snacky-upload svg,
437
451
  .snacky-upload img {
438
452
  width: 100%;
@@ -780,7 +794,7 @@
780
794
  }
781
795
  .snacky-chip--selected {
782
796
  background: var(--bg-surface-highlight);
783
- border-color: var(--color-primary-500);
797
+ border-color: var(--border-input-active);
784
798
  }
785
799
  .snacky-chip__thumb {
786
800
  width: 24px;
@@ -867,8 +881,8 @@
867
881
  background: var(--bg-surface-field);
868
882
  }
869
883
  .snacky-checkbox:checked {
870
- background: var(--color-primary-500);
871
- border-color: var(--color-primary-500);
884
+ background: var(--bg-surface-primary);
885
+ border-color: var(--bg-surface-primary);
872
886
  }
873
887
  .snacky-checkbox:checked::after {
874
888
  content: "";
@@ -922,7 +936,7 @@
922
936
  }
923
937
  .snacky-toggle--on .snacky-toggle__thumb {
924
938
  left: 24px;
925
- background: var(--color-primary-500);
939
+ background: var(--bg-surface-primary);
926
940
  }
927
941
 
928
942
  /* src/components/Navbar/Navbar.css */
@@ -964,7 +978,7 @@
964
978
  color: var(--icon-secondary);
965
979
  }
966
980
  .snacky-navbar__item--active .snacky-navbar__icon {
967
- color: var(--color-primary-500);
981
+ color: var(--icon-brand);
968
982
  }
969
983
 
970
984
  /* src/components/Tab/Tab.css */
@@ -991,7 +1005,7 @@
991
1005
  font-family: var(--font-body-semibold-family);
992
1006
  font-weight: var(--font-body-semibold-weight);
993
1007
  color: var(--text-on-action-tertiary);
994
- box-shadow: inset 0 -2px 0 0 var(--color-primary-500);
1008
+ box-shadow: inset 0 -2px 0 0 var(--border-input-active);
995
1009
  font-size: var(--font-body-semibold-size);
996
1010
  line-height: var(--font-body-semibold-line-height);
997
1011
  letter-spacing: var(--font-body-semibold-letter-spacing);
@@ -1070,7 +1084,7 @@
1070
1084
  padding: var(--spacing-8) var(--spacing-16);
1071
1085
  gap: var(--spacing-8);
1072
1086
  background: var(--bg-surface-highlight);
1073
- box-shadow: inset 0 0 0 1px var(--color-primary-500);
1087
+ box-shadow: inset 0 0 0 1px var(--border-highlight);
1074
1088
  border-radius: var(--radius-card);
1075
1089
  box-sizing: border-box;
1076
1090
  }
@@ -1107,7 +1121,7 @@
1107
1121
  .snacky-banner-point-balance__divider {
1108
1122
  width: 1px;
1109
1123
  align-self: stretch;
1110
- background: var(--color-primary-500);
1124
+ background: var(--border-highlight);
1111
1125
  }
1112
1126
  .snacky-banner-alert {
1113
1127
  display: flex;
@@ -1202,7 +1216,7 @@
1202
1216
  padding: var(--spacing-8);
1203
1217
  border-radius: var(--radius-field);
1204
1218
  background: var(--bg-surface-highlight);
1205
- border: 1px solid var(--color-primary-500);
1219
+ border: 1px solid var(--border-highlight);
1206
1220
  color: var(--text-primary);
1207
1221
  font-family: var(--font-caption-regular-family);
1208
1222
  font-size: var(--font-caption-regular-size);
@@ -1210,6 +1224,9 @@
1210
1224
  line-height: var(--font-caption-regular-line-height);
1211
1225
  letter-spacing: var(--font-caption-regular-letter-spacing);
1212
1226
  }
1227
+ .snacky-info-badge:has(.snacky-info-badge__icon) {
1228
+ border-color: var(--border-input-active);
1229
+ }
1213
1230
  .snacky-info-badge__icon {
1214
1231
  display: inline-flex;
1215
1232
  flex-shrink: 0;
@@ -1244,7 +1261,7 @@
1244
1261
  .snacky-callout--sent,
1245
1262
  .snacky-callout--pending {
1246
1263
  align-self: flex-end;
1247
- background: var(--color-primary-500);
1264
+ background: var(--bg-surface-primary);
1248
1265
  }
1249
1266
  .snacky-callout__message {
1250
1267
  margin: 0;
@@ -1525,11 +1542,11 @@
1525
1542
  gap: var(--gap-layout-block);
1526
1543
  }
1527
1544
  .snacky-sheet__handle {
1528
- width: 36px;
1545
+ width: 40px;
1529
1546
  height: 4px;
1530
- border-radius: 999px;
1531
- background: var(--color-neutral-200);
1532
- margin: 0 auto var(--spacing-8);
1547
+ border-radius: var(--radius-full);
1548
+ background: var(--border-main);
1549
+ margin: 0 auto;
1533
1550
  }
1534
1551
 
1535
1552
  /* src/components/Section/Section.css */
@@ -1544,8 +1561,12 @@
1544
1561
  }
1545
1562
  .snacky-section__header {
1546
1563
  display: flex;
1547
- align-items: center;
1564
+ align-items: flex-start;
1548
1565
  justify-content: space-between;
1566
+ height: 30px;
1567
+ }
1568
+ .snacky-section__header > .snacky-iconbtn {
1569
+ align-self: center;
1549
1570
  }
1550
1571
  .snacky-section__title {
1551
1572
  margin: 0;
@@ -1556,23 +1577,6 @@
1556
1577
  line-height: var(--font-h3-bold-line-height);
1557
1578
  letter-spacing: var(--font-h3-bold-letter-spacing);
1558
1579
  }
1559
- .snacky-section__action {
1560
- display: inline-flex;
1561
- align-items: center;
1562
- justify-content: center;
1563
- flex-shrink: 0;
1564
- width: 24px;
1565
- height: 24px;
1566
- padding: var(--spacing-4);
1567
- border: none;
1568
- border-radius: var(--radius-full);
1569
- background: var(--bg-action-primary);
1570
- color: var(--text-primary);
1571
- cursor: pointer;
1572
- }
1573
- .snacky-section__action:hover {
1574
- background: var(--bg-action-primary-hover);
1575
- }
1576
1580
 
1577
1581
  /* src/components/Stepper/Stepper.css */
1578
1582
  .snacky-stepper {
@@ -1948,6 +1952,12 @@
1948
1952
  .snacky-product-card--details .snacky-product-card__name {
1949
1953
  font-size: 14px;
1950
1954
  }
1955
+ .snacky-product-card--list .snacky-product-card__name {
1956
+ height: 41px;
1957
+ }
1958
+ .snacky-product-card--list .snacky-product-card__footer-row {
1959
+ height: 41px;
1960
+ }
1951
1961
  .snacky-product-card__price-row {
1952
1962
  display: flex;
1953
1963
  align-items: center;