@nozle-js/react 0.10.2 → 0.12.0

package/dist/styles/preset.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/preset.ts"],"names":[],"mappings":";;;AAAO,IAAM,WAAA,GAAc;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,SAAA;AAAA,UACT,QAAA,EAAU;AAAA;AACZ;AACF;AACF,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAS,WAAA,CAAY;AAAA,MACnB;AAAA,KACF,EAIG;AACD,MAAA,aAAA,CAAc;AAAA,QACZ,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,GAAA,EAAK;AAAA,SACP;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,QAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,eAAA,EAAiB,SAAA;AAAA,UACjB,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,iCAAA,EAAmC;AAAA,UACjC,MAAA,EAAQ,MAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY;AAAA,SACd;AAAA,QACA,iFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,kFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,mFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,aAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,OAAA,EAAS,iBAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,QAAA,EAAU,SAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,eAAA,EAAiB,SAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QACA,oDAAA,EAAsD;AAAA,UACpD,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,MAAA,EAAQ,mBAAA;AAAA,UACR,eAAA,EAAiB;AAAA,SACnB;AAAA,QACA,sDAAA,EAAwD;AAAA,UACtD,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,eAAA;AAAA,UAChB,OAAA,EAAS,cAAA;AAAA,UACT,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc;AAAA;AAChB,OACD,CAAA;AAAA,IACH;AAAA;AAEJ","file":"preset.cjs","sourcesContent":["export const nozlePreset = {\n  theme: {\n    extend: {\n      colors: {\n        nozle: {\n          normal: \"#22c55e\",\n          warning: \"#f59e0b\",\n          critical: \"#ef4444\",\n        },\n      },\n    },\n  },\n  plugins: [\n    function nozlePlugin({\n      addComponents,\n    }: {\n      addComponents: (\n        components: Record<string, Record<string, string>>\n      ) => void;\n    }) {\n      addComponents({\n        '[data-nozle=\"usage-meter\"][data-variant=\"bar\"]': {\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"0.25rem\",\n        },\n        '[data-nozle=\"usage-meter-track\"]': {\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n          backgroundColor: \"#e5e7eb\",\n          overflow: \"hidden\",\n        },\n        '[data-nozle=\"usage-meter-fill\"]': {\n          height: \"100%\",\n          borderRadius: \"9999px\",\n          transition: \"width 300ms ease\",\n        },\n        '[data-nozle=\"usage-meter\"][data-level=\"normal\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#22c55e\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"warning\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#f59e0b\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"critical\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#ef4444\",\n          },\n        '[data-nozle=\"plan-badge\"][data-variant=\"pill\"]': {\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          padding: \"0.125rem 0.5rem\",\n          borderRadius: \"9999px\",\n          fontSize: \"0.75rem\",\n          fontWeight: \"500\",\n          backgroundColor: \"#e0f2fe\",\n          color: \"#0369a1\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"card\"]': {\n          padding: \"1rem\",\n          borderRadius: \"0.5rem\",\n          border: \"1px solid #e5e7eb\",\n          backgroundColor: \"#fefce8\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"banner\"]': {\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          padding: \"0.75rem 1rem\",\n          backgroundColor: \"#fef3c7\",\n          borderRadius: \"0.375rem\",\n        },\n      });\n    },\n  ],\n};\n"]}
+{"version":3,"sources":["../../src/styles/preset.ts"],"names":[],"mappings":";;;AAIO,IAAM,WAAA,GAAc;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,SAAA;AAAA,UACT,QAAA,EAAU;AAAA;AACZ;AACF;AACF,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAS,WAAA,CAAY;AAAA,MACnB;AAAA,KACF,EAIG;AACD,MAAA,aAAA,CAAc;AAAA,QACZ,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,GAAA,EAAK;AAAA,SACP;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,QAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,eAAA,EAAiB,SAAA;AAAA,UACjB,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,iCAAA,EAAmC;AAAA,UACjC,MAAA,EAAQ,MAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY;AAAA,SACd;AAAA,QACA,iFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,kFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,mFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,aAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,OAAA,EAAS,iBAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,QAAA,EAAU,SAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,eAAA,EAAiB,SAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QACA,oDAAA,EAAsD;AAAA,UACpD,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,MAAA,EAAQ,mBAAA;AAAA,UACR,eAAA,EAAiB;AAAA,SACnB;AAAA,QACA,sDAAA,EAAwD;AAAA,UACtD,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,eAAA;AAAA,UAChB,OAAA,EAAS,cAAA;AAAA,UACT,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc;AAAA;AAChB,OACD,CAAA;AAAA,IACH;AAAA;AAEJ","file":"preset.cjs","sourcesContent":["/**\n * @deprecated Since 0.11.0 the components no longer read Tailwind classes or this preset. Theme them with\n * `appearance` on `BillingProvider` (see `@nozle-js/react/themes`). Kept so existing imports still build.\n */\nexport const nozlePreset = {\n  theme: {\n    extend: {\n      colors: {\n        nozle: {\n          normal: \"#22c55e\",\n          warning: \"#f59e0b\",\n          critical: \"#ef4444\",\n        },\n      },\n    },\n  },\n  plugins: [\n    function nozlePlugin({\n      addComponents,\n    }: {\n      addComponents: (\n        components: Record<string, Record<string, string>>\n      ) => void;\n    }) {\n      addComponents({\n        '[data-nozle=\"usage-meter\"][data-variant=\"bar\"]': {\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"0.25rem\",\n        },\n        '[data-nozle=\"usage-meter-track\"]': {\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n          backgroundColor: \"#e5e7eb\",\n          overflow: \"hidden\",\n        },\n        '[data-nozle=\"usage-meter-fill\"]': {\n          height: \"100%\",\n          borderRadius: \"9999px\",\n          transition: \"width 300ms ease\",\n        },\n        '[data-nozle=\"usage-meter\"][data-level=\"normal\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#22c55e\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"warning\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#f59e0b\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"critical\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#ef4444\",\n          },\n        '[data-nozle=\"plan-badge\"][data-variant=\"pill\"]': {\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          padding: \"0.125rem 0.5rem\",\n          borderRadius: \"9999px\",\n          fontSize: \"0.75rem\",\n          fontWeight: \"500\",\n          backgroundColor: \"#e0f2fe\",\n          color: \"#0369a1\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"card\"]': {\n          padding: \"1rem\",\n          borderRadius: \"0.5rem\",\n          border: \"1px solid #e5e7eb\",\n          backgroundColor: \"#fefce8\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"banner\"]': {\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          padding: \"0.75rem 1rem\",\n          backgroundColor: \"#fef3c7\",\n          borderRadius: \"0.375rem\",\n        },\n      });\n    },\n  ],\n};\n"]}

package/dist/styles/preset.d.cts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Since 0.11.0 the components no longer read Tailwind classes or this preset. Theme them with
+ * `appearance` on `BillingProvider` (see `@nozle-js/react/themes`). Kept so existing imports still build.
+ */
 declare const nozlePreset: {
     theme: {
         extend: {

package/dist/styles/preset.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Since 0.11.0 the components no longer read Tailwind classes or this preset. Theme them with
+ * `appearance` on `BillingProvider` (see `@nozle-js/react/themes`). Kept so existing imports still build.
+ */
 declare const nozlePreset: {
     theme: {
         extend: {

package/dist/styles/preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/preset.ts"],"names":[],"mappings":";AAAO,IAAM,WAAA,GAAc;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,SAAA;AAAA,UACT,QAAA,EAAU;AAAA;AACZ;AACF;AACF,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAS,WAAA,CAAY;AAAA,MACnB;AAAA,KACF,EAIG;AACD,MAAA,aAAA,CAAc;AAAA,QACZ,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,GAAA,EAAK;AAAA,SACP;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,QAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,eAAA,EAAiB,SAAA;AAAA,UACjB,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,iCAAA,EAAmC;AAAA,UACjC,MAAA,EAAQ,MAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY;AAAA,SACd;AAAA,QACA,iFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,kFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,mFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,aAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,OAAA,EAAS,iBAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,QAAA,EAAU,SAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,eAAA,EAAiB,SAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QACA,oDAAA,EAAsD;AAAA,UACpD,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,MAAA,EAAQ,mBAAA;AAAA,UACR,eAAA,EAAiB;AAAA,SACnB;AAAA,QACA,sDAAA,EAAwD;AAAA,UACtD,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,eAAA;AAAA,UAChB,OAAA,EAAS,cAAA;AAAA,UACT,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc;AAAA;AAChB,OACD,CAAA;AAAA,IACH;AAAA;AAEJ","file":"preset.js","sourcesContent":["export const nozlePreset = {\n  theme: {\n    extend: {\n      colors: {\n        nozle: {\n          normal: \"#22c55e\",\n          warning: \"#f59e0b\",\n          critical: \"#ef4444\",\n        },\n      },\n    },\n  },\n  plugins: [\n    function nozlePlugin({\n      addComponents,\n    }: {\n      addComponents: (\n        components: Record<string, Record<string, string>>\n      ) => void;\n    }) {\n      addComponents({\n        '[data-nozle=\"usage-meter\"][data-variant=\"bar\"]': {\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"0.25rem\",\n        },\n        '[data-nozle=\"usage-meter-track\"]': {\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n          backgroundColor: \"#e5e7eb\",\n          overflow: \"hidden\",\n        },\n        '[data-nozle=\"usage-meter-fill\"]': {\n          height: \"100%\",\n          borderRadius: \"9999px\",\n          transition: \"width 300ms ease\",\n        },\n        '[data-nozle=\"usage-meter\"][data-level=\"normal\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#22c55e\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"warning\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#f59e0b\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"critical\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#ef4444\",\n          },\n        '[data-nozle=\"plan-badge\"][data-variant=\"pill\"]': {\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          padding: \"0.125rem 0.5rem\",\n          borderRadius: \"9999px\",\n          fontSize: \"0.75rem\",\n          fontWeight: \"500\",\n          backgroundColor: \"#e0f2fe\",\n          color: \"#0369a1\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"card\"]': {\n          padding: \"1rem\",\n          borderRadius: \"0.5rem\",\n          border: \"1px solid #e5e7eb\",\n          backgroundColor: \"#fefce8\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"banner\"]': {\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          padding: \"0.75rem 1rem\",\n          backgroundColor: \"#fef3c7\",\n          borderRadius: \"0.375rem\",\n        },\n      });\n    },\n  ],\n};\n"]}
+{"version":3,"sources":["../../src/styles/preset.ts"],"names":[],"mappings":";AAIO,IAAM,WAAA,GAAc;AAAA,EACzB,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,SAAA;AAAA,UACT,QAAA,EAAU;AAAA;AACZ;AACF;AACF,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAS,WAAA,CAAY;AAAA,MACnB;AAAA,KACF,EAIG;AACD,MAAA,aAAA,CAAc;AAAA,QACZ,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,MAAA;AAAA,UACT,aAAA,EAAe,QAAA;AAAA,UACf,GAAA,EAAK;AAAA,SACP;AAAA,QACA,kCAAA,EAAoC;AAAA,UAClC,MAAA,EAAQ,QAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,eAAA,EAAiB,SAAA;AAAA,UACjB,QAAA,EAAU;AAAA,SACZ;AAAA,QACA,iCAAA,EAAmC;AAAA,UACjC,MAAA,EAAQ,MAAA;AAAA,UACR,YAAA,EAAc,QAAA;AAAA,UACd,UAAA,EAAY;AAAA,SACd;AAAA,QACA,iFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,kFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,mFAAA,EACE;AAAA,UACE,eAAA,EAAiB;AAAA,SACnB;AAAA,QACF,gDAAA,EAAkD;AAAA,UAChD,OAAA,EAAS,aAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,OAAA,EAAS,iBAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,QAAA,EAAU,SAAA;AAAA,UACV,UAAA,EAAY,KAAA;AAAA,UACZ,eAAA,EAAiB,SAAA;AAAA,UACjB,KAAA,EAAO;AAAA,SACT;AAAA,QACA,oDAAA,EAAsD;AAAA,UACpD,OAAA,EAAS,MAAA;AAAA,UACT,YAAA,EAAc,QAAA;AAAA,UACd,MAAA,EAAQ,mBAAA;AAAA,UACR,eAAA,EAAiB;AAAA,SACnB;AAAA,QACA,sDAAA,EAAwD;AAAA,UACtD,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB,eAAA;AAAA,UAChB,OAAA,EAAS,cAAA;AAAA,UACT,eAAA,EAAiB,SAAA;AAAA,UACjB,YAAA,EAAc;AAAA;AAChB,OACD,CAAA;AAAA,IACH;AAAA;AAEJ","file":"preset.js","sourcesContent":["/**\n * @deprecated Since 0.11.0 the components no longer read Tailwind classes or this preset. Theme them with\n * `appearance` on `BillingProvider` (see `@nozle-js/react/themes`). Kept so existing imports still build.\n */\nexport const nozlePreset = {\n  theme: {\n    extend: {\n      colors: {\n        nozle: {\n          normal: \"#22c55e\",\n          warning: \"#f59e0b\",\n          critical: \"#ef4444\",\n        },\n      },\n    },\n  },\n  plugins: [\n    function nozlePlugin({\n      addComponents,\n    }: {\n      addComponents: (\n        components: Record<string, Record<string, string>>\n      ) => void;\n    }) {\n      addComponents({\n        '[data-nozle=\"usage-meter\"][data-variant=\"bar\"]': {\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"0.25rem\",\n        },\n        '[data-nozle=\"usage-meter-track\"]': {\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n          backgroundColor: \"#e5e7eb\",\n          overflow: \"hidden\",\n        },\n        '[data-nozle=\"usage-meter-fill\"]': {\n          height: \"100%\",\n          borderRadius: \"9999px\",\n          transition: \"width 300ms ease\",\n        },\n        '[data-nozle=\"usage-meter\"][data-level=\"normal\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#22c55e\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"warning\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#f59e0b\",\n          },\n        '[data-nozle=\"usage-meter\"][data-level=\"critical\"] [data-nozle=\"usage-meter-fill\"]':\n          {\n            backgroundColor: \"#ef4444\",\n          },\n        '[data-nozle=\"plan-badge\"][data-variant=\"pill\"]': {\n          display: \"inline-flex\",\n          alignItems: \"center\",\n          padding: \"0.125rem 0.5rem\",\n          borderRadius: \"9999px\",\n          fontSize: \"0.75rem\",\n          fontWeight: \"500\",\n          backgroundColor: \"#e0f2fe\",\n          color: \"#0369a1\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"card\"]': {\n          padding: \"1rem\",\n          borderRadius: \"0.5rem\",\n          border: \"1px solid #e5e7eb\",\n          backgroundColor: \"#fefce8\",\n        },\n        '[data-nozle=\"upgrade-prompt\"][data-variant=\"banner\"]': {\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          padding: \"0.75rem 1rem\",\n          backgroundColor: \"#fef3c7\",\n          borderRadius: \"0.375rem\",\n        },\n      });\n    },\n  ],\n};\n"]}

package/dist/themes.cjs

@@ -0,0 +1,230 @@
+'use strict';
+
+// src/appearance/tokens.ts
+var CSS_VAR = {
+  colorPrimary: "--nozle-primary",
+  colorPrimaryForeground: "--nozle-primary-foreground",
+  colorBackground: "--nozle-background",
+  colorCard: "--nozle-card",
+  colorForeground: "--nozle-foreground",
+  colorMuted: "--nozle-muted",
+  colorMutedForeground: "--nozle-muted-foreground",
+  colorAccent: "--nozle-accent",
+  colorAccentForeground: "--nozle-accent-foreground",
+  colorBorder: "--nozle-border",
+  colorDanger: "--nozle-destructive",
+  colorWarning: "--nozle-warning",
+  colorSuccess: "--nozle-success",
+  colorSecondary: "--nozle-secondary",
+  colorInput: "--nozle-input",
+  colorHighlight: "--nozle-highlight",
+  colorHighlightForeground: "--nozle-highlight-foreground",
+  fontFamily: "--nozle-font",
+  fontFamilyNumbers: "--nozle-font-numbers",
+  labelFont: "--nozle-label-font",
+  labelTextTransform: "--nozle-label-transform",
+  labelLetterSpacing: "--nozle-label-spacing",
+  fontTitle: "--nozle-font-title",
+  fontHeading: "--nozle-font-heading",
+  fontMetric: "--nozle-font-metric",
+  fontBody: "--nozle-font-body",
+  fontMeta: "--nozle-font-meta",
+  fontAction: "--nozle-font-action",
+  borderRadius: "--nozle-radius",
+  borderWidth: "--nozle-border-width",
+  shadow: "--nozle-shadow",
+  buttonRadius: "--nozle-button-radius",
+  buttonBorderWidth: "--nozle-button-border-width",
+  buttonBorderColor: "--nozle-button-border",
+  buttonShadow: "--nozle-button-shadow"
+};
+var LIGHT = {
+  colorPrimary: "#4f46e5",
+  colorPrimaryForeground: "#ffffff",
+  colorBackground: "#ffffff",
+  colorCard: "#ffffff",
+  colorForeground: "#111827",
+  colorMuted: "#f3f4f6",
+  colorAccent: "#eef2ff",
+  colorAccentForeground: "#3730a3",
+  colorBorder: "#e5e7eb",
+  colorDanger: "#dc2626",
+  colorWarning: "#d97706",
+  colorSuccess: "#16a34a",
+  fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
+  borderRadius: "12px",
+  borderWidth: "1px",
+  shadow: "0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)"
+};
+var ALIASES = {
+  colorPrimary: ["--nozle-pricing-highlight", "--nozle-portal-accent"],
+  colorBackground: ["--nozle-pricing-bg", "--nozle-portal-background"],
+  colorCard: ["--nozle-pricing-card-bg"],
+  colorForeground: ["--nozle-portal-text"],
+  colorMuted: ["--nozle-portal-muted-background"],
+  colorMutedForeground: ["--nozle-portal-muted"],
+  colorBorder: ["--nozle-pricing-border", "--nozle-portal-border"],
+  borderRadius: ["--nozle-pricing-radius"]
+};
+function chain(key, last = LIGHT[key]) {
+  return [CSS_VAR[key], ...ALIASES[key] ?? []].reduceRight(
+    (fallback, name) => `var(${name}, ${fallback})`,
+    last
+  );
+}
+var soft = (color, base, percent) => `color-mix(in srgb, ${color} ${percent}%, ${base})`;
+chain("colorPrimary");
+var card = chain("colorCard");
+chain("colorDanger");
+chain("colorWarning");
+chain("colorSuccess");
+var foreground = chain("colorForeground");
+chain("colorPrimaryForeground");
+chain("fontFamily");
+var DERIVED_MUTED_FOREGROUND = `color-mix(in srgb, ${foreground} 62%, ${card})`;
+({
+  background: chain("colorBackground"),
+  muted: chain("colorMuted"),
+  mutedForeground: chain("colorMutedForeground", DERIVED_MUTED_FOREGROUND),
+  accent: chain("colorAccent"),
+  secondary: `var(--nozle-secondary, ${chain("colorMuted")})`,
+  input: `var(--nozle-input, ${chain("colorBorder")})`,
+  accentForeground: chain("colorAccentForeground"),
+  border: chain("colorBorder"),
+  radius: chain("borderRadius"),
+  borderWidth: chain("borderWidth"),
+  shadow: chain("shadow"),
+  /** Table header band and the lighter line between table rows. */
+  tableHeader: soft(chain("colorMuted"), card, 50),
+  rowLine: soft(chain("colorBorder"), card, 70)
+});
+
+// src/themes.ts
+var DARK_COLORS = {
+  colorPrimary: "#818cf8",
+  colorPrimaryForeground: "#0b1020",
+  colorBackground: "#0b0f19",
+  colorCard: "#111827",
+  colorForeground: "#f3f4f6",
+  colorMuted: "#1f2937",
+  colorMutedForeground: DERIVED_MUTED_FOREGROUND,
+  colorAccent: "#1e1b4b",
+  colorAccentForeground: "#c7d2fe",
+  colorBorder: "#374151",
+  colorDanger: "#f87171",
+  colorWarning: "#fbbf24",
+  colorSuccess: "#4ade80"
+};
+var COLOR_NAMES = Object.keys(DARK_COLORS);
+var LIGHT_COLORS = { ...LIGHT, colorMutedForeground: DERIVED_MUTED_FOREGROUND };
+var light = {
+  variables: { ...Object.fromEntries(COLOR_NAMES.map((name) => [name, LIGHT_COLORS[name]])), colorScheme: "light" }
+};
+var dark = {
+  variables: { ...DARK_COLORS, shadow: "0 1px 3px rgba(0,0,0,0.5)", colorScheme: "dark" }
+};
+var minimal = {
+  variables: { colorPrimary: "#111827", colorPrimaryForeground: "#ffffff", shadow: "none", borderRadius: "6px" }
+};
+var neobrutal = {
+  variables: {
+    colorPrimary: "#facc15",
+    colorPrimaryForeground: "#000000",
+    colorBorder: "#000000",
+    borderWidth: "2px",
+    borderRadius: "0px",
+    shadow: "4px 4px 0 var(--nozle-border, #000000)",
+    buttonBorderColor: "#000000",
+    buttonShadow: "3px 3px 0 #000000",
+    labelFont: "800 12px/1.4 var(--nozle-font, system-ui, sans-serif)",
+    fontTitle: "800 20px/1.25 var(--nozle-font, system-ui, sans-serif)",
+    fontHeading: "800 16px/1.35 var(--nozle-font, system-ui, sans-serif)",
+    labelTextTransform: "uppercase",
+    labelLetterSpacing: "0.06em"
+  }
+};
+var NOZLE_INK = "hsl(138 53% 8%)";
+var nozleCta = { padding: "0.625rem 1.5rem" };
+var nunito = "'Nunito', system-ui, sans-serif";
+var nozleFont = (size) => `${size} var(--nozle-font, ${nunito})`;
+var nozle = {
+  variables: {
+    colorPrimary: "hsl(11 90% 45%)",
+    colorPrimaryForeground: "#ffffff",
+    colorBackground: "hsl(138 30% 94%)",
+    colorCard: "#ffffff",
+    colorForeground: NOZLE_INK,
+    colorMuted: "hsl(138 35% 84%)",
+    colorMutedForeground: "hsl(138 20% 28%)",
+    colorAccent: "hsl(11 90% 95%)",
+    colorAccentForeground: "hsl(11 90% 39%)",
+    colorBorder: "hsl(138 25% 78%)",
+    colorDanger: "hsl(2 74% 46%)",
+    colorWarning: "hsl(38 92% 30%)",
+    colorSuccess: "hsl(152 62% 28%)",
+    colorSecondary: "#ffffff",
+    colorInput: "hsl(138 20% 46%)",
+    fontFamily: nunito,
+    fontFamilyNumbers: "'JetBrains Mono', ui-monospace, monospace",
+    labelFont: "800 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace",
+    // The dashboard type scale. Prices are Nunito; JetBrains Mono is for table numbers only.
+    fontTitle: nozleFont("900 20px/1.15"),
+    fontHeading: nozleFont("900 14px/1.25"),
+    fontMetric: nozleFont("800 24px/1"),
+    fontBody: nozleFont("400 13px/1.5"),
+    fontMeta: nozleFont("400 11.5px/1.4"),
+    fontAction: nozleFont("800 14px/1.4"),
+    labelTextTransform: "uppercase",
+    labelLetterSpacing: "0.18em",
+    borderRadius: "14px",
+    borderWidth: "1px",
+    shadow: "none",
+    buttonRadius: "9999px",
+    buttonBorderWidth: "2px",
+    buttonBorderColor: NOZLE_INK,
+    buttonShadow: `4px 4px 0 0 ${NOZLE_INK}`,
+    colorScheme: "light"
+  },
+  planCardLayout: "panel",
+  elements: {
+    pricingTable__grid: { gap: "1rem" },
+    planCard__cta: nozleCta,
+    checkoutButton: nozleCta,
+    upgradeButton: nozleCta,
+    checkout__submit: nozleCta
+  }
+};
+var nozleDark = {
+  variables: {
+    ...nozle.variables,
+    colorPrimary: "hsl(11 92% 60%)",
+    colorPrimaryForeground: "hsl(138 53% 6%)",
+    colorBackground: "hsl(138 40% 6%)",
+    colorCard: "hsl(138 38% 10%)",
+    colorForeground: "hsl(138 20% 94%)",
+    colorMuted: "hsl(138 25% 16%)",
+    colorMutedForeground: "hsl(138 14% 68%)",
+    colorAccent: "hsl(11 60% 16%)",
+    colorAccentForeground: "hsl(11 92% 66%)",
+    colorBorder: "hsl(138 20% 20%)",
+    colorDanger: "hsl(2 78% 64%)",
+    colorWarning: "hsl(38 88% 60%)",
+    colorSuccess: "hsl(152 55% 55%)",
+    colorSecondary: "hsl(138 38% 10%)",
+    colorInput: "hsl(138 16% 44%)",
+    buttonBorderColor: "hsl(138 45% 3%)",
+    buttonShadow: "4px 4px 0 0 hsl(138 45% 3%)",
+    colorScheme: "dark"
+  },
+  planCardLayout: "panel",
+  elements: nozle.elements
+};
+
+exports.dark = dark;
+exports.light = light;
+exports.minimal = minimal;
+exports.neobrutal = neobrutal;
+exports.nozle = nozle;
+exports.nozleDark = nozleDark;
+//# sourceMappingURL=themes.cjs.map
+//# sourceMappingURL=themes.cjs.map

package/dist/themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/appearance/tokens.ts","../src/themes.ts"],"names":[],"mappings":"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","file":"themes.cjs","sourcesContent":["import type { CSSProperties } from \"react\";\n\n/** Design tokens. Every value is a CSS value, for example `#4f46e5`, `oklch(...)` or `var(--primary)`. */\nexport interface Variables {\n  colorPrimary?: string;\n  colorPrimaryForeground?: string;\n  colorBackground?: string;\n  colorCard?: string;\n  colorForeground?: string;\n  colorMuted?: string;\n  colorMutedForeground?: string;\n  colorAccent?: string;\n  colorAccentForeground?: string;\n  colorBorder?: string;\n  colorDanger?: string;\n  colorWarning?: string;\n  colorSuccess?: string;\n  /** Fill of secondary buttons. Defaults to `colorMuted`. */\n  colorSecondary?: string;\n  /** Border of secondary buttons and other controls. Defaults to `colorBorder`. */\n  colorInput?: string;\n  /** The highlighted pricing card (`highlightPlan`). Defaults to `colorPrimary`. */\n  colorHighlight?: string;\n  /** Text on a filled highlighted card. Defaults to `colorPrimaryForeground`. */\n  colorHighlightForeground?: string;\n  fontFamily?: string;\n  /** Font of numbers in tables. Defaults to the surrounding font. */\n  fontFamilyNumbers?: string;\n  /** CSS `font` shorthand of small labels: table headers and plan card status labels. */\n  labelFont?: string;\n  /** `text-transform` of small labels, for example `uppercase`. */\n  labelTextTransform?: string;\n  /** `letter-spacing` of small labels. */\n  labelLetterSpacing?: string;\n  /** CSS `font` shorthand of titles: dialog and portal titles. Default `700 20px/1.25` in `fontFamily`. */\n  fontTitle?: string;\n  /** CSS `font` shorthand of headings: plan names and section headings. Default `600 16px/1.35` in `fontFamily`. */\n  fontHeading?: string;\n  /**\n   * CSS `font` shorthand of large numbers: prices, balances and totals, shown in tabular figures.\n   * Default `700 28px/1.1` in `fontFamilyNumbers`, else `fontFamily`.\n   */\n  fontMetric?: string;\n  /** CSS `font` shorthand of body text and descriptions. Default `400 14px/1.5` in `fontFamily`. */\n  fontBody?: string;\n  /** CSS `font` shorthand of small text: dates, intervals and hints. Default `400 12px/1.4` in `fontFamily`. */\n  fontMeta?: string;\n  /** CSS `font` shorthand of buttons and links. Default `600 14px/1.4` in `fontFamily`. */\n  fontAction?: string;\n  borderRadius?: string;\n  borderWidth?: string;\n  shadow?: string;\n  /** Corner radius of buttons. Defaults to a fraction of `borderRadius`. */\n  buttonRadius?: string;\n  /** Border width of buttons. Defaults to `borderWidth`. */\n  buttonBorderWidth?: string;\n  /** Border colour of primary buttons. Defaults to the button's fill colour. */\n  buttonBorderColor?: string;\n  /** Shadow of primary buttons only, for example a hard offset. Defaults to none. */\n  buttonShadow?: string;\n  /** Sets the CSS `color-scheme` of the component, so native controls follow the theme. */\n  colorScheme?: \"light\" | \"dark\" | \"light dark\";\n}\n\nexport type ElementKey =\n  | \"pricingTable\"\n  | \"pricingTable__toggle\"\n  | \"pricingTable__toggleButton\"\n  | \"pricingTable__grid\"\n  | \"planCard\"\n  | \"planCard__header\"\n  | \"planCard__badge\"\n  | \"planCard__name\"\n  | \"planCard__description\"\n  | \"planCard__price\"\n  | \"planCard__features\"\n  | \"planCard__feature\"\n  | \"planCard__cta\"\n  | \"planComparison\"\n  | \"planComparison__table\"\n  | \"planComparison__row\"\n  | \"planComparison__cell\"\n  | \"creditBalance\"\n  | \"creditBalance__amount\"\n  | \"creditHistory\"\n  | \"creditHistory__table\"\n  | \"creditHistory__row\"\n  | \"usageBreakdown\"\n  | \"usageBreakdown__row\"\n  | \"usageTrend\"\n  | \"usageTrend__bar\"\n  | \"usageMeter\"\n  | \"usageMeter__label\"\n  | \"usageMeter__value\"\n  | \"usageMeter__track\"\n  | \"usageMeter__fill\"\n  | \"usageDashboard\"\n  | \"usageAlert\"\n  | \"usageAlert__dismiss\"\n  | \"currentPlan\"\n  | \"currentPlan__name\"\n  | \"currentPlan__status\"\n  | \"currentPlan__price\"\n  | \"currentPlan__scheduled\"\n  | \"currentPlan__notice\"\n  | \"currentPlan__usage\"\n  | \"currentPlan__details\"\n  | \"planBadge\"\n  | \"paymentMethod\"\n  | \"checkoutButton\"\n  | \"upgradeButton\"\n  | \"checkout\"\n  | \"checkout__submit\"\n  | \"checkout__error\"\n  | \"upgradeModal\"\n  | \"upgradeModal__dialog\"\n  | \"upgradeModal__actions\"\n  | \"upgradePrompt\"\n  | \"lockedOverlay\"\n  | \"lockedOverlay__panel\"\n  | \"billingPortal\"\n  | \"billingPortal__section\"\n  | \"billingPortal__card\"\n  | \"billingPortal__table\"\n  | \"billingPortal__error\"\n  | \"cancellationControl\"\n  | \"planChangeControl\"\n  | \"poweredBy\";\n\n/** A string adds a class name; an object adds inline styles. */\nexport type Elements = Partial<Record<ElementKey, string | CSSProperties>>;\n\nexport interface Theme {\n  variables?: Variables;\n  elements?: Elements;\n  /**\n   * How plan cards are laid out. `card` (default): name, description, price and ticked features.\n   * `panel`: the name in a header band with the plan's status on the right, then price,\n   * description and plain feature lines.\n   */\n  planCardLayout?: \"card\" | \"panel\";\n}\n\n/** A theme (or a stack of themes, last wins) plus your own variables and elements on top. */\nexport interface Appearance extends Theme {\n  theme?: Theme | Theme[];\n}\n\ntype ColorKey = Exclude<keyof Variables, \"colorScheme\">;\n\nconst CSS_VAR: Record<ColorKey, string> = {\n  colorPrimary: \"--nozle-primary\",\n  colorPrimaryForeground: \"--nozle-primary-foreground\",\n  colorBackground: \"--nozle-background\",\n  colorCard: \"--nozle-card\",\n  colorForeground: \"--nozle-foreground\",\n  colorMuted: \"--nozle-muted\",\n  colorMutedForeground: \"--nozle-muted-foreground\",\n  colorAccent: \"--nozle-accent\",\n  colorAccentForeground: \"--nozle-accent-foreground\",\n  colorBorder: \"--nozle-border\",\n  colorDanger: \"--nozle-destructive\",\n  colorWarning: \"--nozle-warning\",\n  colorSuccess: \"--nozle-success\",\n  colorSecondary: \"--nozle-secondary\",\n  colorInput: \"--nozle-input\",\n  colorHighlight: \"--nozle-highlight\",\n  colorHighlightForeground: \"--nozle-highlight-foreground\",\n  fontFamily: \"--nozle-font\",\n  fontFamilyNumbers: \"--nozle-font-numbers\",\n  labelFont: \"--nozle-label-font\",\n  labelTextTransform: \"--nozle-label-transform\",\n  labelLetterSpacing: \"--nozle-label-spacing\",\n  fontTitle: \"--nozle-font-title\",\n  fontHeading: \"--nozle-font-heading\",\n  fontMetric: \"--nozle-font-metric\",\n  fontBody: \"--nozle-font-body\",\n  fontMeta: \"--nozle-font-meta\",\n  fontAction: \"--nozle-font-action\",\n  borderRadius: \"--nozle-radius\",\n  borderWidth: \"--nozle-border-width\",\n  shadow: \"--nozle-shadow\",\n  buttonRadius: \"--nozle-button-radius\",\n  buttonBorderWidth: \"--nozle-button-border-width\",\n  buttonBorderColor: \"--nozle-button-border\",\n  buttonShadow: \"--nozle-button-shadow\",\n};\n\n/** The light values every component falls back to when nothing else sets a token. */\n// The highlight colours default to the primary colours, the muted text to a mix of the text and card\n// colours, the text roles to sizes in `fontFamily`, and the button values to the general ones or to\n// each button's own, so they have no value of their own here.\ntype DerivedKey =\n  | \"colorMutedForeground\"\n  | \"colorHighlight\"\n  | \"colorHighlightForeground\"\n  | \"colorSecondary\"\n  | \"colorInput\"\n  | \"fontFamilyNumbers\"\n  | \"labelFont\"\n  | \"labelTextTransform\"\n  | \"labelLetterSpacing\"\n  | \"fontTitle\"\n  | \"fontHeading\"\n  | \"fontMetric\"\n  | \"fontBody\"\n  | \"fontMeta\"\n  | \"fontAction\"\n  | \"buttonRadius\"\n  | \"buttonBorderWidth\"\n  | \"buttonBorderColor\"\n  | \"buttonShadow\";\n\nexport const LIGHT: Required<Omit<Variables, \"colorScheme\" | DerivedKey>> = {\n  colorPrimary: \"#4f46e5\",\n  colorPrimaryForeground: \"#ffffff\",\n  colorBackground: \"#ffffff\",\n  colorCard: \"#ffffff\",\n  colorForeground: \"#111827\",\n  colorMuted: \"#f3f4f6\",\n  colorAccent: \"#eef2ff\",\n  colorAccentForeground: \"#3730a3\",\n  colorBorder: \"#e5e7eb\",\n  colorDanger: \"#dc2626\",\n  colorWarning: \"#d97706\",\n  colorSuccess: \"#16a34a\",\n  fontFamily: \"system-ui, -apple-system, 'Segoe UI', sans-serif\",\n  borderRadius: \"12px\",\n  borderWidth: \"1px\",\n  shadow: \"0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)\",\n};\n\n// Variable names from earlier releases, still read after the --nozle-* name.\nconst ALIASES: Partial<Record<ColorKey, string[]>> = {\n  colorPrimary: [\"--nozle-pricing-highlight\", \"--nozle-portal-accent\"],\n  colorBackground: [\"--nozle-pricing-bg\", \"--nozle-portal-background\"],\n  colorCard: [\"--nozle-pricing-card-bg\"],\n  colorForeground: [\"--nozle-portal-text\"],\n  colorMuted: [\"--nozle-portal-muted-background\"],\n  colorMutedForeground: [\"--nozle-portal-muted\"],\n  colorBorder: [\"--nozle-pricing-border\", \"--nozle-portal-border\"],\n  borderRadius: [\"--nozle-pricing-radius\"],\n};\n\nfunction chain(key: ColorKey, last: string = LIGHT[key as Exclude<ColorKey, DerivedKey>]): string {\n  return [CSS_VAR[key], ...(ALIASES[key] ?? [])].reduceRight(\n    (fallback, name) => `var(${name}, ${fallback})`,\n    last,\n  );\n}\n\nconst soft = (color: string, base: string, percent: number) =>\n  `color-mix(in srgb, ${color} ${percent}%, ${base})`;\n\nconst primary = chain(\"colorPrimary\");\nconst card = chain(\"colorCard\");\nconst danger = chain(\"colorDanger\");\nconst warning = chain(\"colorWarning\");\nconst success = chain(\"colorSuccess\");\nconst foreground = chain(\"colorForeground\");\nconst primaryForeground = chain(\"colorPrimaryForeground\");\nconst font = chain(\"fontFamily\");\n\n/**\n * Muted text when `colorMutedForeground` is not set: the text colour mixed into the card colour, so\n * changing `colorForeground` recolours muted text too.\n */\nexport const DERIVED_MUTED_FOREGROUND = `color-mix(in srgb, ${foreground} 62%, ${card})`;\n\n/** CSS values for component styles: each reads its token, then older names, then the light value. */\nexport const T = {\n  primary,\n  primaryForeground,\n  highlight: `var(--nozle-highlight, ${primary})`,\n  highlightForeground: `var(--nozle-highlight-foreground, ${primaryForeground})`,\n  background: chain(\"colorBackground\"),\n  card,\n  foreground,\n  muted: chain(\"colorMuted\"),\n  mutedForeground: chain(\"colorMutedForeground\", DERIVED_MUTED_FOREGROUND),\n  accent: chain(\"colorAccent\"),\n  secondary: `var(--nozle-secondary, ${chain(\"colorMuted\")})`,\n  input: `var(--nozle-input, ${chain(\"colorBorder\")})`,\n  accentForeground: chain(\"colorAccentForeground\"),\n  border: chain(\"colorBorder\"),\n  danger,\n  warning,\n  success,\n  font,\n  fontNumbers: \"var(--nozle-font-numbers, inherit)\",\n  labelFont: `var(--nozle-label-font, 600 12px/1.4 ${font})`,\n  fontTitle: `var(--nozle-font-title, 700 20px/1.25 ${font})`,\n  fontHeading: `var(--nozle-font-heading, 600 16px/1.35 ${font})`,\n  fontMetric: `var(--nozle-font-metric, 700 28px/1.1 var(--nozle-font-numbers, ${font}))`,\n  fontBody: `var(--nozle-font-body, 400 14px/1.5 ${font})`,\n  fontMeta: `var(--nozle-font-meta, 400 12px/1.4 ${font})`,\n  fontAction: `var(--nozle-font-action, 600 14px/1.4 ${font})`,\n  labelTransform: \"var(--nozle-label-transform, none)\",\n  labelSpacing: \"var(--nozle-label-spacing, normal)\",\n  radius: chain(\"borderRadius\"),\n  borderWidth: chain(\"borderWidth\"),\n  shadow: chain(\"shadow\"),\n  /** Tinted backgrounds and borders for notices, derived from the matching colour. */\n  dangerSoft: soft(danger, card, 10),\n  dangerBorder: soft(danger, card, 30),\n  warningSoft: soft(warning, card, 12),\n  warningBorder: soft(warning, card, 35),\n  /** Status text: the status colour mixed with the text colour, so it stays readable on its soft background. */\n  dangerText: soft(danger, foreground, 70),\n  warningText: soft(warning, foreground, 70),\n  successText: soft(success, foreground, 70),\n  successSoft: soft(success, card, 12),\n  primarySoft: soft(primary, card, 10),\n  primaryHover: soft(primary, \"black\", 88),\n  skeleton: soft(foreground, card, 8),\n  /** Table header band and the lighter line between table rows. */\n  tableHeader: soft(chain(\"colorMuted\"), card, 50),\n  rowLine: soft(chain(\"colorBorder\"), card, 70),\n} as const;\n\n/**\n * Text roles. Each sets the role's font (a `font` shorthand variable) and its default colour; a\n * component may change the colour, for example to a status colour or the text on a filled card.\n * `font` comes first because the shorthand resets the longhands after it.\n */\nexport const text = {\n  title: { font: T.fontTitle, color: T.foreground },\n  heading: { font: T.fontHeading, color: T.foreground },\n  metric: { font: T.fontMetric, fontVariantNumeric: \"tabular-nums\", color: T.foreground },\n  body: { font: T.fontBody, color: T.foreground },\n  secondary: { font: T.fontBody, color: T.mutedForeground },\n  meta: { font: T.fontMeta, color: T.mutedForeground },\n  label: {\n    font: T.labelFont,\n    letterSpacing: T.labelSpacing,\n    textTransform: T.labelTransform as CSSProperties[\"textTransform\"],\n    color: T.mutedForeground,\n  },\n  action: { font: T.fontAction },\n} satisfies Record<string, CSSProperties>;\n\n/** `border` shorthand using the theme's border width and colour. */\nexport const border = (color: string = T.border) => `${T.borderWidth} solid ${color}`;\n\nconst buttonBorderWidth = `var(--nozle-button-border-width, ${T.borderWidth})`;\n\n/** `border` shorthand for a primary button: `buttonBorderColor` first, then `color`. */\nexport const primaryButtonBorder = (color: string) => `${buttonBorderWidth} solid var(--nozle-button-border, ${color})`;\n\n/** `border` shorthand for any other button. */\nexport const buttonBorder = (color: string) => `${buttonBorderWidth} solid ${color}`;\n\n/** Button corner radius: the `buttonRadius` token, else `fallback`. */\nexport const buttonRadius = (fallback: string) => `var(--nozle-button-radius, ${fallback})`;\n\nexport const buttonShadow = \"var(--nozle-button-shadow, none)\";\n\nexport interface ResolvedAppearance {\n  variables: Variables;\n  planCardLayout?: \"card\" | \"panel\";\n  elements: Partial<Record<ElementKey, { className?: string; style?: CSSProperties }>>;\n}\n\nfunction addTheme(target: ResolvedAppearance, theme: Theme | undefined) {\n  if (!theme) return;\n  Object.assign(target.variables, theme.variables);\n  if (theme.planCardLayout) target.planCardLayout = theme.planCardLayout;\n  for (const [key, value] of Object.entries(theme.elements ?? {}) as [ElementKey, string | CSSProperties][]) {\n    const current = target.elements[key] ?? {};\n    target.elements[key] =\n      typeof value === \"string\"\n        ? { ...current, className: [current.className, value].filter(Boolean).join(\" \") }\n        : { ...current, style: { ...current.style, ...value } };\n  }\n}\n\n/**\n * Merges appearances in order, each later one winning: for each, its theme (or themes, in order) then\n * its own variables and elements. Pass the provider's appearance first, then the component's.\n */\nexport function mergeAppearance(...layers: (Appearance | undefined)[]): ResolvedAppearance {\n  const resolved: ResolvedAppearance = { variables: {}, elements: {} };\n  for (const layer of layers) {\n    if (!layer) continue;\n    const themes = Array.isArray(layer.theme) ? layer.theme : [layer.theme];\n    themes.forEach((theme) => addTheme(resolved, theme));\n    addTheme(resolved, layer);\n  }\n  return resolved;\n}\n\n/** Inline CSS custom properties for a set of variables; `colorScheme` becomes `color-scheme`. */\nexport function toCssVars(variables: Variables): CSSProperties {\n  const style: Record<string, string> = {};\n  for (const [key, value] of Object.entries(variables)) {\n    if (value == null || value === \"\") continue;\n    if (key === \"colorScheme\") style.colorScheme = value;\n    else style[CSS_VAR[key as ColorKey]] = value;\n  }\n  return style as CSSProperties;\n}\n\n/** The card frame shared by the data components. */\nexport const surface: CSSProperties = {\n  ...text.body,\n  background: T.card,\n  border: border(),\n  borderRadius: T.radius,\n  boxShadow: T.shadow,\n  padding: \"1.25rem\",\n};\n\n/** Tables, after the Nozle dashboard table: a bordered frame, a tinted header band with small\n * uppercase labels, roomy rows, and numbers right-aligned in tabular figures. */\nexport const table = {\n  frame: {\n    ...text.body,\n    background: T.card,\n    border: border(),\n    borderRadius: T.radius,\n    overflowX: \"auto\",\n    minWidth: 0,\n    maxWidth: \"100%\",\n  } as CSSProperties,\n  table: { width: \"100%\", borderCollapse: \"collapse\", font: \"inherit\" } as CSSProperties,\n  head: (numeric = false): CSSProperties => ({\n    height: \"44px\",\n    padding: \"0 20px\",\n    textAlign: numeric ? \"right\" : \"left\",\n    verticalAlign: \"middle\",\n    ...text.label,\n    whiteSpace: \"nowrap\",\n    background: T.tableHeader,\n    borderBottom: border(),\n  }),\n  /** `last`: the final body row, whose line the frame already draws. */\n  cell: (numeric = false, last = false): CSSProperties => ({\n    height: \"48px\",\n    padding: \"14px 20px\",\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n    textAlign: numeric ? \"right\" : \"left\",\n    borderBottom: last ? \"none\" : border(T.rowLine),\n    ...(numeric && { fontFamily: T.fontNumbers, fontVariantNumeric: \"tabular-nums\" }),\n  }),\n  foot: (numeric = false): CSSProperties => ({\n    ...table.cell(numeric, true),\n    borderTop: border(),\n    background: T.tableHeader,\n    fontWeight: 600,\n  }),\n};\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\";\n\n/** Button look shared by every component, from the theme tokens. */\nexport function buttonStyle(variant: ButtonVariant = \"primary\", busy = false): CSSProperties {\n  const colors: Record<ButtonVariant, CSSProperties> = {\n    primary: { background: T.primary, color: T.primaryForeground, border: primaryButtonBorder(T.primary), boxShadow: buttonShadow },\n    secondary: { background: T.secondary, color: T.foreground, border: buttonBorder(T.input) },\n    outline: { background: \"transparent\", color: T.primary, border: buttonBorder(T.primary) },\n  };\n  return {\n    ...colors[variant],\n    padding: \"0.75rem 1.5rem\",\n    borderRadius: buttonRadius(`calc(${T.radius} * 0.75)`),\n    ...text.action,\n    cursor: busy ? \"wait\" : \"pointer\",\n    opacity: busy ? 0.7 : 1,\n    transition: \"filter 0.15s ease\",\n  };\n}\n","/**\n * Predefined themes for `appearance={{ theme }}`. Colour themes (`light`, `dark`) and shape themes\n * (`minimal`, `neobrutal`) stack: `theme: [neobrutal, dark]`. Any variable can be changed on top.\n * `nozle` and `nozleDark` are the complete Nozle dashboard look, colours and shape together.\n */\nimport { DERIVED_MUTED_FOREGROUND, LIGHT, type Theme, type Variables } from \"./appearance/tokens.js\";\n\nexport type { Appearance, Elements, ElementKey, Theme, Variables } from \"./appearance/tokens.js\";\n\nconst DARK_COLORS = {\n  colorPrimary: \"#818cf8\",\n  colorPrimaryForeground: \"#0b1020\",\n  colorBackground: \"#0b0f19\",\n  colorCard: \"#111827\",\n  colorForeground: \"#f3f4f6\",\n  colorMuted: \"#1f2937\",\n  colorMutedForeground: DERIVED_MUTED_FOREGROUND,\n  colorAccent: \"#1e1b4b\",\n  colorAccentForeground: \"#c7d2fe\",\n  colorBorder: \"#374151\",\n  colorDanger: \"#f87171\",\n  colorWarning: \"#fbbf24\",\n  colorSuccess: \"#4ade80\",\n} satisfies Variables;\n\ntype ColorName = keyof typeof DARK_COLORS;\nconst COLOR_NAMES = Object.keys(DARK_COLORS) as ColorName[];\n\nconst LIGHT_COLORS = { ...LIGHT, colorMutedForeground: DERIVED_MUTED_FOREGROUND };\n\n/** The default look, written out so it can be stacked over another theme. */\nexport const light: Theme = {\n  variables: { ...Object.fromEntries(COLOR_NAMES.map((name) => [name, LIGHT_COLORS[name]])), colorScheme: \"light\" },\n};\n\n/** Dark surfaces. Put it on a dark page background. */\nexport const dark: Theme = {\n  variables: { ...DARK_COLORS, shadow: \"0 1px 3px rgba(0,0,0,0.5)\", colorScheme: \"dark\" },\n};\n\n/** Flat: no shadows, small corners, a near-black primary. */\nexport const minimal: Theme = {\n  variables: { colorPrimary: \"#111827\", colorPrimaryForeground: \"#ffffff\", shadow: \"none\", borderRadius: \"6px\" },\n};\n\n/** Thick borders, square corners and a hard offset shadow in the border colour. */\nexport const neobrutal: Theme = {\n  variables: {\n    colorPrimary: \"#facc15\",\n    colorPrimaryForeground: \"#000000\",\n    colorBorder: \"#000000\",\n    borderWidth: \"2px\",\n    borderRadius: \"0px\",\n    shadow: \"4px 4px 0 var(--nozle-border, #000000)\",\n    buttonBorderColor: \"#000000\",\n    buttonShadow: \"3px 3px 0 #000000\",\n    labelFont: \"800 12px/1.4 var(--nozle-font, system-ui, sans-serif)\",\n    fontTitle: \"800 20px/1.25 var(--nozle-font, system-ui, sans-serif)\",\n    fontHeading: \"800 16px/1.35 var(--nozle-font, system-ui, sans-serif)\",\n    labelTextTransform: \"uppercase\",\n    labelLetterSpacing: \"0.06em\",\n  },\n};\n\n// Nozle dashboard tokens (nozle-frontend design system and its plan page): flat panels with\n// hairline borders, pill buttons, and depth only on the primary action, as a hard ink offset.\nconst NOZLE_INK = \"hsl(138 53% 8%)\";\nconst nozleCta = { padding: \"0.625rem 1.5rem\" };\nconst nunito = \"'Nunito', system-ui, sans-serif\";\n// Text role in the theme's font, so a `fontFamily` set on top still applies.\nconst nozleFont = (size: string) => `${size} var(--nozle-font, ${nunito})`;\n\n/**\n * The Nozle dashboard look. The app loads the Nunito and JetBrains Mono fonts; without them the\n * system fonts are used.\n */\nexport const nozle: Theme = {\n  variables: {\n    colorPrimary: \"hsl(11 90% 45%)\",\n    colorPrimaryForeground: \"#ffffff\",\n    colorBackground: \"hsl(138 30% 94%)\",\n    colorCard: \"#ffffff\",\n    colorForeground: NOZLE_INK,\n    colorMuted: \"hsl(138 35% 84%)\",\n    colorMutedForeground: \"hsl(138 20% 28%)\",\n    colorAccent: \"hsl(11 90% 95%)\",\n    colorAccentForeground: \"hsl(11 90% 39%)\",\n    colorBorder: \"hsl(138 25% 78%)\",\n    colorDanger: \"hsl(2 74% 46%)\",\n    colorWarning: \"hsl(38 92% 30%)\",\n    colorSuccess: \"hsl(152 62% 28%)\",\n    colorSecondary: \"#ffffff\",\n    colorInput: \"hsl(138 20% 46%)\",\n    fontFamily: nunito,\n    fontFamilyNumbers: \"'JetBrains Mono', ui-monospace, monospace\",\n    labelFont: \"800 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace\",\n    // The dashboard type scale. Prices are Nunito; JetBrains Mono is for table numbers only.\n    fontTitle: nozleFont(\"900 20px/1.15\"),\n    fontHeading: nozleFont(\"900 14px/1.25\"),\n    fontMetric: nozleFont(\"800 24px/1\"),\n    fontBody: nozleFont(\"400 13px/1.5\"),\n    fontMeta: nozleFont(\"400 11.5px/1.4\"),\n    fontAction: nozleFont(\"800 14px/1.4\"),\n    labelTextTransform: \"uppercase\",\n    labelLetterSpacing: \"0.18em\",\n    borderRadius: \"14px\",\n    borderWidth: \"1px\",\n    shadow: \"none\",\n    buttonRadius: \"9999px\",\n    buttonBorderWidth: \"2px\",\n    buttonBorderColor: NOZLE_INK,\n    buttonShadow: `4px 4px 0 0 ${NOZLE_INK}`,\n    colorScheme: \"light\",\n  },\n  planCardLayout: \"panel\",\n  elements: {\n    pricingTable__grid: { gap: \"1rem\" },\n    planCard__cta: nozleCta,\n    checkoutButton: nozleCta,\n    upgradeButton: nozleCta,\n    checkout__submit: nozleCta,\n  },\n};\n\n/** The Nozle dashboard's dark (ink) look. Put it on a dark page background. */\nexport const nozleDark: Theme = {\n  variables: {\n    ...nozle.variables,\n    colorPrimary: \"hsl(11 92% 60%)\",\n    colorPrimaryForeground: \"hsl(138 53% 6%)\",\n    colorBackground: \"hsl(138 40% 6%)\",\n    colorCard: \"hsl(138 38% 10%)\",\n    colorForeground: \"hsl(138 20% 94%)\",\n    colorMuted: \"hsl(138 25% 16%)\",\n    colorMutedForeground: \"hsl(138 14% 68%)\",\n    colorAccent: \"hsl(11 60% 16%)\",\n    colorAccentForeground: \"hsl(11 92% 66%)\",\n    colorBorder: \"hsl(138 20% 20%)\",\n    colorDanger: \"hsl(2 78% 64%)\",\n    colorWarning: \"hsl(38 88% 60%)\",\n    colorSuccess: \"hsl(152 55% 55%)\",\n    colorSecondary: \"hsl(138 38% 10%)\",\n    colorInput: \"hsl(138 16% 44%)\",\n    buttonBorderColor: \"hsl(138 45% 3%)\",\n    buttonShadow: \"4px 4px 0 0 hsl(138 45% 3%)\",\n    colorScheme: \"dark\",\n  },\n  planCardLayout: \"panel\",\n  elements: nozle.elements,\n};\n"]}

package/dist/themes.d.cts

@@ -0,0 +1,27 @@
+import { T as Theme } from './tokens-Bm4VWWb0.cjs';
+export { A as Appearance, E as ElementKey, a as Elements, V as Variables } from './tokens-Bm4VWWb0.cjs';
+import 'react';
+
+/**
+ * Predefined themes for `appearance={{ theme }}`. Colour themes (`light`, `dark`) and shape themes
+ * (`minimal`, `neobrutal`) stack: `theme: [neobrutal, dark]`. Any variable can be changed on top.
+ * `nozle` and `nozleDark` are the complete Nozle dashboard look, colours and shape together.
+ */
+
+/** The default look, written out so it can be stacked over another theme. */
+declare const light: Theme;
+/** Dark surfaces. Put it on a dark page background. */
+declare const dark: Theme;
+/** Flat: no shadows, small corners, a near-black primary. */
+declare const minimal: Theme;
+/** Thick borders, square corners and a hard offset shadow in the border colour. */
+declare const neobrutal: Theme;
+/**
+ * The Nozle dashboard look. The app loads the Nunito and JetBrains Mono fonts; without them the
+ * system fonts are used.
+ */
+declare const nozle: Theme;
+/** The Nozle dashboard's dark (ink) look. Put it on a dark page background. */
+declare const nozleDark: Theme;
+
+export { Theme, dark, light, minimal, neobrutal, nozle, nozleDark };

package/dist/themes.d.ts

@@ -0,0 +1,27 @@
+import { T as Theme } from './tokens-Bm4VWWb0.js';
+export { A as Appearance, E as ElementKey, a as Elements, V as Variables } from './tokens-Bm4VWWb0.js';
+import 'react';
+
+/**
+ * Predefined themes for `appearance={{ theme }}`. Colour themes (`light`, `dark`) and shape themes
+ * (`minimal`, `neobrutal`) stack: `theme: [neobrutal, dark]`. Any variable can be changed on top.
+ * `nozle` and `nozleDark` are the complete Nozle dashboard look, colours and shape together.
+ */
+
+/** The default look, written out so it can be stacked over another theme. */
+declare const light: Theme;
+/** Dark surfaces. Put it on a dark page background. */
+declare const dark: Theme;
+/** Flat: no shadows, small corners, a near-black primary. */
+declare const minimal: Theme;
+/** Thick borders, square corners and a hard offset shadow in the border colour. */
+declare const neobrutal: Theme;
+/**
+ * The Nozle dashboard look. The app loads the Nunito and JetBrains Mono fonts; without them the
+ * system fonts are used.
+ */
+declare const nozle: Theme;
+/** The Nozle dashboard's dark (ink) look. Put it on a dark page background. */
+declare const nozleDark: Theme;
+
+export { Theme, dark, light, minimal, neobrutal, nozle, nozleDark };

package/dist/themes.js

@@ -0,0 +1,126 @@
+import { LIGHT, DERIVED_MUTED_FOREGROUND } from './chunk-NLPONQ5O.js';
+
+// src/themes.ts
+var DARK_COLORS = {
+  colorPrimary: "#818cf8",
+  colorPrimaryForeground: "#0b1020",
+  colorBackground: "#0b0f19",
+  colorCard: "#111827",
+  colorForeground: "#f3f4f6",
+  colorMuted: "#1f2937",
+  colorMutedForeground: DERIVED_MUTED_FOREGROUND,
+  colorAccent: "#1e1b4b",
+  colorAccentForeground: "#c7d2fe",
+  colorBorder: "#374151",
+  colorDanger: "#f87171",
+  colorWarning: "#fbbf24",
+  colorSuccess: "#4ade80"
+};
+var COLOR_NAMES = Object.keys(DARK_COLORS);
+var LIGHT_COLORS = { ...LIGHT, colorMutedForeground: DERIVED_MUTED_FOREGROUND };
+var light = {
+  variables: { ...Object.fromEntries(COLOR_NAMES.map((name) => [name, LIGHT_COLORS[name]])), colorScheme: "light" }
+};
+var dark = {
+  variables: { ...DARK_COLORS, shadow: "0 1px 3px rgba(0,0,0,0.5)", colorScheme: "dark" }
+};
+var minimal = {
+  variables: { colorPrimary: "#111827", colorPrimaryForeground: "#ffffff", shadow: "none", borderRadius: "6px" }
+};
+var neobrutal = {
+  variables: {
+    colorPrimary: "#facc15",
+    colorPrimaryForeground: "#000000",
+    colorBorder: "#000000",
+    borderWidth: "2px",
+    borderRadius: "0px",
+    shadow: "4px 4px 0 var(--nozle-border, #000000)",
+    buttonBorderColor: "#000000",
+    buttonShadow: "3px 3px 0 #000000",
+    labelFont: "800 12px/1.4 var(--nozle-font, system-ui, sans-serif)",
+    fontTitle: "800 20px/1.25 var(--nozle-font, system-ui, sans-serif)",
+    fontHeading: "800 16px/1.35 var(--nozle-font, system-ui, sans-serif)",
+    labelTextTransform: "uppercase",
+    labelLetterSpacing: "0.06em"
+  }
+};
+var NOZLE_INK = "hsl(138 53% 8%)";
+var nozleCta = { padding: "0.625rem 1.5rem" };
+var nunito = "'Nunito', system-ui, sans-serif";
+var nozleFont = (size) => `${size} var(--nozle-font, ${nunito})`;
+var nozle = {
+  variables: {
+    colorPrimary: "hsl(11 90% 45%)",
+    colorPrimaryForeground: "#ffffff",
+    colorBackground: "hsl(138 30% 94%)",
+    colorCard: "#ffffff",
+    colorForeground: NOZLE_INK,
+    colorMuted: "hsl(138 35% 84%)",
+    colorMutedForeground: "hsl(138 20% 28%)",
+    colorAccent: "hsl(11 90% 95%)",
+    colorAccentForeground: "hsl(11 90% 39%)",
+    colorBorder: "hsl(138 25% 78%)",
+    colorDanger: "hsl(2 74% 46%)",
+    colorWarning: "hsl(38 92% 30%)",
+    colorSuccess: "hsl(152 62% 28%)",
+    colorSecondary: "#ffffff",
+    colorInput: "hsl(138 20% 46%)",
+    fontFamily: nunito,
+    fontFamilyNumbers: "'JetBrains Mono', ui-monospace, monospace",
+    labelFont: "800 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace",
+    // The dashboard type scale. Prices are Nunito; JetBrains Mono is for table numbers only.
+    fontTitle: nozleFont("900 20px/1.15"),
+    fontHeading: nozleFont("900 14px/1.25"),
+    fontMetric: nozleFont("800 24px/1"),
+    fontBody: nozleFont("400 13px/1.5"),
+    fontMeta: nozleFont("400 11.5px/1.4"),
+    fontAction: nozleFont("800 14px/1.4"),
+    labelTextTransform: "uppercase",
+    labelLetterSpacing: "0.18em",
+    borderRadius: "14px",
+    borderWidth: "1px",
+    shadow: "none",
+    buttonRadius: "9999px",
+    buttonBorderWidth: "2px",
+    buttonBorderColor: NOZLE_INK,
+    buttonShadow: `4px 4px 0 0 ${NOZLE_INK}`,
+    colorScheme: "light"
+  },
+  planCardLayout: "panel",
+  elements: {
+    pricingTable__grid: { gap: "1rem" },
+    planCard__cta: nozleCta,
+    checkoutButton: nozleCta,
+    upgradeButton: nozleCta,
+    checkout__submit: nozleCta
+  }
+};
+var nozleDark = {
+  variables: {
+    ...nozle.variables,
+    colorPrimary: "hsl(11 92% 60%)",
+    colorPrimaryForeground: "hsl(138 53% 6%)",
+    colorBackground: "hsl(138 40% 6%)",
+    colorCard: "hsl(138 38% 10%)",
+    colorForeground: "hsl(138 20% 94%)",
+    colorMuted: "hsl(138 25% 16%)",
+    colorMutedForeground: "hsl(138 14% 68%)",
+    colorAccent: "hsl(11 60% 16%)",
+    colorAccentForeground: "hsl(11 92% 66%)",
+    colorBorder: "hsl(138 20% 20%)",
+    colorDanger: "hsl(2 78% 64%)",
+    colorWarning: "hsl(38 88% 60%)",
+    colorSuccess: "hsl(152 55% 55%)",
+    colorSecondary: "hsl(138 38% 10%)",
+    colorInput: "hsl(138 16% 44%)",
+    buttonBorderColor: "hsl(138 45% 3%)",
+    buttonShadow: "4px 4px 0 0 hsl(138 45% 3%)",
+    colorScheme: "dark"
+  },
+  planCardLayout: "panel",
+  elements: nozle.elements
+};
+
+export { dark, light, minimal, neobrutal, nozle, nozleDark };
+//# sourceMappingURL=themes.js.map
+//# sourceMappingURL=themes.js.map

package/dist/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/themes.ts"],"names":[],"mappings":"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","file":"themes.js","sourcesContent":["/**\n * Predefined themes for `appearance={{ theme }}`. Colour themes (`light`, `dark`) and shape themes\n * (`minimal`, `neobrutal`) stack: `theme: [neobrutal, dark]`. Any variable can be changed on top.\n * `nozle` and `nozleDark` are the complete Nozle dashboard look, colours and shape together.\n */\nimport { DERIVED_MUTED_FOREGROUND, LIGHT, type Theme, type Variables } from \"./appearance/tokens.js\";\n\nexport type { Appearance, Elements, ElementKey, Theme, Variables } from \"./appearance/tokens.js\";\n\nconst DARK_COLORS = {\n  colorPrimary: \"#818cf8\",\n  colorPrimaryForeground: \"#0b1020\",\n  colorBackground: \"#0b0f19\",\n  colorCard: \"#111827\",\n  colorForeground: \"#f3f4f6\",\n  colorMuted: \"#1f2937\",\n  colorMutedForeground: DERIVED_MUTED_FOREGROUND,\n  colorAccent: \"#1e1b4b\",\n  colorAccentForeground: \"#c7d2fe\",\n  colorBorder: \"#374151\",\n  colorDanger: \"#f87171\",\n  colorWarning: \"#fbbf24\",\n  colorSuccess: \"#4ade80\",\n} satisfies Variables;\n\ntype ColorName = keyof typeof DARK_COLORS;\nconst COLOR_NAMES = Object.keys(DARK_COLORS) as ColorName[];\n\nconst LIGHT_COLORS = { ...LIGHT, colorMutedForeground: DERIVED_MUTED_FOREGROUND };\n\n/** The default look, written out so it can be stacked over another theme. */\nexport const light: Theme = {\n  variables: { ...Object.fromEntries(COLOR_NAMES.map((name) => [name, LIGHT_COLORS[name]])), colorScheme: \"light\" },\n};\n\n/** Dark surfaces. Put it on a dark page background. */\nexport const dark: Theme = {\n  variables: { ...DARK_COLORS, shadow: \"0 1px 3px rgba(0,0,0,0.5)\", colorScheme: \"dark\" },\n};\n\n/** Flat: no shadows, small corners, a near-black primary. */\nexport const minimal: Theme = {\n  variables: { colorPrimary: \"#111827\", colorPrimaryForeground: \"#ffffff\", shadow: \"none\", borderRadius: \"6px\" },\n};\n\n/** Thick borders, square corners and a hard offset shadow in the border colour. */\nexport const neobrutal: Theme = {\n  variables: {\n    colorPrimary: \"#facc15\",\n    colorPrimaryForeground: \"#000000\",\n    colorBorder: \"#000000\",\n    borderWidth: \"2px\",\n    borderRadius: \"0px\",\n    shadow: \"4px 4px 0 var(--nozle-border, #000000)\",\n    buttonBorderColor: \"#000000\",\n    buttonShadow: \"3px 3px 0 #000000\",\n    labelFont: \"800 12px/1.4 var(--nozle-font, system-ui, sans-serif)\",\n    fontTitle: \"800 20px/1.25 var(--nozle-font, system-ui, sans-serif)\",\n    fontHeading: \"800 16px/1.35 var(--nozle-font, system-ui, sans-serif)\",\n    labelTextTransform: \"uppercase\",\n    labelLetterSpacing: \"0.06em\",\n  },\n};\n\n// Nozle dashboard tokens (nozle-frontend design system and its plan page): flat panels with\n// hairline borders, pill buttons, and depth only on the primary action, as a hard ink offset.\nconst NOZLE_INK = \"hsl(138 53% 8%)\";\nconst nozleCta = { padding: \"0.625rem 1.5rem\" };\nconst nunito = \"'Nunito', system-ui, sans-serif\";\n// Text role in the theme's font, so a `fontFamily` set on top still applies.\nconst nozleFont = (size: string) => `${size} var(--nozle-font, ${nunito})`;\n\n/**\n * The Nozle dashboard look. The app loads the Nunito and JetBrains Mono fonts; without them the\n * system fonts are used.\n */\nexport const nozle: Theme = {\n  variables: {\n    colorPrimary: \"hsl(11 90% 45%)\",\n    colorPrimaryForeground: \"#ffffff\",\n    colorBackground: \"hsl(138 30% 94%)\",\n    colorCard: \"#ffffff\",\n    colorForeground: NOZLE_INK,\n    colorMuted: \"hsl(138 35% 84%)\",\n    colorMutedForeground: \"hsl(138 20% 28%)\",\n    colorAccent: \"hsl(11 90% 95%)\",\n    colorAccentForeground: \"hsl(11 90% 39%)\",\n    colorBorder: \"hsl(138 25% 78%)\",\n    colorDanger: \"hsl(2 74% 46%)\",\n    colorWarning: \"hsl(38 92% 30%)\",\n    colorSuccess: \"hsl(152 62% 28%)\",\n    colorSecondary: \"#ffffff\",\n    colorInput: \"hsl(138 20% 46%)\",\n    fontFamily: nunito,\n    fontFamilyNumbers: \"'JetBrains Mono', ui-monospace, monospace\",\n    labelFont: \"800 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace\",\n    // The dashboard type scale. Prices are Nunito; JetBrains Mono is for table numbers only.\n    fontTitle: nozleFont(\"900 20px/1.15\"),\n    fontHeading: nozleFont(\"900 14px/1.25\"),\n    fontMetric: nozleFont(\"800 24px/1\"),\n    fontBody: nozleFont(\"400 13px/1.5\"),\n    fontMeta: nozleFont(\"400 11.5px/1.4\"),\n    fontAction: nozleFont(\"800 14px/1.4\"),\n    labelTextTransform: \"uppercase\",\n    labelLetterSpacing: \"0.18em\",\n    borderRadius: \"14px\",\n    borderWidth: \"1px\",\n    shadow: \"none\",\n    buttonRadius: \"9999px\",\n    buttonBorderWidth: \"2px\",\n    buttonBorderColor: NOZLE_INK,\n    buttonShadow: `4px 4px 0 0 ${NOZLE_INK}`,\n    colorScheme: \"light\",\n  },\n  planCardLayout: \"panel\",\n  elements: {\n    pricingTable__grid: { gap: \"1rem\" },\n    planCard__cta: nozleCta,\n    checkoutButton: nozleCta,\n    upgradeButton: nozleCta,\n    checkout__submit: nozleCta,\n  },\n};\n\n/** The Nozle dashboard's dark (ink) look. Put it on a dark page background. */\nexport const nozleDark: Theme = {\n  variables: {\n    ...nozle.variables,\n    colorPrimary: \"hsl(11 92% 60%)\",\n    colorPrimaryForeground: \"hsl(138 53% 6%)\",\n    colorBackground: \"hsl(138 40% 6%)\",\n    colorCard: \"hsl(138 38% 10%)\",\n    colorForeground: \"hsl(138 20% 94%)\",\n    colorMuted: \"hsl(138 25% 16%)\",\n    colorMutedForeground: \"hsl(138 14% 68%)\",\n    colorAccent: \"hsl(11 60% 16%)\",\n    colorAccentForeground: \"hsl(11 92% 66%)\",\n    colorBorder: \"hsl(138 20% 20%)\",\n    colorDanger: \"hsl(2 78% 64%)\",\n    colorWarning: \"hsl(38 88% 60%)\",\n    colorSuccess: \"hsl(152 55% 55%)\",\n    colorSecondary: \"hsl(138 38% 10%)\",\n    colorInput: \"hsl(138 16% 44%)\",\n    buttonBorderColor: \"hsl(138 45% 3%)\",\n    buttonShadow: \"4px 4px 0 0 hsl(138 45% 3%)\",\n    colorScheme: \"dark\",\n  },\n  planCardLayout: \"panel\",\n  elements: nozle.elements,\n};\n"]}