@gemboss/gem-framework 0.18.11 → 0.18.15

package/dist/popup-shell.css

@@ -4,7 +4,7 @@
   width: min(880px, 92vw); max-width: none; max-height: min(640px, 92vh); overflow: hidden;
   border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-md);
 }
-.gem-popup-shell__dialog::backdrop { background: rgb(0 0 0 / 0.55); }
+.gem-popup-shell__dialog::backdrop { background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 .gem-popup-shell__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; height: 100%; }
 .gem-popup-shell__media { position: relative; min-width: 0; overflow: hidden; background: var(--gem-color-surface); }
 .gem-popup-shell__image { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -27,7 +27,7 @@
 .gem-popup-shell[data-gem-popup-desktop='card-over-image'] .gem-popup-shell__panel {
   width: min(420px, 86%); margin: var(--gem-space-xl) 0; background: var(--gem-color-background); border-radius: var(--gem-radius-lg); box-shadow: var(--gem-shadow-sm);
 }
-.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.6)); }
+.gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--gem-color-scrim, #000) 35%, transparent), color-mix(in srgb, var(--gem-color-scrim, #000) 60%, transparent)); }
 .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__panel,
 .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__close { color: #fff; }
 .gem-popup-shell__close {
@@ -74,10 +74,10 @@
   .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__frame { grid-template-rows: 1fr; }
   .gem-popup-shell[data-gem-popup-media='background'] .gem-popup-shell__media { position: absolute; inset: 0; max-height: none; }
 }
-:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: rgb(0 0 0 / 0.55); }
+:root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] { position: fixed; inset: 0; z-index: 1000; padding: 0; background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 :root:not(:has([data-gem-canvas])) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: fixed; inset: 0; display: block; }
 :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] .gem-popup-shell__dialog { position: relative; display: block; inset: auto; }
-:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: rgb(0 0 0 / 0.55); }
+:root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'] { padding: var(--gem-space-xl) var(--gem-layout-gutter); background: color-mix(in srgb, var(--gem-color-scrim, #000) 55%, transparent); }
 @media (min-width: 750px) {
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] { padding: 0; }
   :root:has([data-gem-canvas]) .gem-popup-shell[data-gem-popup-preview='true'][data-gem-popup-desktop='fullscreen'] .gem-popup-shell__dialog { height: 720px; max-height: none; }

package/dist/primitives.css

@@ -321,6 +321,30 @@ a {
   block-size: var(--gem-checkbox-size);
   accent-color: var(--gem-checkbox-accent);
 }
+[data-gem-form-set] :is(.gem-quantity-input) {
+  min-height: var(--gem-input-height);
+  border: var(--gem-input-border-width) solid var(--gem-input-border-color);
+  border-radius: min(var(--gem-input-radius), 22px);
+}
+[data-gem-form-set] :is(.gem-quantity-input__button, .gem-quantity-input__field) {
+  background: var(--gem-input-bg);
+  font-size: var(--gem-input-font-size);
+}
+[data-gem-form-set][data-gem-field-shape="underline"] :is(.gem-quantity-input__button, .gem-quantity-input__field) {
+  background: transparent;
+}
+@media (hover: hover) {
+  :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {
+    border-color: currentColor;
+    box-shadow: 0 0 0 1px currentColor;
+  }
+  [data-gem-form-set]:is([data-gem-field-shape="underline"], [data-gem-field-shape="filled"]) :is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input)):hover:not(:disabled):not([aria-invalid="true"]):not(:focus-visible) {
+    box-shadow: 0 1px 0 0 currentColor;
+  }
+}
+:is(.gem-input, .gem-select, .gem-textarea, .gem-shell-footer__newsletter .gem-input):where(:not(.gem-search-form .gem-input))[aria-invalid="true"] {
+  border-color: color-mix(in srgb, var(--gem-color-danger, #b42318) 70%, currentColor);
+}
 .gem-submit {
   cursor: pointer;
 }
@@ -833,6 +857,10 @@ a {
   color: var(--gem-color-text);
   text-align: center;
 }
+.gem-quantity-input__field {
+  display: grid;
+  place-items: center;
+}
 .gem-quantity-input__button {
   font-weight: 750;
 }
@@ -1176,7 +1204,7 @@ a {
 .gem-cart-drawer__overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.36);
+  background: color-mix(in srgb, var(--gem-color-scrim, #000) 36%, transparent);
 }
 @keyframes gem-cart-drawer-panel-in { from { translate: calc(var(--gem-drawer-offset, 24px) * var(--gem-drawer-dir, 1)) 0; opacity: 0; } }
 @keyframes gem-cart-drawer-overlay-in { from { opacity: 0; } }