@ikas/storefront 0.0.37 → 0.0.39

package/build/components/hoc/ThemeComponent.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     pageComponentPropValue: IkasPageComponentPropValue;
     pageComponent: IkasThemePageComponent;
     index: number;
+    settingsStr: string;
 };
 export declare const ThemeComponent: React.FC<Props>;
 export {};

package/build/components/page/index.d.ts

@@ -5,6 +5,7 @@ declare type Props = {
     propValues: IkasPageComponentPropValue[];
     page?: IkasThemePage;
     pageSpecificDataStr?: string;
+    settingsStr: string;
 };
 export declare const IkasPage: React.FC<Props>;
 export {};

package/build/index.es.js

@@ -11224,6 +11224,20 @@ var IkasTextPropValueProvider = /** @class */ (function () {
     return IkasTextPropValueProvider;
 }());
 
+var IkasColorPropValueProvider = /** @class */ (function () {
+    function IkasColorPropValueProvider(colorPropValue) {
+        this.color = colorPropValue;
+    }
+    IkasColorPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.color];
+            });
+        });
+    };
+    return IkasColorPropValueProvider;
+}());
+
 var IkasBooleanPropValueProvider = /** @class */ (function () {
     function IkasBooleanPropValueProvider(textPropValue) {
         this.bool = textPropValue;
@@ -11341,6 +11355,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                 props: {
                     propValuesStr: JSON.stringify(this.pageComponentPropValues),
                     page: toJS(this.page) || null,
+                    settingsStr: JSON.stringify(this.theme.settings || {}),
                 },
             };
         },
@@ -11614,6 +11629,10 @@ var IkasPageDataProvider = /** @class */ (function () {
                             case IkasThemeComponentPropType.LINK:
                             case IkasThemeComponentPropType.LIST_OF_LINK:
                                 propValueProvider = new IkasLinkPropValueProvider(propValue, this.theme);
+                                break;
+                            case IkasThemeComponentPropType.COLOR:
+                                propValueProvider = new IkasColorPropValueProvider(propValue);
+                                break;
                         }
                         return [4 /*yield*/, (propValueProvider === null || propValueProvider === void 0 ? void 0 : propValueProvider.getValue())];
                     case 1: return [2 /*return*/, _a.sent()];
@@ -12901,6 +12920,7 @@ var IkasThemeComponentPropType;
     IkasThemeComponentPropType["BRAND_LIST"] = "BRAND_LIST";
     IkasThemeComponentPropType["CATEGORY"] = "CATEGORY";
     IkasThemeComponentPropType["CATEGORY_LIST"] = "CATEGORY_LIST";
+    IkasThemeComponentPropType["COLOR"] = "COLOR";
     // TODO number
     // TODO productAttribute
 })(IkasThemeComponentPropType || (IkasThemeComponentPropType = {}));
@@ -12963,6 +12983,28 @@ var IkasThemePageType;
     IkasThemePageType["CART"] = "CART";
 })(IkasThemePageType || (IkasThemePageType = {}));
 
+var IkasThemeColor = /** @class */ (function () {
+    function IkasThemeColor(data) {
+        this.id = data.id || v4();
+        this.displayName = data.displayName || "";
+        this.key = data.key || "";
+        this.color = data.color || "";
+        makeAutoObservable(this);
+    }
+    return IkasThemeColor;
+}());
+
+var IkasThemeSettings = /** @class */ (function () {
+    function IkasThemeSettings(data) {
+        if (data === void 0) { data = {}; }
+        this.colors = data.colors
+            ? data.colors.map(function (c) { return new IkasThemeColor(c); })
+            : [];
+        makeAutoObservable(this);
+    }
+    return IkasThemeSettings;
+}());
+
 var IkasTheme = /** @class */ (function () {
     function IkasTheme(data) {
         if (data === void 0) { data = {}; }
@@ -12971,6 +13013,9 @@ var IkasTheme = /** @class */ (function () {
             ? data.components.map(function (c) { return new IkasThemeComponent(c); })
             : [];
         this.pages = data.pages ? data.pages.map(function (p) { return new IkasThemePage(p); }) : [];
+        this.settings = data.settings
+            ? new IkasThemeSettings(data.settings)
+            : new IkasThemeSettings();
         makeAutoObservable(this);
     }
     Object.defineProperty(IkasTheme.prototype, "headerComponent", {
@@ -22876,8 +22921,9 @@ var style = {
 };
 
 var ThemeComponent = observer(function (_a) {
-    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index;
+    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index, settingsStr = _a.settingsStr;
     var store = IkasStorefrontConfig.store, components = IkasStorefrontConfig.components;
+    var settings = new IkasThemeSettings(JSON.parse(settingsStr));
     var propValues = pageComponentPropValue.propValues;
     var hasNullValue = computed(function () {
         return Object.entries(propValues || {}).some(function (_a) {
@@ -22887,15 +22933,15 @@ var ThemeComponent = observer(function (_a) {
         });
     });
     var Component = components[pageComponent.componentId];
-    return (createElement("div", { id: index + "" }, hasNullValue.get() ? (createElement(ErrorComponent, null)) : (createElement(Component, __assign({ key: pageComponent.id }, propValues, { store: store })))));
+    return (createElement("div", { id: index + "" }, hasNullValue.get() ? (createElement(ErrorComponent, null)) : (createElement(Component, __assign({ key: pageComponent.id }, propValues, { settings: settings, store: store })))));
 });
 
 var IkasPage = observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
-        return (createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent }));
+        return (createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent, settingsStr: settingsStr }));
     };
     var headerComponent = (_b = propValues.find(function (pv) { return pv.component.isHeader; })) === null || _b === void 0 ? void 0 : _b.pageComponent;
     var footerComponent = (_c = propValues.find(function (pv) { return pv.component.isFooter; })) === null || _c === void 0 ? void 0 : _c.pageComponent;
@@ -23283,7 +23329,8 @@ var ThemeEditorComponent = observer(function (_a) {
         vm.onClick(pageComponent.id);
     };
     var rendered = computed(function () {
-        return hasNullValue.get() ? (createElement(ErrorComponent, null)) : (createElement(Component, __assign({ store: store }, propValues)));
+        var _a;
+        return hasNullValue.get() ? (createElement(ErrorComponent, null)) : (createElement(Component, __assign({ store: store }, propValues, { settings: (_a = vm.theme) === null || _a === void 0 ? void 0 : _a.settings })));
     });
     return (createElement("div", { ref: ref, style: { position: "relative" }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick },
         rendered.get(),
@@ -23369,10 +23416,10 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var Page = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23397,7 +23444,7 @@ var home = /*#__PURE__*/Object.freeze({
 });
 
 var Page$1 = function (_a) {
-    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr;
+    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var _b = useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
     var _c = useState(IkasPageDataProvider.initPropValues(propValuesStr, router)), propValues = _c[0], setPropValues = _c[1];
@@ -23408,7 +23455,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr }));
+    return (createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr }));
 };
 var index$1 = observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -23518,10 +23565,10 @@ var index$2 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$2 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { page: page, settingsStr: settingsStr, propValues: propValues }));
 };
 var getStaticPaths$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, customPages, customPagePaths;
@@ -23612,10 +23659,10 @@ var _id_$1 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$3 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23640,10 +23687,10 @@ var index$3 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$4 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23668,10 +23715,10 @@ var addresses = /*#__PURE__*/Object.freeze({
 });
 
 var Page$5 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23696,10 +23743,10 @@ var index$4 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$6 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23724,10 +23771,10 @@ var _id_$2 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$7 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23752,10 +23799,10 @@ var login = /*#__PURE__*/Object.freeze({
 });
 
 var Page$8 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23780,10 +23827,10 @@ var register = /*#__PURE__*/Object.freeze({
 });
 
 var Page$9 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23808,10 +23855,10 @@ var forgotPassword = /*#__PURE__*/Object.freeze({
 });
 
 var Page$a = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23836,10 +23883,10 @@ var recoverPassword = /*#__PURE__*/Object.freeze({
 });
 
 var Page$b = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router = useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router);
-    return createElement(IkasPage, { page: page, propValues: propValues });
+    return (createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$a = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23885,4 +23932,4 @@ var IkasBaseStore = /** @class */ (function () {
     return IkasBaseStore;
 }());
 
-export { index$3 as AccountPage, addresses as AddressesPage, cart as CartPage, _id_$1 as CheckoutPage, _slug_ as CustomPage, editor$1 as EditorPage, forgotPassword as ForgotPasswordPage, GTMAddToCart, GTMBeginCheckout, GTMBody, GTMCheckoutStep, GTMDisableHTML, GTMHead, GTMPageView, GTMProductView, GTMPurchase, GTMRemoveFromCart, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasBaseStore, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCategoryList, IkasCategoryListPropValue, IkasCategoryListSortType, IkasCategoryListType, IkasCategoryPropValue, IkasCheckout, IkasCheckoutAPI, IkasCheckoutPage, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAPI, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductList, IkasProductListFilter, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontAPI, IkasStorefrontConfig, IkasTheme, IkasThemeAPI, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, home as IndexPage, login as LoginPage, _id_$2 as OrderDetailPage, index$4 as OrdersPage, recoverPassword as RecoverPasswordPage, register as RegisterPage, index$2 as SlugPage, apollo, decodeBase64, formatMoney, pascalCase, stringToSlug, validatePhoneNumber };
+export { index$3 as AccountPage, addresses as AddressesPage, cart as CartPage, _id_$1 as CheckoutPage, _slug_ as CustomPage, editor$1 as EditorPage, forgotPassword as ForgotPasswordPage, GTMAddToCart, GTMBeginCheckout, GTMBody, GTMCheckoutStep, GTMDisableHTML, GTMHead, GTMPageView, GTMProductView, GTMPurchase, GTMRemoveFromCart, IkasAmountTypeEnum$1 as IkasAmountTypeEnum, IkasBaseStore, IkasBrand, IkasBrandAPI, IkasBrandList, IkasBrandListPropValue, IkasBrandListSortType, IkasBrandListType, IkasBrandPropValue, IkasCardAssociation, IkasCardType, IkasCartAPI, IkasCategory, IkasCategoryAPI, IkasCategoryList, IkasCategoryListPropValue, IkasCategoryListSortType, IkasCategoryListType, IkasCategoryPropValue, IkasCheckout, IkasCheckoutAPI, IkasCheckoutPage, IkasCheckoutRecoveryEmailStatus, IkasCheckoutRecoveryStatus, IkasCheckoutStatus, IkasCityAPI, IkasCountryAPI, IkasCustomer, IkasCustomerAPI, IkasCustomerAddress, IkasDistrictAPI, IkasHTMLMetaData, IkasHTMLMetaDataAPI, IkasHTMLMetaDataTargetType, IkasImage, IkasLinkPropValue, IkasLinkType, IkasMerchantAPI, IkasMerchantSettings, IkasNavigationLink, IkasOrder, IkasOrderCancelledReason, IkasOrderLineItem, IkasOrderPackageFulfillStatus, IkasOrderPackageStatus, IkasOrderPaymentStatus, IkasOrderShippingMethod, IkasOrderStatus, IkasOrderTransaction, IkasPage, IkasPageComponentPropValue, IkasPageDataProvider, IkasPageEditor, IkasPageHead, IkasPaymentMethod, IkasProduct, IkasProductAPI, IkasProductAttribute, IkasProductAttributeAPI, IkasProductAttributeValue, IkasProductDetail, IkasProductDetailPropValue, IkasProductList, IkasProductListFilter, IkasProductListPropValue, IkasProductListSortType, IkasProductListType, IkasProductPrice, IkasProductType, IkasProductVariant, IkasProductVariantType, IkasShippingMethod, IkasShippingMethodEnum, IkasStateAPI, IkasStorefrontAPI, IkasStorefrontConfig, IkasTheme, IkasThemeAPI, IkasThemeComponent, IkasThemeComponentProp, IkasThemeComponentPropType, IkasThemePage, IkasThemePageComponent, IkasThemePageType, IkasThemeSettings, IkasTransactionStatusEnum, IkasTransactionTypeEnum, IkasVariantSelectionType, IkasVariantType, IkasVariantTypeAPI, IkasVariantValue, home as IndexPage, login as LoginPage, _id_$2 as OrderDetailPage, index$4 as OrdersPage, recoverPassword as RecoverPasswordPage, register as RegisterPage, index$2 as SlugPage, apollo, decodeBase64, formatMoney, pascalCase, stringToSlug, validatePhoneNumber };

package/build/index.js

@@ -11236,6 +11236,20 @@ var IkasTextPropValueProvider = /** @class */ (function () {
     return IkasTextPropValueProvider;
 }());
 
+var IkasColorPropValueProvider = /** @class */ (function () {
+    function IkasColorPropValueProvider(colorPropValue) {
+        this.color = colorPropValue;
+    }
+    IkasColorPropValueProvider.prototype.getValue = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, this.color];
+            });
+        });
+    };
+    return IkasColorPropValueProvider;
+}());
+
 var IkasBooleanPropValueProvider = /** @class */ (function () {
     function IkasBooleanPropValueProvider(textPropValue) {
         this.bool = textPropValue;
@@ -11353,6 +11367,7 @@ var IkasPageDataProvider = /** @class */ (function () {
                 props: {
                     propValuesStr: JSON.stringify(this.pageComponentPropValues),
                     page: mobx.toJS(this.page) || null,
+                    settingsStr: JSON.stringify(this.theme.settings || {}),
                 },
             };
         },
@@ -11626,6 +11641,10 @@ var IkasPageDataProvider = /** @class */ (function () {
                             case exports.IkasThemeComponentPropType.LINK:
                             case exports.IkasThemeComponentPropType.LIST_OF_LINK:
                                 propValueProvider = new IkasLinkPropValueProvider(propValue, this.theme);
+                                break;
+                            case exports.IkasThemeComponentPropType.COLOR:
+                                propValueProvider = new IkasColorPropValueProvider(propValue);
+                                break;
                         }
                         return [4 /*yield*/, (propValueProvider === null || propValueProvider === void 0 ? void 0 : propValueProvider.getValue())];
                     case 1: return [2 /*return*/, _a.sent()];
@@ -12892,6 +12911,7 @@ var IkasThemeComponentProp = /** @class */ (function () {
     IkasThemeComponentPropType["BRAND_LIST"] = "BRAND_LIST";
     IkasThemeComponentPropType["CATEGORY"] = "CATEGORY";
     IkasThemeComponentPropType["CATEGORY_LIST"] = "CATEGORY_LIST";
+    IkasThemeComponentPropType["COLOR"] = "COLOR";
     // TODO number
     // TODO productAttribute
 })(exports.IkasThemeComponentPropType || (exports.IkasThemeComponentPropType = {}));
@@ -12953,6 +12973,28 @@ var IkasThemePage = /** @class */ (function () {
     IkasThemePageType["CART"] = "CART";
 })(exports.IkasThemePageType || (exports.IkasThemePageType = {}));
 
+var IkasThemeColor = /** @class */ (function () {
+    function IkasThemeColor(data) {
+        this.id = data.id || v4();
+        this.displayName = data.displayName || "";
+        this.key = data.key || "";
+        this.color = data.color || "";
+        mobx.makeAutoObservable(this);
+    }
+    return IkasThemeColor;
+}());
+
+var IkasThemeSettings = /** @class */ (function () {
+    function IkasThemeSettings(data) {
+        if (data === void 0) { data = {}; }
+        this.colors = data.colors
+            ? data.colors.map(function (c) { return new IkasThemeColor(c); })
+            : [];
+        mobx.makeAutoObservable(this);
+    }
+    return IkasThemeSettings;
+}());
+
 var IkasTheme = /** @class */ (function () {
     function IkasTheme(data) {
         if (data === void 0) { data = {}; }
@@ -12961,6 +13003,9 @@ var IkasTheme = /** @class */ (function () {
             ? data.components.map(function (c) { return new IkasThemeComponent(c); })
             : [];
         this.pages = data.pages ? data.pages.map(function (p) { return new IkasThemePage(p); }) : [];
+        this.settings = data.settings
+            ? new IkasThemeSettings(data.settings)
+            : new IkasThemeSettings();
         mobx.makeAutoObservable(this);
     }
     Object.defineProperty(IkasTheme.prototype, "headerComponent", {
@@ -22859,8 +22904,9 @@ var style = {
 };
 
 var ThemeComponent = mobxReactLite.observer(function (_a) {
-    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index;
+    var pageComponentPropValue = _a.pageComponentPropValue, pageComponent = _a.pageComponent, index = _a.index, settingsStr = _a.settingsStr;
     var store = IkasStorefrontConfig.store, components = IkasStorefrontConfig.components;
+    var settings = new IkasThemeSettings(JSON.parse(settingsStr));
     var propValues = pageComponentPropValue.propValues;
     var hasNullValue = mobx.computed(function () {
         return Object.entries(propValues || {}).some(function (_a) {
@@ -22870,15 +22916,15 @@ var ThemeComponent = mobxReactLite.observer(function (_a) {
         });
     });
     var Component = components[pageComponent.componentId];
-    return (React.createElement("div", { id: index + "" }, hasNullValue.get() ? (React.createElement(ErrorComponent, null)) : (React.createElement(Component, __assign({ key: pageComponent.id }, propValues, { store: store })))));
+    return (React.createElement("div", { id: index + "" }, hasNullValue.get() ? (React.createElement(ErrorComponent, null)) : (React.createElement(Component, __assign({ key: pageComponent.id }, propValues, { settings: settings, store: store })))));
 });
 
 var IkasPage = mobxReactLite.observer(function (_a) {
     var _b, _c;
-    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr;
+    var propValues = _a.propValues, page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, settingsStr = _a.settingsStr;
     var renderComponent = function (pageComponent, index) {
         var pageComponentPropValue = propValues.find(function (pv) { return pv.pageComponent.id === pageComponent.id; });
-        return (React.createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent }));
+        return (React.createElement(ThemeComponent, { key: pageComponent.id, index: index, pageComponentPropValue: pageComponentPropValue, pageComponent: pageComponent, settingsStr: settingsStr }));
     };
     var headerComponent = (_b = propValues.find(function (pv) { return pv.component.isHeader; })) === null || _b === void 0 ? void 0 : _b.pageComponent;
     var footerComponent = (_c = propValues.find(function (pv) { return pv.component.isFooter; })) === null || _c === void 0 ? void 0 : _c.pageComponent;
@@ -23266,7 +23312,8 @@ var ThemeEditorComponent = mobxReactLite.observer(function (_a) {
         vm.onClick(pageComponent.id);
     };
     var rendered = mobx.computed(function () {
-        return hasNullValue.get() ? (React.createElement(ErrorComponent, null)) : (React.createElement(Component, __assign({ store: store }, propValues)));
+        var _a;
+        return hasNullValue.get() ? (React.createElement(ErrorComponent, null)) : (React.createElement(Component, __assign({ store: store }, propValues, { settings: (_a = vm.theme) === null || _a === void 0 ? void 0 : _a.settings })));
     });
     return (React.createElement("div", { ref: ref, style: { position: "relative" }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick },
         rendered.get(),
@@ -23352,10 +23399,10 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var Page = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23380,7 +23427,7 @@ var home = /*#__PURE__*/Object.freeze({
 });
 
 var Page$1 = function (_a) {
-    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr;
+    var page = _a.page, pageSpecificDataStr = _a.pageSpecificDataStr, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var _b = React.useState(false), isBrowser = _b[0], setIsBrowser = _b[1];
     var _c = React.useState(IkasPageDataProvider.initPropValues(propValuesStr, router$1)), propValues = _c[0], setPropValues = _c[1];
@@ -23391,7 +23438,7 @@ var Page$1 = function (_a) {
         setPropValues(IkasPageDataProvider.initPropValues(propValuesStr, router$1, isBrowser));
     }, [isBrowser, propValuesStr]);
     handleGTM(page, pageSpecificDataStr);
-    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr }));
+    return (React.createElement(IkasPage, { page: page, propValues: propValues, pageSpecificDataStr: pageSpecificDataStr, settingsStr: settingsStr }));
 };
 var index$1 = mobxReactLite.observer(Page$1);
 var getStaticPaths = function (context) { return __awaiter(void 0, void 0, void 0, function () {
@@ -23501,10 +23548,10 @@ var index$2 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$2 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { page: page, settingsStr: settingsStr, propValues: propValues }));
 };
 var getStaticPaths$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, customPages, customPagePaths;
@@ -23595,10 +23642,10 @@ var _id_$1 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$3 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$3 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23623,10 +23670,10 @@ var index$3 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$4 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$4 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23651,10 +23698,10 @@ var addresses = /*#__PURE__*/Object.freeze({
 });
 
 var Page$5 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$5 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23679,10 +23726,10 @@ var index$4 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$6 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getServerSideProps$1 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23707,10 +23754,10 @@ var _id_$2 = /*#__PURE__*/Object.freeze({
 });
 
 var Page$7 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$6 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23735,10 +23782,10 @@ var login = /*#__PURE__*/Object.freeze({
 });
 
 var Page$8 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$7 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23763,10 +23810,10 @@ var register = /*#__PURE__*/Object.freeze({
 });
 
 var Page$9 = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$8 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23791,10 +23838,10 @@ var forgotPassword = /*#__PURE__*/Object.freeze({
 });
 
 var Page$a = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$9 = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23819,10 +23866,10 @@ var recoverPassword = /*#__PURE__*/Object.freeze({
 });
 
 var Page$b = function (_a) {
-    var page = _a.page, propValuesStr = _a.propValuesStr;
+    var page = _a.page, propValuesStr = _a.propValuesStr, settingsStr = _a.settingsStr;
     var router$1 = router.useRouter();
     var propValues = IkasPageDataProvider.initPropValues(propValuesStr, router$1);
-    return React.createElement(IkasPage, { page: page, propValues: propValues });
+    return (React.createElement(IkasPage, { settingsStr: settingsStr, page: page, propValues: propValues }));
 };
 var getStaticProps$a = function (context) { return __awaiter(void 0, void 0, void 0, function () {
     var theme, provider;
@@ -23943,6 +23990,7 @@ exports.IkasThemeComponent = IkasThemeComponent;
 exports.IkasThemeComponentProp = IkasThemeComponentProp;
 exports.IkasThemePage = IkasThemePage;
 exports.IkasThemePageComponent = IkasThemePageComponent;
+exports.IkasThemeSettings = IkasThemeSettings;
 exports.IkasVariantType = IkasVariantType;
 exports.IkasVariantTypeAPI = IkasVariantTypeAPI;
 exports.IkasVariantValue = IkasVariantValue;

package/build/models/theme/component/prop/index.d.ts

@@ -18,5 +18,6 @@ export declare enum IkasThemeComponentPropType {
     BRAND = "BRAND",
     BRAND_LIST = "BRAND_LIST",
     CATEGORY = "CATEGORY",
-    CATEGORY_LIST = "CATEGORY_LIST"
+    CATEGORY_LIST = "CATEGORY_LIST",
+    COLOR = "COLOR"
 }

package/build/models/theme/index.d.ts

@@ -10,3 +10,4 @@ export { IkasProductListPropValue } from "./page/component/prop-value/product-li
 export { IkasProductDetailPropValue } from "./page/component/prop-value/product-detail";
 export { IkasCategoryPropValue } from "./page/component/prop-value/category";
 export { IkasCategoryListPropValue } from "./page/component/prop-value/category-list";
+export { IkasThemeSettings } from "./settings/index";

package/build/models/theme/settings/index.d.ts

@@ -0,0 +1,5 @@
+import { IkasThemeColor } from "./prop/index";
+export declare class IkasThemeSettings {
+    colors: IkasThemeColor[];
+    constructor(data?: Partial<IkasThemeSettings>);
+}

package/build/models/theme/settings/prop/index.d.ts

@@ -0,0 +1,7 @@
+export declare class IkasThemeColor {
+    id: string;
+    displayName: string;
+    key: string;
+    color: string;
+    constructor(data: Partial<IkasThemeColor>);
+}

package/build/models/theme/theme.d.ts

@@ -1,9 +1,11 @@
 import { IkasThemeComponent } from "./component/index";
 import { IkasThemePage } from "./page/index";
+import { IkasThemeSettings } from "./settings/index";
 export declare class IkasTheme {
     name: string;
     components: IkasThemeComponent[];
     pages: IkasThemePage[];
+    settings: IkasThemeSettings;
     constructor(data?: Partial<IkasTheme>);
     get headerComponent(): IkasThemeComponent | undefined;
     get footerComponent(): IkasThemeComponent | undefined;

package/build/pages/[slug]/index.d.ts

@@ -8,6 +8,7 @@ declare type Props = {
     pageSpecificDataStr: string;
     page: IkasThemePage;
     queryParams?: ParsedUrlQuery;
+    settingsStr: string;
 };
 declare const _default: React.FunctionComponent<Props>;
 export default _default;

package/build/pages/account/addresses.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/forgot-password.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/index.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/login.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/orders/[id].d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/orders/index.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/recover-password.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/account/register.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/cart.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/home.d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/pages/pages/[slug].d.ts

@@ -4,6 +4,7 @@ import { IkasThemePage } from "../../models/index";
 declare type Props = {
     propValuesStr: string;
     page: IkasThemePage;
+    settingsStr: string;
 };
 declare const Page: React.FC<Props>;
 export default Page;

package/build/utils/providers/page-data.d.ts

@@ -12,6 +12,7 @@ export declare class IkasPageDataProvider {
         props: {
             propValuesStr: string;
             page: IkasThemePage | null;
+            settingsStr: string;
         };
     };
     get isStaticPage(): boolean | null | undefined;

package/build/utils/providers/prop-value/color.d.ts

@@ -0,0 +1,6 @@
+import IkasPropValueProvider from "./index";
+export declare class IkasColorPropValueProvider implements IkasPropValueProvider<string> {
+    private color;
+    constructor(colorPropValue: string);
+    getValue(): Promise<string>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/storefront",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "main": "./build/index.js",
   "module": "./build/index.es.js",
   "author": "Umut Ozan Yıldırım",