@newtonedev/configurator 0.1.3 → 0.1.4

package/dist/bridge/toCSS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toCSS.d.ts","sourceRoot":"","sources":["../../src/bridge/toCSS.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAMlD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAoCtD"}
+{"version":3,"file":"toCSS.d.ts","sourceRoot":"","sources":["../../src/bridge/toCSS.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAMlD;;;GAGG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAkCtD"}

package/dist/bridge/toThemeConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAC;AAoE7E;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CA8F1E"}
+{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAC;AAoE7E;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CAqF1E"}

package/dist/index.cjs

@@ -74,8 +74,7 @@ var DEFAULT_CONFIGURATOR_STATE = {
     dark: { strength: "none", hue: 220 }
   },
   preview: {
-    mode: "light",
-    theme: "neutral"
+    mode: "light"
   },
   spacing: {
     preset: "md"
@@ -399,11 +398,6 @@ function configuratorReducer(state, action) {
         ...state,
         preview: { ...state.preview, mode: action.mode }
       };
-    case "SET_PREVIEW_THEME":
-      return {
-        ...state,
-        preview: { ...state.preview, theme: action.theme }
-      };
     // Control actions
     case "RESET":
       return DEFAULT_CONFIGURATOR_STATE;
@@ -527,15 +521,6 @@ function toThemeConfig(state) {
   const radiusMultiplier = roundnessToMultiplier(state.roundness?.intensity ?? 0.5);
   return {
     colorSystem: { dynamicRange, palettes },
-    themes: {
-      neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-      primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-      secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-      strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
-    },
-    elevation: {
-      offsets: [-0.02, 0, 0.04]
-    },
     spacing: {
       "00": Math.round(spacingBase * 0),
       // Always 0
@@ -829,7 +814,7 @@ function PalettePanel({ palette, index, dispatch, previewColors, state }) {
       onSubmitEditing: handleHexSubmit,
       placeholder: "#000000"
     }
-  )), effectiveKeyColor !== void 0 && /* @__PURE__ */ React__default.default.createElement(reactNative.Pressable, { onPress: handleClearKeyColor, style: styles.autoButton }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.autoText, { color: newtone.srgbToHex(tokens.interactive.srgb) }] }, "Auto"))), hexError !== "" && /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.errorText, { color: newtone.srgbToHex(tokens.error.srgb) }] }, hexError)), isNeutral && previewColors && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React__default.default.createElement(
+  )), effectiveKeyColor !== void 0 && /* @__PURE__ */ React__default.default.createElement(reactNative.Pressable, { onPress: handleClearKeyColor, style: styles.autoButton }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.autoText, { color: newtone.srgbToHex(tokens.accent.fill.srgb) }] }, "Auto"))), hexError !== "" && /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.errorText, { color: newtone.srgbToHex(tokens.error.fill.srgb) }] }, hexError)), isNeutral && previewColors && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React__default.default.createElement(
     reactNative.View,
     {
       key: i,
@@ -1027,38 +1012,20 @@ var styles2 = reactNative.StyleSheet.create({
     flex: 1
   }
 });
-var THEME_OPTIONS = [
-  { label: "Neutral", value: "neutral" },
-  { label: "Primary", value: "primary" },
-  { label: "Secondary", value: "secondary" },
-  { label: "Strong", value: "strong" }
-];
-function PreviewCard({
-  state,
-  dispatch
-}) {
+function PreviewCard() {
   const tokens = components.useTokens(1);
-  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles3.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles3.controls }, /* @__PURE__ */ React__default.default.createElement(
-    components.Select,
-    {
-      options: THEME_OPTIONS,
-      value: state.preview.theme,
-      onValueChange: (t) => dispatch({ type: "SET_PREVIEW_THEME", theme: t }),
-      label: "Theme"
-    }
-  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "accent", size: "sm" }, "Primary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "neutral", size: "sm" }, "Secondary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "tertiary", semantic: "neutral", size: "sm" }, "Ghost"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", semantic: "neutral", size: "sm" }, "Outline")), /* @__PURE__ */ React__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
-  } }), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles3.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "accent", size: "sm" }, "Primary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "neutral", size: "sm" }, "Secondary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "tertiary", semantic: "neutral", size: "sm" }, "Ghost"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", semantic: "neutral", size: "sm" }, "Outline")), /* @__PURE__ */ React__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
+  } }), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.success.fill.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.warning.fill.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.error.fill.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
 }
-function PreviewPanel({ state, dispatch, themeConfig }) {
+function PreviewPanel({ state, themeConfig }) {
   return /* @__PURE__ */ React__default.default.createElement(
     components.NewtoneProvider,
     {
-      key: `${state.preview.mode}-${state.preview.theme}`,
+      key: state.preview.mode,
       config: themeConfig,
-      initialMode: state.preview.mode,
-      initialTheme: state.preview.theme
+      initialMode: state.preview.mode
     },
-    /* @__PURE__ */ React__default.default.createElement(PreviewCard, { state, dispatch })
+    /* @__PURE__ */ React__default.default.createElement(PreviewCard, null)
   );
 }
 var styles3 = reactNative.StyleSheet.create({
@@ -1068,11 +1035,6 @@ var styles3 = reactNative.StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "700"
-  },
-  controls: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    gap: 16
   }
 });
 var previewStyles = reactNative.StyleSheet.create({
@@ -1103,9 +1065,7 @@ function toCSS(state) {
     const tokens = components.computeTokens(
       config.colorSystem,
       mode,
-      config.themes.neutral,
       1,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
@@ -1124,19 +1084,19 @@ function toCSS(state) {
 `;
     css += `  --newtone-text-secondary: ${newtone.srgbToHex(tokens.textSecondary.srgb)};
 `;
-    css += `  --newtone-interactive: ${newtone.srgbToHex(tokens.interactive.srgb)};
+    css += `  --newtone-accent: ${newtone.srgbToHex(tokens.accent.fill.srgb)};
 `;
-    css += `  --newtone-interactive-hover: ${newtone.srgbToHex(tokens.interactiveHover.srgb)};
+    css += `  --newtone-accent-hover: ${newtone.srgbToHex(tokens.accent.fillHover.srgb)};
 `;
-    css += `  --newtone-interactive-active: ${newtone.srgbToHex(tokens.interactiveActive.srgb)};
+    css += `  --newtone-accent-active: ${newtone.srgbToHex(tokens.accent.fillActive.srgb)};
 `;
     css += `  --newtone-border: ${newtone.srgbToHex(tokens.border.srgb)};
 `;
-    css += `  --newtone-success: ${newtone.srgbToHex(tokens.success.srgb)};
+    css += `  --newtone-success: ${newtone.srgbToHex(tokens.success.fill.srgb)};
 `;
-    css += `  --newtone-warning: ${newtone.srgbToHex(tokens.warning.srgb)};
+    css += `  --newtone-warning: ${newtone.srgbToHex(tokens.warning.fill.srgb)};
 `;
-    css += `  --newtone-error: ${newtone.srgbToHex(tokens.error.srgb)};
+    css += `  --newtone-error: ${newtone.srgbToHex(tokens.error.fill.srgb)};
 `;
     css += `}
 
@@ -1365,7 +1325,7 @@ function Configurator({
       },
       label: "Dark Mode"
     }
-  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRow }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(PreviewPanel, { state, dispatch, themeConfig }))), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.designRow }, /* @__PURE__ */ React__default.default.createElement(DesignPanel, { state, dispatch })), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React__default.default.createElement(
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRow }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(PreviewPanel, { state, themeConfig }))), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.designRow }, /* @__PURE__ */ React__default.default.createElement(DesignPanel, { state, dispatch })), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React__default.default.createElement(
     reactNative.Pressable,
     {
       key: index,