@scalar/fastify-api-reference 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @scalar/fastify-api-reference
 
+## 1.22.0
+
+### Minor Changes
+
+- 0e64a36: refactor: rename all --theme-_ variables to --scalar-_
+
+### Patch Changes
+
+- 22f2858: chore: ran syncpack to update packages
+
 ## 1.21.0
 
 ### Minor Changes

package/dist/fastifyApiReference.d.ts

@@ -24,7 +24,7 @@ export type FastifyApiReferenceOptions = {
 /**
  * The Fastify custom theme CSS
  */
-export declare const defaultCss = "\n:root {\n  --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n  color-scheme: light;\n  --theme-color-1: #1c1e21;\n  --theme-color-2: #757575;\n  --theme-color-3: #8e8e8e;\n  --theme-color-disabled: #b4b1b1;\n  --theme-color-ghost: #a7a7a7;\n  --theme-color-accent: #2f8555;\n  --theme-background-1: #fff;\n  --theme-background-2: #f5f5f5;\n  --theme-background-3: #ededed;\n  --theme-background-4: rgba(0, 0, 0, 0.06);\n  --theme-background-accent: #2f85551f;\n\n  --theme-border-color: rgba(0, 0, 0, 0.1);\n  --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n  --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n  --theme-lifted-brightness: 1;\n  --theme-backdrop-brightness: 1;\n\n  --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n  --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n    rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n  --theme-button-1: rgb(49 53 56);\n  --theme-button-1-color: #fff;\n  --theme-button-1-hover: rgb(28 31 33);\n\n  --theme-color-green: #007300;\n  --theme-color-red: #af272b;\n  --theme-color-yellow: #b38200;\n  --theme-color-blue: #3b8ba5;\n  --theme-color-orange: #fb892c;\n  --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n  color-scheme: dark;\n  --theme-color-1: rgba(255, 255, 255, 0.9);\n  --theme-color-2: rgba(255, 255, 255, 0.62);\n  --theme-color-3: rgba(255, 255, 255, 0.44);\n  --theme-color-disabled: rgba(255, 255, 255, 0.34);\n  --theme-color-ghost: rgba(255, 255, 255, 0.26);\n  --theme-color-accent: #27c2a0;\n  --theme-background-1: #1b1b1d;\n  --theme-background-2: #242526;\n  --theme-background-3: #3b3b3b;\n  --theme-background-4: rgba(255, 255, 255, 0.06);\n  --theme-background-accent: #27c2a01f;\n\n  --theme-border-color: rgba(255, 255, 255, 0.1);\n  --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n  --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n  --theme-lifted-brightness: 1.45;\n  --theme-backdrop-brightness: 0.5;\n\n  --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n  --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n    rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n  --theme-button-1: #f6f6f6;\n  --theme-button-1-color: #000;\n  --theme-button-1-hover: #e7e7e7;\n\n  --theme-color-green: #26b226;\n  --theme-color-red: #fb565b;\n  --theme-color-yellow: #ffc426;\n  --theme-color-blue: #6ecfef;\n  --theme-color-orange: #ff8d4d;\n  --theme-color-purple: #b191f9;\n}\n";
+export declare const defaultCss = "\n:root {\n  --scalar-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n  color-scheme: light;\n  --scalar-color-1: #1c1e21;\n  --scalar-color-2: #757575;\n  --scalar-color-3: #8e8e8e;\n  --scalar-color-disabled: #b4b1b1;\n  --scalar-color-ghost: #a7a7a7;\n  --scalar-color-accent: #2f8555;\n  --scalar-background-1: #fff;\n  --scalar-background-2: #f5f5f5;\n  --scalar-background-3: #ededed;\n  --scalar-background-4: rgba(0, 0, 0, 0.06);\n  --scalar-background-accent: #2f85551f;\n\n  --scalar-border-color: rgba(0, 0, 0, 0.1);\n  --scalar-scrollbar-color: rgba(0, 0, 0, 0.18);\n  --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n  --scalar-lifted-brightness: 1;\n  --scalar-backdrop-brightness: 1;\n\n  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n  --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n    rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n  --scalar-button-1: rgb(49 53 56);\n  --scalar-button-1-color: #fff;\n  --scalar-button-1-hover: rgb(28 31 33);\n\n  --scalar-color-green: #007300;\n  --scalar-color-red: #af272b;\n  --scalar-color-yellow: #b38200;\n  --scalar-color-blue: #3b8ba5;\n  --scalar-color-orange: #fb892c;\n  --scalar-color-purple: #5203d1;\n}\n\n.dark-mode {\n  color-scheme: dark;\n  --scalar-color-1: rgba(255, 255, 255, 0.9);\n  --scalar-color-2: rgba(255, 255, 255, 0.62);\n  --scalar-color-3: rgba(255, 255, 255, 0.44);\n  --scalar-color-disabled: rgba(255, 255, 255, 0.34);\n  --scalar-color-ghost: rgba(255, 255, 255, 0.26);\n  --scalar-color-accent: #27c2a0;\n  --scalar-background-1: #1b1b1d;\n  --scalar-background-2: #242526;\n  --scalar-background-3: #3b3b3b;\n  --scalar-background-4: rgba(255, 255, 255, 0.06);\n  --scalar-background-accent: #27c2a01f;\n\n  --scalar-border-color: rgba(255, 255, 255, 0.1);\n  --scalar-scrollbar-color: rgba(255, 255, 255, 0.24);\n  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n  --scalar-lifted-brightness: 1.45;\n  --scalar-backdrop-brightness: 0.5;\n\n  --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n  --scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n    rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n  --scalar-button-1: #f6f6f6;\n  --scalar-button-1-color: #000;\n  --scalar-button-1-hover: #e7e7e7;\n\n  --scalar-color-green: #26b226;\n  --scalar-color-red: #fb565b;\n  --scalar-color-yellow: #ffc426;\n  --scalar-color-blue: #6ecfef;\n  --scalar-color-orange: #ff8d4d;\n  --scalar-color-purple: #b191f9;\n}\n";
 /**
  * The HTML to load the @scalar/api-reference JavaScript package.
  */

package/dist/fastifyApiReference.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fastifyApiReference.d.ts","sourceRoot":"","sources":["../src/fastifyApiReference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAKhB,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAA;CACvC,CAAA;AAcD;;GAEG;AACH,eAAO,MAAM,UAAU,64EA4EtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,YAAa,0BAA0B,WAkB7D,CAAA;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,0BAA0B,UAgB/D;AAED,QAAA,MAAM,mBAAmB,sIAiFxB,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"fastifyApiReference.d.ts","sourceRoot":"","sources":["../src/fastifyApiReference.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AACnE,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAKhB,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAA;CACvC,CAAA;AAcD;;GAEG;AACH,eAAO,MAAM,UAAU,o8EA4EtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,YAAa,0BAA0B,WAkB7D,CAAA;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,0BAA0B,UAgB/D;AAED,QAAA,MAAM,mBAAmB,sIAiFxB,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("fastify-plugin"),n=require("node:fs"),o=require("node:path"),t=require("node:url");var r="undefined"!=typeof document?document.currentScript:null;const c={hide:!0},l=(e,n)=>`${n??""}${e??""}/@scalar/fastify-api-reference/js/browser.js`.replace(/\/\//g,"/");function a(e){return`\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>API Reference</title>\n    <meta charset="utf-8" />\n    <meta\n      name="viewport"\n      content="width=device-width, initial-scale=1" />\n  </head>\n  <body>\n    ${(e=>{var n,o,t,r;const{configuration:c}=e;return`\n    <script\n      id="api-reference"\n      type="application/json"\n      data-configuration="${JSON.stringify(c??{}).split('"').join("&quot;")}">${(null==(n=null==c?void 0:c.spec)?void 0:n.content)?"function"==typeof(null==(o=null==c?void 0:c.spec)?void 0:o.content)?JSON.stringify(null==(t=null==c?void 0:c.spec)?void 0:t.content()):JSON.stringify(null==(r=null==c?void 0:c.spec)?void 0:r.content):""}<\/script>\n      <script src="${l(e.routePrefix,e.publicPath)}"><\/script>\n  `})(e)}\n  </body>\n</html>\n`}const i=e((async(e,i)=>{var s,d;let{configuration:h}=i;const u=e.hasPlugin("@fastify/swagger");if(!(null==(s=null==h?void 0:h.spec)?void 0:s.content)&&!(null==(d=null==h?void 0:h.spec)?void 0:d.url)&&!u)return void e.log.warn("[@scalar/fastify-api-reference] You didn’t provide a spec.content or spec.url, and @fastify/swagger could not be found. Please provide one of these options.");const m=function(){const e=o.dirname(t.fileURLToPath("undefined"==typeof document?require("url").pathToFileURL(__filename).href:r&&r.src||new URL("index.cjs",document.baseURI).href)),c=[o.resolve(`${e}/js/standalone.js`),o.resolve(`${e}/../../dist/js/standalone.js`)].find((e=>n.existsSync(e)));if(void 0===c)throw new Error(`JavaScript file not found: ${o.resolve(`${e}/js/standalone.js`)}`);return n.readFileSync(c,"utf8")}();e.route({method:"GET",url:i.routePrefix??"/",schema:c,handler(n,o){var t,r;return(null==(t=null==h?void 0:h.spec)?void 0:t.content)||(null==(r=null==h?void 0:h.spec)?void 0:r.url)||!u||(h={...h,spec:{content:()=>e.swagger()}}),(null==h?void 0:h.customCss)||(null==h?void 0:h.theme)||(h={...h,customCss:"\n:root {\n  --theme-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n  color-scheme: light;\n  --theme-color-1: #1c1e21;\n  --theme-color-2: #757575;\n  --theme-color-3: #8e8e8e;\n  --theme-color-disabled: #b4b1b1;\n  --theme-color-ghost: #a7a7a7;\n  --theme-color-accent: #2f8555;\n  --theme-background-1: #fff;\n  --theme-background-2: #f5f5f5;\n  --theme-background-3: #ededed;\n  --theme-background-4: rgba(0, 0, 0, 0.06);\n  --theme-background-accent: #2f85551f;\n\n  --theme-border-color: rgba(0, 0, 0, 0.1);\n  --theme-scrollbar-color: rgba(0, 0, 0, 0.18);\n  --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n  --theme-lifted-brightness: 1;\n  --theme-backdrop-brightness: 1;\n\n  --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n  --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n    rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n  --theme-button-1: rgb(49 53 56);\n  --theme-button-1-color: #fff;\n  --theme-button-1-hover: rgb(28 31 33);\n\n  --theme-color-green: #007300;\n  --theme-color-red: #af272b;\n  --theme-color-yellow: #b38200;\n  --theme-color-blue: #3b8ba5;\n  --theme-color-orange: #fb892c;\n  --theme-color-purple: #5203d1;\n}\n\n.dark-mode {\n  color-scheme: dark;\n  --theme-color-1: rgba(255, 255, 255, 0.9);\n  --theme-color-2: rgba(255, 255, 255, 0.62);\n  --theme-color-3: rgba(255, 255, 255, 0.44);\n  --theme-color-disabled: rgba(255, 255, 255, 0.34);\n  --theme-color-ghost: rgba(255, 255, 255, 0.26);\n  --theme-color-accent: #27c2a0;\n  --theme-background-1: #1b1b1d;\n  --theme-background-2: #242526;\n  --theme-background-3: #3b3b3b;\n  --theme-background-4: rgba(255, 255, 255, 0.06);\n  --theme-background-accent: #27c2a01f;\n\n  --theme-border-color: rgba(255, 255, 255, 0.1);\n  --theme-scrollbar-color: rgba(255, 255, 255, 0.24);\n  --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n  --theme-lifted-brightness: 1.45;\n  --theme-backdrop-brightness: 0.5;\n\n  --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n  --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n    rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n  --theme-button-1: #f6f6f6;\n  --theme-button-1-color: #000;\n  --theme-button-1-hover: #e7e7e7;\n\n  --theme-color-green: #26b226;\n  --theme-color-red: #fb565b;\n  --theme-color-yellow: #ffc426;\n  --theme-color-blue: #6ecfef;\n  --theme-color-orange: #ff8d4d;\n  --theme-color-purple: #b191f9;\n}\n"}),o.header("Content-Type","text/html; charset=utf-8").send(a({...i,configuration:h}))}}),e.route({method:"GET",url:l(i.routePrefix),schema:c,handler:(e,n)=>n.header("Content-Type","application/javascript; charset=utf-8").send(m)})}),{name:"@scalar/fastify-api-reference"});module.exports=i;
+"use strict";const r=require("fastify-plugin"),n=require("node:fs"),a=require("node:path"),e=require("node:url");var o="undefined"!=typeof document?document.currentScript:null;const c={hide:!0},l=(r,n)=>`${n??""}${r??""}/@scalar/fastify-api-reference/js/browser.js`.replace(/\/\//g,"/");function s(r){return`\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>API Reference</title>\n    <meta charset="utf-8" />\n    <meta\n      name="viewport"\n      content="width=device-width, initial-scale=1" />\n  </head>\n  <body>\n    ${(r=>{var n,a,e,o;const{configuration:c}=r;return`\n    <script\n      id="api-reference"\n      type="application/json"\n      data-configuration="${JSON.stringify(c??{}).split('"').join("&quot;")}">${(null==(n=null==c?void 0:c.spec)?void 0:n.content)?"function"==typeof(null==(a=null==c?void 0:c.spec)?void 0:a.content)?JSON.stringify(null==(e=null==c?void 0:c.spec)?void 0:e.content()):JSON.stringify(null==(o=null==c?void 0:c.spec)?void 0:o.content):""}<\/script>\n      <script src="${l(r.routePrefix,r.publicPath)}"><\/script>\n  `})(r)}\n  </body>\n</html>\n`}const t=r((async(r,t)=>{var i,d;let{configuration:u}=t;const f=r.hasPlugin("@fastify/swagger");if(!(null==(i=null==u?void 0:u.spec)?void 0:i.content)&&!(null==(d=null==u?void 0:u.spec)?void 0:d.url)&&!f)return void r.log.warn("[@scalar/fastify-api-reference] You didn’t provide a spec.content or spec.url, and @fastify/swagger could not be found. Please provide one of these options.");const b=function(){const r=a.dirname(e.fileURLToPath("undefined"==typeof document?require("url").pathToFileURL(__filename).href:o&&o.src||new URL("index.cjs",document.baseURI).href)),c=[a.resolve(`${r}/js/standalone.js`),a.resolve(`${r}/../../dist/js/standalone.js`)].find((r=>n.existsSync(r)));if(void 0===c)throw new Error(`JavaScript file not found: ${a.resolve(`${r}/js/standalone.js`)}`);return n.readFileSync(c,"utf8")}();r.route({method:"GET",url:t.routePrefix??"/",schema:c,handler(n,a){var e,o;return(null==(e=null==u?void 0:u.spec)?void 0:e.content)||(null==(o=null==u?void 0:u.spec)?void 0:o.url)||!f||(u={...u,spec:{content:()=>r.swagger()}}),(null==u?void 0:u.customCss)||(null==u?void 0:u.theme)||(u={...u,customCss:"\n:root {\n  --scalar-font: 'Inter', var(--system-fonts);\n}\n\n.light-mode {\n  color-scheme: light;\n  --scalar-color-1: #1c1e21;\n  --scalar-color-2: #757575;\n  --scalar-color-3: #8e8e8e;\n  --scalar-color-disabled: #b4b1b1;\n  --scalar-color-ghost: #a7a7a7;\n  --scalar-color-accent: #2f8555;\n  --scalar-background-1: #fff;\n  --scalar-background-2: #f5f5f5;\n  --scalar-background-3: #ededed;\n  --scalar-background-4: rgba(0, 0, 0, 0.06);\n  --scalar-background-accent: #2f85551f;\n\n  --scalar-border-color: rgba(0, 0, 0, 0.1);\n  --scalar-scrollbar-color: rgba(0, 0, 0, 0.18);\n  --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);\n  --scalar-lifted-brightness: 1;\n  --scalar-backdrop-brightness: 1;\n\n  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);\n  --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,\n    rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;\n\n  --scalar-button-1: rgb(49 53 56);\n  --scalar-button-1-color: #fff;\n  --scalar-button-1-hover: rgb(28 31 33);\n\n  --scalar-color-green: #007300;\n  --scalar-color-red: #af272b;\n  --scalar-color-yellow: #b38200;\n  --scalar-color-blue: #3b8ba5;\n  --scalar-color-orange: #fb892c;\n  --scalar-color-purple: #5203d1;\n}\n\n.dark-mode {\n  color-scheme: dark;\n  --scalar-color-1: rgba(255, 255, 255, 0.9);\n  --scalar-color-2: rgba(255, 255, 255, 0.62);\n  --scalar-color-3: rgba(255, 255, 255, 0.44);\n  --scalar-color-disabled: rgba(255, 255, 255, 0.34);\n  --scalar-color-ghost: rgba(255, 255, 255, 0.26);\n  --scalar-color-accent: #27c2a0;\n  --scalar-background-1: #1b1b1d;\n  --scalar-background-2: #242526;\n  --scalar-background-3: #3b3b3b;\n  --scalar-background-4: rgba(255, 255, 255, 0.06);\n  --scalar-background-accent: #27c2a01f;\n\n  --scalar-border-color: rgba(255, 255, 255, 0.1);\n  --scalar-scrollbar-color: rgba(255, 255, 255, 0.24);\n  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);\n  --scalar-lifted-brightness: 1.45;\n  --scalar-backdrop-brightness: 0.5;\n\n  --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);\n  --scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,\n    rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);\n\n  --scalar-button-1: #f6f6f6;\n  --scalar-button-1-color: #000;\n  --scalar-button-1-hover: #e7e7e7;\n\n  --scalar-color-green: #26b226;\n  --scalar-color-red: #fb565b;\n  --scalar-color-yellow: #ffc426;\n  --scalar-color-blue: #6ecfef;\n  --scalar-color-orange: #ff8d4d;\n  --scalar-color-purple: #b191f9;\n}\n"}),a.header("Content-Type","text/html; charset=utf-8").send(s({...t,configuration:u}))}}),r.route({method:"GET",url:l(t.routePrefix),schema:c,handler:(r,n)=>n.header("Content-Type","application/javascript; charset=utf-8").send(b)})}),{name:"@scalar/fastify-api-reference"});module.exports=t;

package/dist/index.js

@@ -26,79 +26,79 @@ const getJavaScriptUrl = (routePrefix, publicPath) => `${publicPath ?? ""}${rout
 );
 const defaultCss = `
 :root {
-  --theme-font: 'Inter', var(--system-fonts);
+  --scalar-font: 'Inter', var(--system-fonts);
 }
 
 .light-mode {
   color-scheme: light;
-  --theme-color-1: #1c1e21;
-  --theme-color-2: #757575;
-  --theme-color-3: #8e8e8e;
-  --theme-color-disabled: #b4b1b1;
-  --theme-color-ghost: #a7a7a7;
-  --theme-color-accent: #2f8555;
-  --theme-background-1: #fff;
-  --theme-background-2: #f5f5f5;
-  --theme-background-3: #ededed;
-  --theme-background-4: rgba(0, 0, 0, 0.06);
-  --theme-background-accent: #2f85551f;
+  --scalar-color-1: #1c1e21;
+  --scalar-color-2: #757575;
+  --scalar-color-3: #8e8e8e;
+  --scalar-color-disabled: #b4b1b1;
+  --scalar-color-ghost: #a7a7a7;
+  --scalar-color-accent: #2f8555;
+  --scalar-background-1: #fff;
+  --scalar-background-2: #f5f5f5;
+  --scalar-background-3: #ededed;
+  --scalar-background-4: rgba(0, 0, 0, 0.06);
+  --scalar-background-accent: #2f85551f;
 
-  --theme-border-color: rgba(0, 0, 0, 0.1);
-  --theme-scrollbar-color: rgba(0, 0, 0, 0.18);
-  --theme-scrollbar-color-active: rgba(0, 0, 0, 0.36);
-  --theme-lifted-brightness: 1;
-  --theme-backdrop-brightness: 1;
+  --scalar-border-color: rgba(0, 0, 0, 0.1);
+  --scalar-scrollbar-color: rgba(0, 0, 0, 0.18);
+  --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);
+  --scalar-lifted-brightness: 1;
+  --scalar-backdrop-brightness: 1;
 
-  --theme-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
-  --theme-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,
+  --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
+  --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px,
     rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 1px;
 
-  --theme-button-1: rgb(49 53 56);
-  --theme-button-1-color: #fff;
-  --theme-button-1-hover: rgb(28 31 33);
+  --scalar-button-1: rgb(49 53 56);
+  --scalar-button-1-color: #fff;
+  --scalar-button-1-hover: rgb(28 31 33);
 
-  --theme-color-green: #007300;
-  --theme-color-red: #af272b;
-  --theme-color-yellow: #b38200;
-  --theme-color-blue: #3b8ba5;
-  --theme-color-orange: #fb892c;
-  --theme-color-purple: #5203d1;
+  --scalar-color-green: #007300;
+  --scalar-color-red: #af272b;
+  --scalar-color-yellow: #b38200;
+  --scalar-color-blue: #3b8ba5;
+  --scalar-color-orange: #fb892c;
+  --scalar-color-purple: #5203d1;
 }
 
 .dark-mode {
   color-scheme: dark;
-  --theme-color-1: rgba(255, 255, 255, 0.9);
-  --theme-color-2: rgba(255, 255, 255, 0.62);
-  --theme-color-3: rgba(255, 255, 255, 0.44);
-  --theme-color-disabled: rgba(255, 255, 255, 0.34);
-  --theme-color-ghost: rgba(255, 255, 255, 0.26);
-  --theme-color-accent: #27c2a0;
-  --theme-background-1: #1b1b1d;
-  --theme-background-2: #242526;
-  --theme-background-3: #3b3b3b;
-  --theme-background-4: rgba(255, 255, 255, 0.06);
-  --theme-background-accent: #27c2a01f;
+  --scalar-color-1: rgba(255, 255, 255, 0.9);
+  --scalar-color-2: rgba(255, 255, 255, 0.62);
+  --scalar-color-3: rgba(255, 255, 255, 0.44);
+  --scalar-color-disabled: rgba(255, 255, 255, 0.34);
+  --scalar-color-ghost: rgba(255, 255, 255, 0.26);
+  --scalar-color-accent: #27c2a0;
+  --scalar-background-1: #1b1b1d;
+  --scalar-background-2: #242526;
+  --scalar-background-3: #3b3b3b;
+  --scalar-background-4: rgba(255, 255, 255, 0.06);
+  --scalar-background-accent: #27c2a01f;
 
-  --theme-border-color: rgba(255, 255, 255, 0.1);
-  --theme-scrollbar-color: rgba(255, 255, 255, 0.24);
-  --theme-scrollbar-color-active: rgba(255, 255, 255, 0.48);
-  --theme-lifted-brightness: 1.45;
-  --theme-backdrop-brightness: 0.5;
+  --scalar-border-color: rgba(255, 255, 255, 0.1);
+  --scalar-scrollbar-color: rgba(255, 255, 255, 0.24);
+  --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.48);
+  --scalar-lifted-brightness: 1.45;
+  --scalar-backdrop-brightness: 0.5;
 
-  --theme-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
-  --theme-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
+  --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
+  --scalar-shadow-2: rgba(15, 15, 15, 0.2) 0px 3px 6px,
     rgba(15, 15, 15, 0.4) 0px 9px 24px, 0 0 0 1px rgba(255, 255, 255, 0.1);
 
-  --theme-button-1: #f6f6f6;
-  --theme-button-1-color: #000;
-  --theme-button-1-hover: #e7e7e7;
+  --scalar-button-1: #f6f6f6;
+  --scalar-button-1-color: #000;
+  --scalar-button-1-hover: #e7e7e7;
 
-  --theme-color-green: #26b226;
-  --theme-color-red: #fb565b;
-  --theme-color-yellow: #ffc426;
-  --theme-color-blue: #6ecfef;
-  --theme-color-orange: #ff8d4d;
-  --theme-color-purple: #b191f9;
+  --scalar-color-green: #26b226;
+  --scalar-color-red: #fb565b;
+  --scalar-color-yellow: #ffc426;
+  --scalar-color-blue: #6ecfef;
+  --scalar-color-orange: #ff8d4d;
+  --scalar-color-purple: #b191f9;
 }
 `;
 const javascript = (options) => {