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

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

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

package/dist/cjs/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,iCAAwC;AACxC,oBAAkD;AAElD,2BAA8B;AAC9B,0BAA6B;AAAA,IAE7B,wBAAS,gBAAgB,MAAM;AAC7B,+BAAU,MAAM;AACd,UAAM,WAAO,oDAAwB;AACrC,4CAAc,IAAI;AAAA,EACpB,CAAC;AAED,0BAAK,yBAAyB,MAAM;AAClC,UAAM,UAAU,IAAI,iCAAa,QAAW;AAAA,MAC1C,MAAM;AAAA,IACR,CAAC;AACD,8BAAO,QAAQ,MAAM,IAAI,EAAE,KAAK,MAAM;AAAA,EACxC,CAAC;AAED,0BAAK,8EAA8E,MAAM;AACvF,UAAM,SAAS,IAAI,iCAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,QAAQ,IAAI,iCAAa,QAAQ;AAAA,MACrC,MAAM;AAAA,IACR,CAAC;AACD,8BAAO,OAAO,MAAM,IAAI,EAAE,KAAK,MAAM;AACrC,8BAAO,MAAM,MAAM,IAAI,EAAE,KAAK,UAAU;AAAA,EAC1C,CAAC;AAED,0BAAK,2GAA2G,MAAM;AACpH,UAAM,SAAS,IAAI,iCAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,SAAS,IAAI,iCAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,IACR,CAAC;AACD,8BAAO,OAAO,MAAM,IAAI,EAAE,KAAK,UAAU;AACzC,UAAM,SAAS,IAAI,iCAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,MACN,eAAe;AAAA,IACjB,CAAC;AACD,8BAAO,OAAO,MAAM,IAAI,EAAE,KAAK,sBAAsB;AAAA,EACvD,CAAC;AAED,0BAAK,6BAA6B,MAAM;AACtC,UAAM,SAAS,IAAI,iCAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,QAAQ,IAAI,iCAAa,QAAQ;AAAA,MACrC,MAAM;AAAA,IACR,CAAC;AACD,8BAAO,OAAO,MAAM,IAAI,EAAE,KAAK,OAAO;AACtC,8BAAO,MAAM,MAAM,IAAI,EAAE,KAAK,MAAM;AAAA,EACtC,CAAC;AAED,0BAAK,qCAAqC,MAAM;AAC9C,UAAM,SAAS,IAAI,iCAAa,QAAW;AAAA,MACzC,MAAM;AAAA,IACR,CAAC;AACD,UAAM,SAAS,IAAI,iCAAa,QAAQ;AAAA,MACtC,MAAM;AAAA,MACN,SAAS;AAAA,IACX,CAAC;AACD,8BAAO,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/cjs/helpers/{getTokens.js → ThemeManagerContext.js}

@@ -16,15 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var getTokens_exports = {};
-__export(getTokens_exports, {
-  getTokens: () => getTokens
+var ThemeManagerContext_exports = {};
+__export(ThemeManagerContext_exports, {
+  ThemeManagerContext: () => ThemeManagerContext
 });
-module.exports = __toCommonJS(getTokens_exports);
-var import_config = require("../config");
-const getTokens = () => (0, import_config.getConfig)().tokensParsed;
+module.exports = __toCommonJS(ThemeManagerContext_exports);
+var import_react = require("react");
+const ThemeManagerContext = (0, import_react.createContext)(null);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getTokens
+  ThemeManagerContext
 });
-//# sourceMappingURL=getTokens.js.map
+//# sourceMappingURL=ThemeManagerContext.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAIvB,MAAM,0BAAsB,4BAAmC,IAAI;",
+  "names": []
+}

package/dist/cjs/helpers/createPropMapper.js

@@ -296,7 +296,7 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   const fontsParsed = languageContext ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, languageContext) : conf.fontsParsed;
   let valOrVar;
   let hasSet = false;
-  if (theme[value]) {
+  if (value in theme) {
     valOrVar = theme[value];
     hasSet = true;
   } else {
@@ -332,14 +332,14 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   }
   if (hasSet) {
     if (process.env.NODE_ENV === "development" && import_isDevTools.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.`
       );