@snacky/ui 0.9.1 → 0.11.0

package/dist/index.css

@@ -1,15 +1,15 @@
 /* src/theme/tokens.css */
 :root {
-  --color-primary-50: #fef8eb;
-  --color-primary-100: #fde9bf;
-  --color-primary-200: #fcdea1;
-  --color-primary-300: #facf76;
-  --color-primary-400: #f9c55b;
-  --color-primary-500: #f8b732;
-  --color-primary-600: #e2a72e;
-  --color-primary-700: #b08224;
-  --color-primary-800: #88651c;
-  --color-primary-900: #684d15;
+  --color-amber-50: #fef8eb;
+  --color-amber-100: #fde9bf;
+  --color-amber-200: #fcdea1;
+  --color-amber-300: #facf76;
+  --color-amber-400: #f9c55b;
+  --color-amber-500: #f8b732;
+  --color-amber-600: #e2a72e;
+  --color-amber-700: #b08224;
+  --color-amber-800: #88651c;
+  --color-amber-900: #684d15;
   --color-neutral-0: #ffffff;
   --color-neutral-10: #fdfdfd;
   --color-neutral-20: #f7f7f7;
@@ -35,14 +35,14 @@
   --color-red-900: #632525;
   --bg-app: var(--color-neutral-20);
   --bg-surface: var(--color-neutral-0);
-  --bg-surface-primary: var(--color-primary-500);
+  --bg-surface-primary: var(--color-amber-500);
   --bg-surface-accent: var(--color-red-500);
   --bg-surface-variant: var(--color-neutral-50);
   --bg-surface-field: var(--color-neutral-0);
-  --bg-surface-highlight: var(--color-primary-50);
-  --bg-action-primary: var(--color-primary-500);
-  --bg-action-primary-hover: var(--color-primary-600);
-  --bg-action-primary-pressed: var(--color-primary-700);
+  --bg-surface-highlight: var(--color-amber-50);
+  --bg-action-primary: var(--color-amber-500);
+  --bg-action-primary-hover: var(--color-amber-600);
+  --bg-action-primary-pressed: var(--color-amber-700);
   --bg-action-secondary: var(--color-neutral-0);
   --bg-action-secondary-hover: var(--color-neutral-50);
   --bg-action-secondary-pressed: var(--color-neutral-100);
@@ -50,11 +50,13 @@
   --bg-action-primary-danger: var(--color-red-500);
   --bg-action-primary-danger-hovered: var(--color-red-600);
   --bg-action-primary-danger-pressed: var(--color-red-700);
+  --bg-indicator-active: var(--color-amber-500);
+  --bg-indicator-inactive: var(--color-neutral-200);
   --bg-overlay-dim: rgba(51,51,51,0.8);
   --border-main: var(--color-neutral-200);
-  --border-highlight: var(--color-primary-200);
+  --border-highlight: var(--color-amber-200);
   --border-input-default: var(--color-neutral-200);
-  --border-input-active: var(--color-primary-500);
+  --border-input-active: var(--color-amber-500);
   --border-input-error: var(--color-red-500);
   --border-action-secondary: var(--color-neutral-200);
   --border-action-secondary-pressed: var(--color-neutral-400);
@@ -64,21 +66,21 @@
   --text-secondary: var(--color-neutral-500);
   --text-placeholder: var(--color-neutral-500);
   --text-disabled: var(--color-neutral-400);
-  --text-link: var(--color-primary-800);
+  --text-link: var(--color-amber-800);
   --text-error: var(--color-red-700);
   --text-inverse: var(--color-neutral-0);
   --text-on-action-primary: var(--color-neutral-950);
   --text-on-action-secondary: var(--color-neutral-950);
-  --text-on-action-tertiary: var(--color-primary-700);
-  --text-on-action-tertiary-hovered: var(--color-primary-800);
-  --text-on-action-tertiary-pressed: var(--color-primary-900);
+  --text-on-action-tertiary: var(--color-amber-700);
+  --text-on-action-tertiary-hovered: var(--color-amber-800);
+  --text-on-action-tertiary-pressed: var(--color-amber-900);
   --text-action-danger: var(--color-red-600);
   --text-action-danger-hovered: var(--color-red-700);
   --text-action-danger-pressed: var(--color-red-800);
   --text-action-disabled: var(--color-neutral-400);
   --icon-primary: var(--color-neutral-950);
   --icon-secondary: var(--color-neutral-700);
-  --icon-brand: var(--color-primary-500);
+  --icon-brand: var(--color-amber-500);
   --icon-disabled: var(--color-neutral-400);
   --icon-active: var(--color-red-500);
   --icon-on-accent: var(--color-neutral-0);
@@ -365,7 +367,11 @@
 .snacky-iconbtn--primary.snacky-iconbtn--small {
   width: 24px;
   height: 24px;
-  padding: var(--spacing-4);
+  padding: 0;
+}
+.snacky-iconbtn--primary.snacky-iconbtn--small .snacky-iconbtn__icon {
+  width: 24px;
+  height: 24px;
 }
 .snacky-iconbtn--secondary {
   width: 40px;
@@ -421,18 +427,28 @@
 
 /* src/components/IconButton/UploadButton.css */
 .snacky-upload {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 72px;
   height: 72px;
   padding: var(--spacing-24);
+  border: none;
   border-radius: var(--radius-full);
-  background: var(--bg-surface);
-  border: 1px dashed var(--border-main);
+  background: var(--bg-action-secondary);
+  color: var(--icon-primary);
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
+.snacky-upload::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border: 1px dashed var(--border-action-secondary);
+  border-radius: inherit;
+  pointer-events: none;
+}
 .snacky-upload svg,
 .snacky-upload img {
   width: 100%;
@@ -780,7 +796,7 @@
 }
 .snacky-chip--selected {
   background: var(--bg-surface-highlight);
-  border-color: var(--color-primary-500);
+  border-color: var(--border-input-active);
 }
 .snacky-chip__thumb {
   width: 24px;
@@ -867,8 +883,8 @@
   background: var(--bg-surface-field);
 }
 .snacky-checkbox:checked {
-  background: var(--color-primary-500);
-  border-color: var(--color-primary-500);
+  background: var(--bg-surface-primary);
+  border-color: var(--bg-surface-primary);
 }
 .snacky-checkbox:checked::after {
   content: "";
@@ -922,7 +938,7 @@
 }
 .snacky-toggle--on .snacky-toggle__thumb {
   left: 24px;
-  background: var(--color-primary-500);
+  background: var(--bg-surface-primary);
 }
 
 /* src/components/Navbar/Navbar.css */
@@ -964,7 +980,7 @@
   color: var(--icon-secondary);
 }
 .snacky-navbar__item--active .snacky-navbar__icon {
-  color: var(--color-primary-500);
+  color: var(--icon-brand);
 }
 
 /* src/components/Tab/Tab.css */
@@ -991,7 +1007,7 @@
   font-family: var(--font-body-semibold-family);
   font-weight: var(--font-body-semibold-weight);
   color: var(--text-on-action-tertiary);
-  box-shadow: inset 0 -2px 0 0 var(--color-primary-500);
+  box-shadow: inset 0 -2px 0 0 var(--border-input-active);
   font-size: var(--font-body-semibold-size);
   line-height: var(--font-body-semibold-line-height);
   letter-spacing: var(--font-body-semibold-letter-spacing);
@@ -1070,7 +1086,7 @@
   padding: var(--spacing-8) var(--spacing-16);
   gap: var(--spacing-8);
   background: var(--bg-surface-highlight);
-  box-shadow: inset 0 0 0 1px var(--color-primary-500);
+  box-shadow: inset 0 0 0 1px var(--border-highlight);
   border-radius: var(--radius-card);
   box-sizing: border-box;
 }
@@ -1107,7 +1123,7 @@
 .snacky-banner-point-balance__divider {
   width: 1px;
   align-self: stretch;
-  background: var(--color-primary-500);
+  background: var(--border-highlight);
 }
 .snacky-banner-alert {
   display: flex;
@@ -1141,6 +1157,24 @@
   letter-spacing: var(--font-body-semibold-letter-spacing);
 }
 
+/* src/components/PageIndicator/PageIndicator.css */
+.snacky-page-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-cell);
+}
+.snacky-page-indicator__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--bg-indicator-inactive);
+  flex-shrink: 0;
+}
+.snacky-page-indicator__dot--active {
+  width: 28px;
+  background: var(--bg-indicator-active);
+}
+
 /* src/components/Badge/Badge.css */
 .snacky-badge-wrap {
   position: relative;
@@ -1202,7 +1236,7 @@
   padding: var(--spacing-8);
   border-radius: var(--radius-field);
   background: var(--bg-surface-highlight);
-  border: 1px solid var(--color-primary-500);
+  border: 1px solid var(--border-highlight);
   color: var(--text-primary);
   font-family: var(--font-caption-regular-family);
   font-size: var(--font-caption-regular-size);
@@ -1210,6 +1244,9 @@
   line-height: var(--font-caption-regular-line-height);
   letter-spacing: var(--font-caption-regular-letter-spacing);
 }
+.snacky-info-badge:has(.snacky-info-badge__icon) {
+  border-color: var(--border-input-active);
+}
 .snacky-info-badge__icon {
   display: inline-flex;
   flex-shrink: 0;
@@ -1244,7 +1281,7 @@
 .snacky-callout--sent,
 .snacky-callout--pending {
   align-self: flex-end;
-  background: var(--color-primary-500);
+  background: var(--bg-surface-primary);
 }
 .snacky-callout__message {
   margin: 0;
@@ -1525,11 +1562,11 @@
   gap: var(--gap-layout-block);
 }
 .snacky-sheet__handle {
-  width: 36px;
+  width: 40px;
   height: 4px;
-  border-radius: 999px;
-  background: var(--color-neutral-200);
-  margin: 0 auto var(--spacing-8);
+  border-radius: var(--radius-full);
+  background: var(--border-main);
+  margin: 0 auto;
 }
 
 /* src/components/Section/Section.css */
@@ -1544,8 +1581,12 @@
 }
 .snacky-section__header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  height: 30px;
+}
+.snacky-section__header > .snacky-iconbtn {
+  align-self: center;
 }
 .snacky-section__title {
   margin: 0;
@@ -1556,23 +1597,6 @@
   line-height: var(--font-h3-bold-line-height);
   letter-spacing: var(--font-h3-bold-letter-spacing);
 }
-.snacky-section__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  padding: var(--spacing-4);
-  border: none;
-  border-radius: var(--radius-full);
-  background: var(--bg-action-primary);
-  color: var(--text-primary);
-  cursor: pointer;
-}
-.snacky-section__action:hover {
-  background: var(--bg-action-primary-hover);
-}
 
 /* src/components/Stepper/Stepper.css */
 .snacky-stepper {
@@ -1618,10 +1642,10 @@
   border-radius: var(--radius-full);
 }
 .snacky-stepper__dot--done::before {
-  background: var(--icon-brand);
+  background: var(--bg-indicator-active);
 }
 .snacky-stepper__dot--pending::before {
-  background: var(--bg-action-disabled);
+  background: var(--bg-indicator-inactive);
 }
 .snacky-stepper__dot--cancelled::before {
   background: var(--bg-surface-accent);
@@ -1948,6 +1972,12 @@
 .snacky-product-card--details .snacky-product-card__name {
   font-size: 14px;
 }
+.snacky-product-card--list .snacky-product-card__name {
+  height: 41px;
+}
+.snacky-product-card--list .snacky-product-card__footer-row {
+  height: 41px;
+}
 .snacky-product-card__price-row {
   display: flex;
   align-items: center;