@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.221

package/dist/esm/helpers/ThemeManager.test.js

@@ -2,60 +2,447 @@ import { getDefaultTamaguiConfig } from "@tamagui/config-default-node";
 import { beforeAll, describe, expect, test } from "vitest";
 import { createTamagui } from "../createTamagui";
 import { ThemeManager } from "./ThemeManager";
+const conf = getDefaultTamaguiConfig();
 describe("ThemeManager", () => {
   beforeAll(() => {
-    const conf = getDefaultTamaguiConfig();
     createTamagui(conf);
   });
   test("Changes theme to dark", () => {
-    const manager = new ThemeManager(void 0, {
-      name: "dark"
-    });
+    const manager = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
     expect(manager.state.name).toBe("dark");
   });
   test('Given parent theme "dark" and child theme "red" to return theme "dark_red"', () => {
-    const parent = new ThemeManager(void 0, {
-      name: "dark"
-    });
-    const child = new ThemeManager(parent, {
-      name: "red"
-    });
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
     expect(parent.state.name).toBe("dark");
     expect(child.state.name).toBe("dark_red");
   });
   test('Given parent theme "dark", child theme "red_alt2" and component "Button" returns "dark_red_alt2_Button"', () => {
-    const parent = new ThemeManager(void 0, {
-      name: "dark"
-    });
-    const child1 = new ThemeManager(parent, {
-      name: "red"
-    });
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
     expect(child1.state.name).toBe("dark_red");
-    const child2 = new ThemeManager(child1, {
-      name: "alt2",
-      componentName: "Button"
-    });
+    const child2 = new ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Button"
+      },
+      child1
+    );
     expect(child2.state.name).toBe("dark_red_alt2_Button");
   });
-  test('Inverts "light" to "dark"', () => {
-    const parent = new ThemeManager(void 0, {
-      name: "light"
-    });
-    const child = new ThemeManager(parent, {
-      name: "dark"
-    });
+  test('Given parent theme "dark", child theme "red" and component "Button" returns "dark_red_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red_Button");
+  });
+  test('Given parent theme "dark", child theme "red" and missing component "Card" returns "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red");
+  });
+  test('Changes "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
     expect(parent.state.name).toBe("light");
     expect(child.state.name).toBe("dark");
   });
+  test('Inverts "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        inverse: true
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark");
+  });
   test('Inverts "light_red" to "dark_red"', () => {
-    const parent = new ThemeManager(void 0, {
-      name: "light"
-    });
-    const child1 = new ThemeManager(parent, {
-      name: "red",
-      inverse: true
-    });
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red",
+        inverse: true
+      },
+      parent
+    );
     expect(child1.state.name).toBe("dark_red");
   });
+  test("Updates state", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const newState = parent.updateState({
+      name: "dark"
+    });
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "className": "t_dark",
+        "name": "dark",
+        "parentName": "",
+        "theme": {
+          "background": {
+            "isVar": true,
+            "key": "color-2",
+            "name": "background",
+            "val": "#000",
+            "variable": "",
+          },
+          "color": {
+            "isVar": true,
+            "key": "color-1",
+            "name": "color",
+            "val": "#fff",
+            "variable": "",
+          },
+        },
+      }
+    `);
+    expect(parent.state.name).toBe("dark");
+  });
+  test("Returns parent on empty", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: null
+      },
+      parent
+    );
+    expect(child).toBe(parent);
+  });
+  test("Resets theme", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark");
+    expect(child.parentManager).toBe(parent);
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    expect(child2.parentManager).toBe(child);
+    expect(child2.state.name).toBe("light");
+  });
+  test("Nested invert and reset", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    const child3 = new ThemeManager(
+      {
+        inverse: true
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark");
+  });
+  test("Updates from null the new theme nested 3 themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "red"
+      },
+      a
+    );
+    expect(b.state.name).toBe("dark_red");
+    const c = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      b
+    );
+    expect(c.state.name).toBe("dark_red_alt2");
+  });
+  test("Ignored dup themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "dark"
+      },
+      a
+    );
+    expect(b === a).toBe(true);
+  });
+  test("Nested component themes fallback to grandparents", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        name: "blue"
+      },
+      child
+    );
+    expect(child2.state.name).toBe("dark_blue");
+    const child3 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark_blue_Button");
+  });
+  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        componentName: "Spacer"
+      },
+      child
+    );
+    expect(child2).toBe(child);
+  });
+  test(`Doesn't find invalid parent when only passing component`, () => {
+    expect(!!conf.themes["dark_Card"]).toBeTruthy();
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      parent
+    );
+    expect(child.state.name).toBe(parent.state.name);
+  });
+  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Missing"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red");
+  });
+  test(`Uses the full className without the light/dark prefix`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red_alt2"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_alt2");
+    const child2 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    const child3 = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      child2
+    );
+    expect(child3.state.className).toBe("t_red_alt2");
+  });
+  test(`Finds component dark_red + Button`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark_red",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_Button");
+    expect(child.state.name).toBe("dark_red_Button");
+  });
+  test(`Drops componentName if only regular name found at stronger level`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "alt1",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red_alt1");
+  });
+  test(`Component name + theme change when nested already`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "yellow",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_yellow_Button");
+  });
 });
 //# sourceMappingURL=ThemeManager.test.js.map

package/dist/esm/helpers/ThemeManager.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ThemeManager.test.tsx"],
-  "sourcesContent": ["import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'\nimport { beforeAll, describe, expect, test } from 'vitest'\n\nimport { createTamagui } from '../createTamagui'\nimport { ThemeManager } from './ThemeManager'\n\ndescribe('ThemeManager', () => {\n  beforeAll(() => {\n    const conf = getDefaultTamaguiConfig()\n    createTamagui(conf)\n  })\n\n  test('Changes theme to dark', () => {\n    const manager = new ThemeManager(undefined, {\n      name: 'dark',\n    })\n    expect(manager.state.name).toBe('dark')\n  })\n\n  test('Given parent theme \"dark\" and child theme \"red\" to return theme \"dark_red\"', () => {\n    const parent = new ThemeManager(undefined, {\n      name: 'dark',\n    })\n    const child = new ThemeManager(parent, {\n      name: 'red',\n    })\n    expect(parent.state.name).toBe('dark')\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red_alt2\" and component \"Button\" returns \"dark_red_alt2_Button\"', () => {\n    const parent = new ThemeManager(undefined, {\n      name: 'dark',\n    })\n    const child1 = new ThemeManager(parent, {\n      name: 'red',\n    })\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(child1, {\n      name: 'alt2',\n      componentName: 'Button',\n    })\n    expect(child2.state.name).toBe('dark_red_alt2_Button')\n  })\n\n  test('Inverts \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(undefined, {\n      name: 'light',\n    })\n    const child = new ThemeManager(parent, {\n      name: 'dark',\n    })\n    expect(parent.state.name).toBe('light')\n    expect(child.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light_red\" to \"dark_red\"', () => {\n    const parent = new ThemeManager(undefined, {\n      name: 'light',\n    })\n    const child1 = new ThemeManager(parent, {\n      name: 'red',\n      inverse: true,\n    })\n    expect(child1.state.name).toBe('dark_red')\n  })\n})\n"],
-  "mappings": "AAAA,SAAS,+BAA+B;AACxC,SAAS,WAAW,UAAU,QAAQ,YAAY;AAElD,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB,MAAM;AAC7B,YAAU,MAAM;AACd,UAAM,OAAO,wBAAwB;AACrC,kBAAc,IAAI;AAAA,EACpB,CAAC;AAED,OAAK,yBAAyB,MAAM;AAClC,UAAM,UAAU,IAAI,aAAa,QAAW;AAAA,MAC1C,MAAM;AAAA,IACR,CAAC;AACD,WAAO,QAAQ,MAAM,IAAI,EAAE,KAAK,MAAM;AAAA,EACxC,CAAC;AAED,OAAK,8EAA8E,MAAM;AACvF,UAAM,SAAS,IAAI,aAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,QAAQ,IAAI,aAAa,QAAQ;AAAA,MACrC,MAAM;AAAA,IACR,CAAC;AACD,WAAO,OAAO,MAAM,IAAI,EAAE,KAAK,MAAM;AACrC,WAAO,MAAM,MAAM,IAAI,EAAE,KAAK,UAAU;AAAA,EAC1C,CAAC;AAED,OAAK,2GAA2G,MAAM;AACpH,UAAM,SAAS,IAAI,aAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,SAAS,IAAI,aAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,IACR,CAAC;AACD,WAAO,OAAO,MAAM,IAAI,EAAE,KAAK,UAAU;AACzC,UAAM,SAAS,IAAI,aAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,MACN,eAAe;AAAA,IACjB,CAAC;AACD,WAAO,OAAO,MAAM,IAAI,EAAE,KAAK,sBAAsB;AAAA,EACvD,CAAC;AAED,OAAK,6BAA6B,MAAM;AACtC,UAAM,SAAS,IAAI,aAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,QAAQ,IAAI,aAAa,QAAQ;AAAA,MACrC,MAAM;AAAA,IACR,CAAC;AACD,WAAO,OAAO,MAAM,IAAI,EAAE,KAAK,OAAO;AACtC,WAAO,MAAM,MAAM,IAAI,EAAE,KAAK,MAAM;AAAA,EACtC,CAAC;AAED,OAAK,qCAAqC,MAAM;AAC9C,UAAM,SAAS,IAAI,aAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,SAAS,IAAI,aAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,MACN,SAAS;AAAA,IACX,CAAC;AACD,WAAO,OAAO,MAAM,IAAI,EAAE,KAAK,UAAU;AAAA,EAC3C,CAAC;AACH,CAAC;",
+  "sourcesContent": ["import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'\nimport { beforeAll, describe, expect, test } from 'vitest'\n\nimport { createTamagui } from '../createTamagui'\nimport { ThemeManager } from './ThemeManager'\n\nconst conf = getDefaultTamaguiConfig()\n\ndescribe('ThemeManager', () => {\n  beforeAll(() => {\n    createTamagui(conf)\n  })\n\n  test('Changes theme to dark', () => {\n    const manager = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    expect(manager.state.name).toBe('dark')\n  })\n\n  test('Given parent theme \"dark\" and child theme \"red\" to return theme \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('dark')\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red_alt2\" and component \"Button\" returns \"dark_red_alt2_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        name: 'alt2',\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_alt2_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and component \"Button\" returns \"dark_red_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and missing component \"Card\" returns \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red')\n  })\n\n  test('Changes \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('light')\n    expect(child.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light_red\" to \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n  })\n\n  test('Updates state', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const newState = parent.updateState({\n      name: 'dark',\n    })\n    expect(newState).toMatchInlineSnapshot(`\n      {\n        \"className\": \"t_dark\",\n        \"name\": \"dark\",\n        \"parentName\": \"\",\n        \"theme\": {\n          \"background\": {\n            \"isVar\": true,\n            \"key\": \"color-2\",\n            \"name\": \"background\",\n            \"val\": \"#000\",\n            \"variable\": \"\",\n          },\n          \"color\": {\n            \"isVar\": true,\n            \"key\": \"color-1\",\n            \"name\": \"color\",\n            \"val\": \"#fff\",\n            \"variable\": \"\",\n          },\n        },\n      }\n    `)\n    expect(parent.state.name).toBe('dark')\n  })\n\n  test('Returns parent on empty', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: null,\n      },\n      parent\n    )\n    expect(child).toBe(parent)\n  })\n\n  test('Resets theme', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark')\n    expect(child.parentManager).toBe(parent)\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    expect(child2.parentManager).toBe(child)\n    expect(child2.state.name).toBe('light')\n  })\n\n  test('Nested invert and reset', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    const child3 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark')\n  })\n\n  test('Updates from null the new theme nested 3 themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'red',\n      },\n      a\n    )\n    expect(b.state.name).toBe('dark_red')\n    const c = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      b\n    )\n    expect(c.state.name).toBe('dark_red_alt2')\n  })\n\n  test('Ignored dup themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      a\n    )\n    expect(b === a).toBe(true)\n  })\n\n  test('Nested component themes fallback to grandparents', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        name: 'blue',\n      },\n      child\n    )\n    expect(child2.state.name).toBe('dark_blue')\n    const child3 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark_blue_Button')\n  })\n\n  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Spacer',\n      },\n      child\n    )\n    expect(child2).toBe(child)\n  })\n\n  test(`Doesn't find invalid parent when only passing component`, () => {\n    expect(!!conf.themes['dark_Card']).toBeTruthy()\n\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe(parent.state.name)\n  })\n\n  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Missing',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test(`Uses the full className without the light/dark prefix`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red_alt2',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_alt2')\n\n    const child2 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    const child3 = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      child2\n    )\n    expect(child3.state.className).toBe('t_red_alt2')\n  })\n\n  test(`Finds component dark_red + Button`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark_red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_Button')\n    expect(child.state.name).toBe('dark_red_Button')\n  })\n\n  test(`Drops componentName if only regular name found at stronger level`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'alt1',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_red_alt1')\n  })\n\n  test(`Component name + theme change when nested already`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'yellow',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_yellow_Button')\n  })\n})\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/ThemeManagerContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const ThemeManagerContext = createContext(null);
+export {
+  ThemeManagerContext
+};
+//# sourceMappingURL=ThemeManagerContext.js.map

package/dist/esm/helpers/ThemeManagerContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManagerContext.tsx"],
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { ThemeManager } from './ThemeManager'\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,sBAAsB,cAAmC,IAAI;",
+  "names": []
+}

package/dist/esm/helpers/createPropMapper.js

@@ -270,7 +270,7 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   const fontsParsed = languageContext ? getFontsForLanguage(conf.fontsParsed, languageContext) : conf.fontsParsed;
   let valOrVar;
   let hasSet = false;
-  if (theme[value]) {
+  if (value in theme) {
     valOrVar = theme[value];
     hasSet = true;
   } else {
@@ -306,14 +306,14 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   }
   if (hasSet) {
     if (process.env.NODE_ENV === "development" && isDevTools && debug === "verbose") {
-      console.log(`   \uFE52 propMapper getToken`, key, valOrVar);
+      console.log(`   \uFE52 propMapper getToken`, key, valOrVar, theme);
     }
     return resolveVariableValue(key, valOrVar, resolveAs);
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.trace(
-        `\u26A0\uFE0F You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+      console.warn(
+        `\u26A0\uFE0F You passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
 
 Set the debug prop to true to see more detailed debug information.`
       );