@scalar/docusaurus 0.4.50 → 0.4.51

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalar/docusaurus
 
+## 0.4.51
+
+### Patch Changes
+
+- 401446c: fix: docusaurus missing variables + icon uniformity
+- 1ba3b29: fix(docusaurus): build docusaurus theme css with postcss
+  - @scalar/api-reference-react@0.3.49
+
 ## 0.4.50
 
 ### Patch Changes

package/dist/theme.css

@@ -12,48 +12,69 @@
   --refs-sidebar-width: 300px;
 }
 /* basic theme */
-html[data-theme='light'] body {
+html[data-theme='light'] body,
+html[data-theme='light'] .scalar-card.dark-mode {
   --scalar-color-1: var(--ifm-font-color-base, #1c1e21);
   --scalar-color-2: var(--ifm-color-emphasis-700, #606770);
   --scalar-color-3: var(--ifm-color-emphasis-600, #8d949e);
   --scalar-color-accent: var(--ifm-menu-color-active, #277148);
 
-  --scalar-background-1: #fff;
-  --scalar-background-2: #f6f6f6;
-  --scalar-background-3: #e7e7e7;
+  --scalar-background-1: color-mix(
+    in srgb,
+    var(--ifm-background-color, #fff) 0%,
+    white
+  );
+  --scalar-background-2: color-mix(in srgb, rgba(0, 0, 0, 1) 4%, white);
+  --scalar-background-3: color-mix(in srgb, rgba(0, 0, 0, 1) 8%, white);
   --scalar-background-accent: var(
     --ifm-menu-color-background-active,
     rgba(0, 0, 0, 0.05)
   );
 
   --scalar-border-color: var(--ifm-color-emphasis-300, #ebedf0);
-}
-@supports (color: color-mix(in srgb, rgba(0, 0, 0, 1) 5%, white)) {
-  html[data-theme='light'] body {
-    --scalar-background-1: color-mix(
-      in srgb,
-      var(--ifm-background-color, #fff) 0%,
-      white
-    );
-    --scalar-background-2: color-mix(in srgb, rgba(0, 0, 0, 1) 4%, white);
-    --scalar-background-3: color-mix(in srgb, rgba(0, 0, 0, 1) 8%, white);
-  }
+
+  --scalar-color-green: #00a400;
+  --scalar-color-red: #fa383e;
+  --scalar-color-yellow: #ffba00;
+  --scalar-color-blue: #0082d0;
+  --scalar-color-orange: #fb892c;
+  --scalar-color-purple: #5203d1;
+  --scalar-button-1: rgba(0, 0, 0, 1);
+  --scalar-button-1-hover: rgba(0, 0, 0, 0.8);
+  --scalar-button-1-color: rgba(255, 255, 255, 0.9);
 }
 
-html[data-theme='dark'] body {
+html[data-theme='dark'] body,
+.scalar-card.dark-mode {
   --scalar-color-1: var(--ifm-font-color-base, rgb(227, 227, 227));
   --scalar-color-2: var(--ifm-color-emphasis-700, #dadde1);
   --scalar-color-3: var(--ifm-color-emphasis-400, #8d949e);
   --scalar-color-accent: var(--ifm-menu-color-active, #1fa588);
 
   --scalar-background-1: var(--ifm-background-color, #1b1b1d);
-  --scalar-background-3: #323232;
+  --scalar-background-2: color-mix(
+    in srgb,
+    rgba(255, 255, 255, 1) 6%,
+    var(--ifm-background-color)
+  );
+  --scalar-background-3: color-mix(
+    in srgb,
+    rgba(255, 255, 255, 1) 12%,
+    var(--ifm-background-color)
+  );
   --scalar-background-accent: var(
     --ifm-menu-color-background-active,
     hsla(0, 0%, 100%, 0.05)
   );
 
   --scalar-border-color: var(--ifm-color-emphasis-200, #444950);
+
+  --scalar-color-green: #00a400;
+  --scalar-color-red: #fa383e;
+  --scalar-color-yellow: #ffba00;
+  --scalar-color-blue: #3578e5;
+  --scalar-color-orange: #ff8d4d;
+  --scalar-color-purple: #b191f9;
 }
 .sidebar-group-item:has(.active_page) .sidebar-group-item__folder {
   color: var(--scalar-color-accent);
@@ -86,43 +107,6 @@ html[data-theme='dark'] body .t-doc__sidebar {
     hsla(0, 0%, 100%, 0.05)
   );
 }
-/* advanced */
-html[data-theme='light'] body {
-  --scalar-color-green: #00a400;
-  --scalar-color-red: #fa383e;
-  --scalar-color-yellow: #ffba00;
-  --scalar-color-blue: #0082d0;
-  --scalar-color-orange: #fb892c;
-  --scalar-color-purple: #5203d1;
-  --scalar-docsearch-key: var(
-    --docsearch-key-gradient,
-    linear-gradient(-225deg, #d5dbe4, #f8f8f8)
-  );
-  --scalar-docsearch-boxshadow: var(
-    --docsearch-key-shadow,
-    inset 0 -2px 0 0 #cdcde6,
-    inset 0 0 1px 1px #fff,
-    0 1px 2px 1px rgba(30, 35, 90, 0.4)
-  );
-}
-html[data-theme='dark'] body {
-  --scalar-color-green: #00a400;
-  --scalar-color-red: #fa383e;
-  --scalar-color-yellow: #ffba00;
-  --scalar-color-blue: #3578e5;
-  --scalar-color-orange: #ff8d4d;
-  --scalar-color-purple: #b191f9;
-  --scalar-docsearch-key: var(
-    --docsearch-key-gradient,
-    linear-gradient(-26.5deg, #444950 0%, #1c1e21 100%)
-  );
-  --scalar-docsearch-boxshadow: var(
-    --docsearch-key-shadow,
-    inset 0 -2px 0 0 #282d55,
-    inset 0 0 1px 1px #51577d,
-    0 2px 2px 0 rgba(3, 4, 9, 0.3)
-  );
-}
 .references-rendered .section-header {
   color: var(--ifm-heading-color, var(--scalar-color-1));
 }
@@ -206,10 +190,8 @@ html[data-theme='light'] body .api-client-drawer {
 .sidebar-search-shortcut .sidebar-search-key {
   font-family: var(--scalar-font-code);
   font-size: 15px;
-  background: var(--scalar-docsearch-key);
   border: 0;
   border-radius: 3px;
-  box-shadow: var(--scalar-docsearch-boxshadow);
 }
 .t-doc__sidebar {
   max-height: calc(100dvh - var(--ifm-navbar-height));
@@ -232,6 +214,9 @@ html[data-theme='light'] body .api-client-drawer {
     ((var(--full-height) - var(--refs-header-height)) - 60px) / 2
   );
 }
+.scalar-card .scalar-codeblock-pre {
+  padding: 0;
+}
 .sidebar-heading-chevron {
   padding: var(--ifm-menu-link-padding-vertical)
     var(--ifm-menu-link-padding-horizontal);
@@ -241,9 +226,6 @@ html[data-theme='light'] body .api-client-drawer {
 .schema-properties-open > .schema-card-title {
   backdrop-filter: blur(50px);
 }
-.tag-section-container .scalar-card {
-  border: none !important;
-}
 @container narrow-references-container (max-width: 900px) {
   .section {
     padding-top: calc(var(--refs-header-height) + 48px) !important;
@@ -312,8 +294,7 @@ html[data-theme='light'] body .api-client-drawer {
   user-select: none;
 }
 
-.scalar-app {
-  code.hljs * {
+.scalar-app code.hljs * {
     font-size: var(--scalar-small);
     font-family: var(--scalar-font-code);
     text-align: left;
@@ -324,18 +305,20 @@ html[data-theme='light'] body .api-client-drawer {
     line-height: 1.4;
     tab-size: 4;
   }
-  code.hljs {
+
+.scalar-app code.hljs {
     font-size: var(--scalar-small);
     font-family: var(--scalar-font-code);
     display: inline-block;
     counter-reset: linenumber;
   }
-  .hljs {
+
+.scalar-app .hljs {
     background: transparent;
     color: var(--scalar-color-2);
   }
 
-  .hljs .line::before {
+.scalar-app .hljs .line::before {
     color: var(--scalar-color-3);
     display: inline-block;
     counter-increment: linenumber;
@@ -345,192 +328,210 @@ html[data-theme='light'] body .api-client-drawer {
     min-width: calc(var(--line-digits) * 1ch);
     text-align: right;
   }
-  /* ------------------------------------------------------------- */
-  /* Data types */
-  .hljs-comment,
-  .hljs-quote {
+
+/* ------------------------------------------------------------- */
+
+/* Data types */
+
+.scalar-app .hljs-comment,
+  .scalar-app .hljs-quote {
     color: var(--scalar-color-3);
     font-style: italic;
   }
 
-  .hljs-number {
+.scalar-app .hljs-number {
     color: var(--scalar-color-orange);
   }
 
-  .hljs-regexp,
-  .hljs-string {
+.scalar-app .hljs-regexp,
+  .scalar-app .hljs-string {
     color: var(--scalar-color-blue);
   }
 
-  /** Globals such as `var()` and `!important` */
-  .hljs-built_in {
+/** Globals such as `var()` and `!important` */
+
+.scalar-app .hljs-built_in {
     color: var(--scalar-color-blue);
   }
 
-  /** Class initializers such as `Array` or `Date` */
-  /** Type declarations such as `Record` */
-  .hljs-title.class_ {
+/** Class initializers such as `Array` or `Date` */
+
+/** Type declarations such as `Record` */
+
+.scalar-app .hljs-title.class_ {
     color: var(--scalar-color-1);
   }
 
-  /** Language indicators such as `new`, `const`, or `function` in JS  */
-  .hljs-keyword {
+/** Language indicators such as `new`, `const`, or `function` in JS  */
+
+.scalar-app .hljs-keyword {
     color: var(--scalar-color-purple);
   }
 
-  /** Function names when declaring and calling */
-  .hljs-title.function_ {
+/** Function names when declaring and calling */
+
+.scalar-app .hljs-title.function_ {
     color: var(--scalar-color-orange);
   }
 
-  /** Template substitution */
-  .hljs-subst {
+/** Template substitution */
+
+.scalar-app .hljs-subst {
     color: var(--scalar-color-blue);
   }
 
-  /** HTML Tag name */
-  .hljs-name {
+/** HTML Tag name */
+
+.scalar-app .hljs-name {
     color: var(--scalar-color-blue);
   }
 
-  /** Attribute name (ex. `class`, `id`) */
-  .hljs-attr,
-  .hljs-attribute {
+/** Attribute name (ex. `class`, `id`) */
+
+.scalar-app .hljs-attr,
+  .scalar-app .hljs-attribute {
     color: var(--scalar-color-1);
   }
 
-  .hljs-addition,
-  .hljs-literal,
-  .hljs-selector-tag,
-  .hljs-type {
+.scalar-app .hljs-addition,
+  .scalar-app .hljs-literal,
+  .scalar-app .hljs-selector-tag,
+  .scalar-app .hljs-type {
     color: var(--scalar-color-green);
   }
 
-  .hljs-selector-attr,
-  .hljs-selector-pseudo {
+.scalar-app .hljs-selector-attr,
+  .scalar-app .hljs-selector-pseudo {
     color: var(--scalar-color-orange);
   }
-  .hljs-doctag {
+
+.scalar-app .hljs-doctag {
     color: var(--scalar-color-blue);
   }
 
-  .hljs-section,
-  .hljs-title {
+.scalar-app .hljs-section,
+  .scalar-app .hljs-title {
     color: var(--scalar-color-blue);
   }
 
-  .hljs-selector-id,
-  .hljs-template-variable,
-  .hljs-variable {
+.scalar-app .hljs-selector-id,
+  .scalar-app .hljs-template-variable,
+  .scalar-app .hljs-variable {
     color: var(--scalar-color-1);
   }
 
-  .hljs-name,
-  .hljs-section,
-  .hljs-strong {
+.scalar-app .hljs-name,
+  .scalar-app .hljs-section,
+  .scalar-app .hljs-strong {
     font-weight: var(--scalar-semibold);
   }
 
-  .hljs-bullet,
-  .hljs-link,
-  .hljs-meta,
-  .hljs-symbol {
+.scalar-app .hljs-bullet,
+  .scalar-app .hljs-link,
+  .scalar-app .hljs-meta,
+  .scalar-app .hljs-symbol {
     color: var(--scalar-color-blue);
   }
 
-  .hljs-deletion {
+.scalar-app .hljs-deletion {
     color: var(--scalar-color-red);
   }
 
-  .hljs-formula {
+.scalar-app .hljs-formula {
     background: var(--scalar-color-1);
   }
 
-  .hljs-emphasis {
+.scalar-app .hljs-emphasis {
     font-style: italic;
   }
 
-  /* -------------------------------------------------------------- */
-  /* Language specific overrides */
+/* -------------------------------------------------------------- */
+
+/* Language specific overrides */
+
+/** For HTML we leave the content strings brighter */
 
-  /** For HTML we leave the content strings brighter */
-  .hljs.language-html {
+.scalar-app .hljs.language-html {
     color: var(--scalar-color-1);
   }
 
-  /** For HTML make the attr text different than the content */
-  .hljs.language-html .hljs-attr {
+/** For HTML make the attr text different than the content */
+
+.scalar-app .hljs.language-html .hljs-attr {
     color: var(--scalar-color-2);
   }
 
-  .hljs.language-curl .hljs-keyword {
+.scalar-app .hljs.language-curl .hljs-keyword {
     color: var(--scalar-color-orange);
   }
 
-  .hljs.language-curl .hljs-string {
+.scalar-app .hljs.language-curl .hljs-string {
     color: var(--scalar-color-1);
   }
 
-  .hljs.language-curl .hljs-literal {
+.scalar-app .hljs.language-curl .hljs-literal {
     color: var(--scalar-color-blue);
   }
 
-  .hljs.language-curl .hljs-literal {
+.scalar-app .hljs.language-curl .hljs-literal {
     color: var(--scalar-color-blue);
   }
 
-  /** Compromise here */
-  .hljs.language-cpp .hljs-built_in {
+/** Compromise here */
+
+.scalar-app .hljs.language-cpp .hljs-built_in {
     /* color: var(--scalar-color-1); */
   }
 
-  .hljs.language-php .hljs-variable {
+.scalar-app .hljs.language-php .hljs-variable {
     color: var(--scalar-color-blue);
   }
 
-  .hljs.language-objectivec .hljs-meta {
+.scalar-app .hljs.language-objectivec .hljs-meta {
     color: var(--scalar-color-1);
   }
 
-  .hljs.language-objectivec .hljs-built_in {
+.scalar-app .hljs.language-objectivec .hljs-built_in {
     color: var(--scalar-color-orange);
   }
 
-  .hljs-built_in {
+.scalar-app .hljs-built_in {
     color: var(--scalar-color-orange);
   }
 
-  .markdown {
+.scalar-app .markdown {
     font-family: var(--scalar-font);
     color: var(--scalar-color-1);
     word-break: break-word;
   }
 
-  /* Apply base padding for all block elements */
-  .markdown h1,
-  .markdown h2,
-  .markdown h3,
-  .markdown h4,
-  .markdown h5,
-  .markdown h6,
-  .markdown p,
-  .markdown div,
-  .markdown img,
-  .markdown details,
-  .markdown summary,
-  .markdown ul,
-  .markdown ol,
-  .markdown table,
-  .markdown blockquote,
-  .markdown code {
+/* Apply base padding for all block elements */
+
+.scalar-app .markdown h1,
+  .scalar-app .markdown h2,
+  .scalar-app .markdown h3,
+  .scalar-app .markdown h4,
+  .scalar-app .markdown h5,
+  .scalar-app .markdown h6,
+  .scalar-app .markdown p,
+  .scalar-app .markdown div,
+  .scalar-app .markdown img,
+  .scalar-app .markdown details,
+  .scalar-app .markdown summary,
+  .scalar-app .markdown ul,
+  .scalar-app .markdown ol,
+  .scalar-app .markdown table,
+  .scalar-app .markdown blockquote,
+  .scalar-app .markdown code {
     margin: 12px 0;
   }
 
-  .markdown details {
+.scalar-app .markdown details {
     margin: 12px 0;
     color: var(--scalar-color-1);
   }
-  .markdown summary {
+
+.scalar-app .markdown summary {
     display: block;
     margin: 12px 0;
     padding-left: 20px;
@@ -540,7 +541,7 @@ html[data-theme='light'] body .api-client-drawer {
     user-select: none;
   }
 
-  .markdown summary::after {
+.scalar-app .markdown summary::after {
     display: block;
     content: '';
 
@@ -555,65 +556,71 @@ html[data-theme='light'] body .api-client-drawer {
     mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.25 19.5L15.75 12L8.25 4.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
   }
 
-  .markdown summary:hover::after {
+.scalar-app .markdown summary:hover::after {
     background-color: var(--scalar-color-1);
   }
 
-  .markdown details[open] summary::after {
+.scalar-app .markdown details[open] summary::after {
     transform: rotate(90deg);
   }
 
-  /* Fix for Safari displaying default caret next to `<summary>` */
-  .markdown summary::-webkit-details-marker {
+/* Fix for Safari displaying default caret next to `<summary>` */
+
+.scalar-app .markdown summary::-webkit-details-marker {
     display: none;
   }
 
-  .markdown img {
+.scalar-app .markdown img {
     overflow: hidden;
     border-radius: var(--scalar-radius);
     max-width: 100%;
   }
-  /* Don't add margin to the first block */
-  .markdown > :first-child {
+
+/* Don't add margin to the first block */
+
+.scalar-app .markdown > :first-child {
     margin-top: 0;
   }
 
-  .markdown h1 {
+.scalar-app .markdown h1 {
     --font-size: 1.4em;
   }
 
-  .markdown h2 {
+.scalar-app .markdown h2 {
     --font-size: 1.25em;
   }
 
-  .markdown h3 {
+.scalar-app .markdown h3 {
     --font-size: 1.1em;
   }
 
-  .markdown h4 {
+.scalar-app .markdown h4 {
     --font-size: 1em;
   }
 
-  .markdown h6 {
+.scalar-app .markdown h6 {
     --font-size: 1em;
   }
-  .markdown h1,
-  .markdown h2,
-  .markdown h3,
-  .markdown h4,
-  .markdown h5,
-  .markdown h6 {
+
+.scalar-app .markdown h1,
+  .scalar-app .markdown h2,
+  .scalar-app .markdown h3,
+  .scalar-app .markdown h4,
+  .scalar-app .markdown h5,
+  .scalar-app .markdown h6 {
     font-size: var(--font-size);
     margin: 18px 0 6px;
     font-weight: var(--scalar-bold);
     display: block;
     line-height: 1.45;
   }
-  .markdown b,
-  .markdown strong {
+
+.scalar-app .markdown b,
+  .scalar-app .markdown strong {
     font-weight: var(--scalar-bold);
   }
-  .markdown p {
+
+.scalar-app .markdown p {
     color: var(--scalar-color-1);
     font-weight: var(--font-weight, var(--scalar-regular));
     line-height: 1.5;
@@ -621,56 +628,63 @@ html[data-theme='light'] body .api-client-drawer {
     display: block;
   }
 
-  .markdown ul,
-  .markdown ol {
+.scalar-app .markdown ul,
+  .scalar-app .markdown ol {
     padding-left: 24px;
     line-height: 1.5;
     margin: 12px 0;
     display: block;
   }
 
-  .markdown ul {
+.scalar-app .markdown ul {
     list-style: disc;
   }
 
-  .markdown ol {
+.scalar-app .markdown ol {
     list-style: decimal;
   }
 
-  .markdown ul.contains-task-list {
+.scalar-app .markdown ul.contains-task-list {
     list-style: none;
     padding-left: 0;
   }
 
-  .markdown li {
+.scalar-app .markdown li {
     margin: 6px 0;
     display: list-item;
   }
-  .markdown a {
+
+.scalar-app .markdown a {
     color: var(--scalar-color-accent);
     text-decoration: var(--scalar-text-decoration);
     cursor: pointer;
   }
-  .markdown a:hover {
+
+.scalar-app .markdown a:hover {
     text-decoration: var(--scalar-text-decoration-hover);
   }
-  .markdown em {
+
+.scalar-app .markdown em {
     font-style: italic;
   }
-  .markdown sup {
+
+.scalar-app .markdown sup {
     font-size: var(--scalar-micro);
     vertical-align: super;
     font-weight: 450;
   }
-  .markdown sub {
+
+.scalar-app .markdown sub {
     font-size: var(--scalar-micro);
     vertical-align: sub;
     font-weight: 450;
   }
-  .markdown del {
+
+.scalar-app .markdown del {
     text-decoration: line-through;
   }
-  .markdown code {
+
+.scalar-app .markdown code {
     font-family: var(--scalar-font-code);
     background-color: var(--scalar-background-2);
     box-shadow: 0 0 0 1px var(--scalar-border-color);
@@ -679,7 +693,7 @@ html[data-theme='light'] body .api-client-drawer {
     padding: 0 3px;
   }
 
-  .markdown pre code {
+.scalar-app .markdown pre code {
     display: block;
     white-space: pre;
     padding: 12px;
@@ -691,19 +705,19 @@ html[data-theme='light'] body .api-client-drawer {
     min-width: 100px;
   }
 
-  .markdown hr {
+.scalar-app .markdown hr {
     border: none;
     border-bottom: 1px solid var(--scalar-border-color);
   }
 
-  .markdown blockquote {
+.scalar-app .markdown blockquote {
     border-left: 3px solid var(--scalar-border-color);
     padding-left: 12px;
     margin: 0;
     display: block;
   }
 
-  .markdown table {
+.scalar-app .markdown table {
     display: block;
     overflow-x: auto;
     position: relative;
@@ -714,22 +728,25 @@ html[data-theme='light'] body .api-client-drawer {
     box-shadow: 0 0 0 1px var(--scalar-border-color);
     border-radius: var(--scalar-radius-lg);
   }
-  .markdown tbody {
+
+.scalar-app .markdown tbody {
     display: table-row-group;
     vertical-align: middle;
   }
-  .markdown thead {
+
+.scalar-app .markdown thead {
     display: table-header-group;
     vertical-align: middle;
   }
 
-  .markdown tr {
+.scalar-app .markdown tr {
     display: table-row;
     border-color: inherit;
     vertical-align: inherit;
   }
-  .markdown td,
-  .markdown th {
+
+.scalar-app .markdown td,
+  .scalar-app .markdown th {
     display: table-cell;
     vertical-align: inherit;
     min-width: 1em;
@@ -745,41 +762,53 @@ html[data-theme='light'] body .api-client-drawer {
     border-bottom: 1px solid var(--scalar-border-color);
   }
 
-  .markdown td > *,
-  .markdown th > * {
+.scalar-app .markdown td > *,
+  .scalar-app .markdown th > * {
     margin-bottom: 0;
   }
-  .markdown th:empty {
+
+.scalar-app .markdown th:empty {
     display: none;
   }
-  .markdown td:first-of-type,
-  .markdown th:first-of-type {
+
+.scalar-app .markdown td:first-of-type,
+  .scalar-app .markdown th:first-of-type {
     border-left: none;
   }
 
-  .markdown td:last-of-type,
-  .markdown th:last-of-type {
+.scalar-app .markdown td:last-of-type,
+  .scalar-app .markdown th:last-of-type {
     border-right: none;
   }
 
-  .markdown tr:last-of-type td {
+.scalar-app .markdown tr:last-of-type td {
     border-bottom: none;
   }
 
-  .markdown th {
+.scalar-app .markdown th {
     font-weight: var(--scalar-semibold) !important;
     text-align: left;
     border-left-color: transparent;
     background: var(--scalar-background-2);
   }
 
-  .markdown tr > [align='left'] {
+.scalar-app .markdown tr > [align='left'] {
     text-align: left;
   }
-  .markdown tr > [align='right'] {
+
+.scalar-app .markdown tr > [align='right'] {
     text-align: right;
   }
-  .markdown tr > [align='center'] {
+
+.scalar-app .markdown tr > [align='center'] {
     text-align: center;
   }
-}
+
+/* Docusaurus specific markdown - warning do not delete */
+
+.scalar-app .markdown pre {
+    --ifm-pre-padding: 0;
+    --ifm-spacing-vertical: 0;
+    --ifm-pre-background: transparent;
+    overflow: inherit;
+  }

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "0.4.50",
+  "version": "0.4.51",
   "engines": {
     "node": ">=18"
   },
@@ -29,19 +29,22 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/api-reference-react": "0.3.48"
+    "@scalar/api-reference-react": "0.3.49"
   },
   "devDependencies": {
     "@docusaurus/types": "^3.4.0",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "postcss": "^8.4.38",
+    "postcss-cli": "^11.0.0",
+    "postcss-nesting": "^12.1.5"
   },
   "peerDependencies": {
     "react": "^18.0.0"
   },
   "scripts": {
-    "build": "rm -Rf ./dist && tsc --declaration && cp ./src/theme.css ./dist/",
+    "build": "rm -Rf ./dist && tsc --declaration && postcss src/theme.css -o dist/theme.css",
     "lint:check": "eslint .",
     "lint:fix": "eslint .  --fix",
     "types:check": "tsc --noEmit --skipLibCheck"