@osimart/create-storefront 1.0.25 → 1.0.26

package/app/components/checkout/CheckoutView.vue

@@ -272,6 +272,7 @@
                 <PhoneNumInput
                   v-model="formData.mobile_number"
                   variant="bare"
+                  :themed-popup="true"
                   :error="phoneHasError"
                   @update="onPhoneUpdate"
                 />
@@ -375,6 +376,7 @@
                   @update:model-value="selectCountry($event); clearFieldError('country')"
                   placeholder="Country"
                   searchable
+                  themed
                   local-search
                   full-width
                   field="country"
@@ -408,6 +410,7 @@
                   @update:model-value="selectZone($event); clearFieldError('zone')"
                   placeholder="Zone"
                   searchable
+                  themed
                   local-search
                   full-width
                   field="zone"

package/app/components/common/DropdownSelect.vue

@@ -97,16 +97,20 @@
      <div
   v-if="open && !disabled"
   ref="menuRef"
-  :style="[floatingStyles, menuWidthStyle, { zIndex: dropdownZIndex }]"
-  class="absolute font-poppins bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto dropdown-select-popup"
-  :class="dropdownWidth ? '' : 'w-max max-w-xs'"
+  :style="[floatingStyles, menuWidthStyle, themeVars, { zIndex: dropdownZIndex }]"
+  class="absolute font-poppins border rounded-md shadow-lg max-h-60 overflow-auto dropdown-select-popup"
+  :class="[
+    dropdownWidth ? '' : 'w-max max-w-xs',
+    themed ? 'dropdown-select-popup--themed' : 'bg-white border-gray-300',
+  ]"
   @scroll.passive="onScroll"
 >
         <!-- Search -->
         <div v-if="searchable" class="p-2">
           <input
             v-model="searchQuery"
-            class="bg-input w-full border px-2 py-1 rounded text-sm focus:outline-none"
+            class="w-full border px-2 py-1 rounded text-sm focus:outline-none"
+            :class="themed ? 'dd-search' : 'bg-input'"
             placeholder="Search..."
           />
         </div>
@@ -116,7 +120,8 @@
             v-for="opt in filteredOptions"
             :key="opt.value"
             :style="{ color: opt.color }"
-            class="px-4 py-2 flex justify-between items-center hover:bg-gray-100 cursor-pointer"
+            class="px-4 py-2 flex justify-between items-center cursor-pointer"
+            :class="themed ? 'dd-option' : 'hover:bg-gray-100'"
             @click="toggleOption(opt.value)"
           >
             <div class="flex items-center gap-2 min-w-0">
@@ -141,7 +146,7 @@
           </li>
         </ul>
 
-        <div v-else-if="!loading" class="px-4 py-2 text-fifthosiblue text-center text-sm">
+        <div v-else-if="!loading" class="px-4 py-2 text-fifthosiblue text-center text-sm" :class="{ 'dd-empty': themed }">
           No results
         </div>
 
@@ -193,6 +198,11 @@ const props = defineProps({
   // Explicit width for the dropdown menu (any valid CSS width, e.g. '320px',
   // '24rem', '100%'). Overrides the default w-max/max-w-xs/minWidth-match behavior.
   dropdownWidth: { type: String, default: null },
+  // Opt-in: the popup takes its colours from the storefront theme variables
+  // (the same ones the form fields use) instead of the hardcoded white/gray.
+  // The menu is teleported to <body>, so the variables are copied from the
+  // trigger's element when it opens. Off = every existing usage is unchanged.
+  themed: { type: Boolean, default: false },
 });
 const parentModalZIndex = inject("modalZIndex", null);
 const dropdownZIndex = computed(() =>
@@ -211,6 +221,38 @@ const rootRef = ref(null);
 const triggerBtnRef = ref(null);
 const triggerWidth = ref(0);
 
+// CSS variables the themed popup needs. The teleported menu sits outside the
+// element that defines them, so they're read from the trigger when it opens.
+// Names match osi-controls.css: the Inputs theme group (--osi-input-*) and the
+// colour scheme (--osi-bg / --osi-text / --osi-border).
+const THEME_VARS = [
+  "--osi-bg",
+  "--osi-text",
+  "--osi-border",
+  "--osi-input-bg",
+  "--osi-input-fg",
+  "--osi-input-border-color",
+  // The checkout's card colours (set inline on .osi-ck, so only present there).
+  "--ck-card-bg",
+  "--ck-card-text",
+  "--ck-card-border",
+];
+const themeVars = ref({});
+
+function readThemeVars() {
+  if (!props.themed || !rootRef.value) {
+    themeVars.value = {};
+    return;
+  }
+  const cs = getComputedStyle(rootRef.value);
+  const vars = {};
+  for (const name of THEME_VARS) {
+    const value = cs.getPropertyValue(name).trim();
+    if (value) vars[name] = value;
+  }
+  themeVars.value = vars;
+}
+
 const menuWidthStyle = computed(() => {
   if (props.dropdownWidth) return { width: props.dropdownWidth };
   if (!props.autoWidth) return { minWidth: triggerWidth.value + 'px' };
@@ -410,6 +452,7 @@ watch(open, (isOpen) => {
   if (isOpen) {
     eventBus.emit("dropdown:opened", instanceId);
     triggerWidth.value = rootRef.value ? rootRef.value.offsetWidth : 0;
+    readThemeVars();
     document.addEventListener("mousedown", handleDocumentClick, true);
     emit("open");
   } else {
@@ -429,4 +472,30 @@ onBeforeUnmount(() => {
 onUnmounted(() => {
   eventBus.off("dropdown:opened", onGlobalDropdownOpened);
 });
-</script>
+</script>
+
+<style scoped>
+/* Only applied when the `themed` prop is set. Every colour falls back to the
+   old hardcoded one, so a themed popup outside the storefront still looks
+   the same as before. */
+.dropdown-select-popup--themed {
+  background: var(--osi-input-bg, var(--ck-card-bg, var(--osi-bg, #fff)));
+  color: var(--osi-input-fg, var(--ck-card-text, var(--osi-text, inherit)));
+  border-color: var(--osi-input-border-color, var(--ck-card-border, var(--osi-border, #d1d5db)));
+}
+.dropdown-select-popup--themed .dd-option:hover {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.dropdown-select-popup--themed .dd-search {
+  background: transparent;
+  color: inherit;
+  border-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+.dropdown-select-popup--themed .dd-search::placeholder {
+  color: color-mix(in srgb, currentColor 50%, transparent);
+}
+.dropdown-select-popup--themed .dd-empty {
+  color: inherit;
+  opacity: 0.6;
+}
+</style>

package/app/components/common/PhoneNumInput.vue

@@ -14,6 +14,7 @@
       :searchable="true"
       :local-search="true"
       smallText
+      themed
       @search="onSearch"
       @update:modelValue="onCountryChange"
       @open="isFocused = true"
@@ -64,7 +65,8 @@
     v-else
     class="w-full"
     :class="[
-      effectiveVariant === 'underline' ? 'font-thoren relative' : 'font-poppins'
+      effectiveVariant === 'underline' ? 'font-thoren relative' : 'font-poppins',
+      { 'phone-input-themed': themedPopup && effectiveVariant === 'bare' }
     ]"
   >
     <label
@@ -100,6 +102,7 @@
           @update:modelValue="onCountryChange"
           @open="isFocused = true"
           @close="isFocused = false"
+          :themed="themedPopup"
           :fullWidth="false"
           class="shrink min-w-[90px]"
           :class="ispopup ? 'lg:min-w-[70px]':'lg:min-w-[140px]'"
@@ -196,6 +199,9 @@ const props = defineProps({
   inputClass: { type: [String, Array, Object], default: 'osi-input' },
   inputId: { type: String, default: '' },
   disabled: { type: Boolean, default: false },
+  // Non-theme variants only: opt the country popup into the theme colours.
+  // (The `theme` variant is always themed.)
+  themedPopup: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue', 'update', 'clear-error'])
@@ -431,4 +437,20 @@ const getFlagUrl = (code) => {
   outline: none !important;
   box-shadow: none !important;
 }
-</style>
+
+/* Keep the compact bare layout while using the shared Inputs color tokens. */
+.phone-input-themed .dropdown-trigger-btn,
+.phone-input-themed .text-input {
+  color: var(--osi-input-fg, inherit);
+}
+.phone-input-themed .text-input {
+  background-color: var(--osi-input-bg, transparent);
+}
+.phone-input-themed .text-input::placeholder {
+  color: var(--osi-input-placeholder, currentColor);
+  opacity: 1;
+}
+.phone-input-themed .border-r {
+  border-color: var(--osi-input-border-color, #e5e7eb);
+}
+</style>

package/app/logic/components/SiteHeader.js

@@ -146,6 +146,8 @@ export default function useLogic() {
     if (s.HEADER_ICON_BORDER) style["--osi-header-icon-border"] = s.HEADER_ICON_BORDER;
     if (s.HEADER_CART_BADGE_BG) style["--osi-header-badge-bg"] = s.HEADER_CART_BADGE_BG;
     if (s.HEADER_CART_BADGE_TEXT) style["--osi-header-badge-text"] = s.HEADER_CART_BADGE_TEXT;
+    if (s.HEADER_BORDER_COLOR) style["--osi-header-border"] = s.HEADER_BORDER_COLOR;
+    if (s.HEADER_BORDER_WIDTH) style["--osi-header-border-w"] = `${s.HEADER_BORDER_WIDTH}px`;
     style["--osi-header-pad-y"] = `${s.HEADER_PADDING_Y}px`;
     // Side padding lives on the header itself, not on the inner box — see the
     // note on .osi-header-inner below. 16 is COMMON_STYLE_SETTINGS' PADDING_X

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",