@flightlesslabs/dodo-ui 0.17.0-beta-2 → 0.17.2

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.ts

@@ -0,0 +1,107 @@
+import { browser } from '$app/environment';
+
+const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
+
+export type AutoCustomizeConfigDataColors = {
+  primary?: string;
+  secondary?: string;
+  neutral?: string;
+  safe?: string;
+  warning?: string;
+  danger?: string;
+};
+
+export type AutoCustomizeConfigDataComponents = {
+  roundness?: number;
+  elementHeight?: number;
+  borderWidth?: number;
+};
+
+export type AutoCustomizeConfigData = {
+  colors?: AutoCustomizeConfigDataColors;
+  components?: AutoCustomizeConfigDataComponents;
+  space?: number;
+};
+
+export const autoCustomizeConfigdefaultData: AutoCustomizeConfigData = {
+  colors: {
+    primary: 'violet',
+    secondary: 'blue',
+    neutral: 'gray',
+    safe: 'emerald',
+    warning: 'amber',
+    danger: 'red',
+  },
+  components: {
+    roundness: 0,
+    elementHeight: 0,
+    borderWidth: 0,
+  },
+  space: 0,
+};
+
+function getDefaultData() {
+  if (!browser) {
+    return autoCustomizeConfigdefaultData;
+  }
+
+  let values = JSON.parse(localStorage.getItem(AUTO_CUSTOMIZE_TOOL_CONFIG) || `{}`);
+
+  values = { ...autoCustomizeConfigdefaultData, ...values };
+
+  return values as AutoCustomizeConfigData;
+}
+
+function createAutoCustomizeConfigStore() {
+  let updatedAt: number = $state(Date.now());
+  let data: AutoCustomizeConfigData = $state(getDefaultData());
+
+  return {
+    get data() {
+      return data;
+    },
+    get updatedAt() {
+      return updatedAt;
+    },
+    updateData(newData: Partial<AutoCustomizeConfigData>) {
+      data = {
+        ...data,
+        ...newData,
+      };
+      updatedAt = Date.now();
+
+      if (browser) {
+        localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
+      }
+    },
+    updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>) {
+      const colors = {
+        ...data.colors,
+        ...newData,
+      };
+
+      this.updateData({ colors });
+    },
+    updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>) {
+      const components = {
+        ...data.components,
+        ...newData,
+      };
+
+      this.updateData({ components });
+    },
+    reset() {
+      data = autoCustomizeConfigdefaultData;
+      updatedAt = Date.now();
+
+      if (browser) {
+        localStorage.setItem(
+          AUTO_CUSTOMIZE_TOOL_CONFIG,
+          JSON.stringify(autoCustomizeConfigdefaultData),
+        );
+      }
+    },
+  };
+}
+
+export const useAutoCustomizeConfigStore = createAutoCustomizeConfigStore();

package/src/lib/styles/_colors.css

@@ -7,7 +7,7 @@
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
-  /* Default color */
+  /* Neutral color */
   --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
   --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
   --dodo-color-neutral-200: var(--dodo-color-base-gray-200);