chore(docs): fix some styling and docs

apps/docs/src/app/(main)/(markdown)/(demos)/components/autocomplete/CustomizingInlineChipsExample.tsx

@@ -1,10 +1,13 @@
 "use client";
-import { desserts } from "@/constants/desserts.js";
+import { type Dessert, desserts } from "@/constants/desserts.js";
 import { Autocomplete } from "@react-md/core/autocomplete/Autocomplete";
 import FavoriteIcon from "node_modules/@react-md/material-icons/src/FavoriteIcon.jsx";
 import { type ReactElement } from "react";
 
 export default function CustomizingInlineChipsExample(): ReactElement {
+  const isDisabled = (option: Dessert): boolean =>
+    option === desserts[0] || option === desserts[1] || option === desserts[4];
+
   return (
     <>
       <Autocomplete
@@ -14,11 +17,16 @@ export default function CustomizingInlineChipsExample(): ReactElement {
         listboxLabel="Desserts"
         options={desserts}
         getOptionLabel={(dessert) => dessert.name}
+        getOptionProps={({ option }) => {
+          return {
+            disabled: isDisabled(option),
+          };
+        }}
         getChipProps={({ option, index }) => {
           return {
             theme: "outline",
             leftAddon: <FavoriteIcon />,
-            disabled: index < 3,
+            disabled: isDisabled(option),
             children: `${option.name} ${index + 1}`,
           };
         }}

apps/docs/src/components/DemoCode/ScssCodeEditor.tsx

@@ -42,7 +42,7 @@ export function ScssCodeEditor(props: ScssCodeEditorProps): ReactElement {
       <CodeEditor
         disableMarginTop
         highlightCode={highlightCode}
-        language="css"
+        language={isCssVisible ? "css" : "scss"}
         editorProps={{
           ...editorProps,
           readOnly: isCssVisible,

apps/docs/src/constants/prismThemes.ts

@@ -71,7 +71,7 @@ export const PRISM_CSS_MAP = new Map([
   ["coldark-dark", "6c6682abc62d1397"],
   ["coy", "120e1710747fc6b8"],
   ["coy-without-shadows", "b2ee7277538d8799"],
-  ["darcula", "de476b82cb81da51"],
+  ["darcula", "f35b8154c6b86dcc"],
   ["dark", "88e9b4f9b765f3e0"],
   ["default", "74873245ffb17aec"],
   ["dracula", "4efad00159d33153"],
@@ -97,13 +97,13 @@ export const PRISM_CSS_MAP = new Map([
   ["one-dark", "89ba67ff07da49a1"],
   ["one-light", "cc4c84b33fb21125"],
   ["pojoaque", "54aa678bd4b7d1ff"],
-  ["shades-of-purple", "ad4cf4d8bf00e461"],
+  ["shades-of-purple", "0dd9bc8824fd31dd"],
   ["solarized-dark-atom", "7a6f5a512311e9c8"],
   ["solarizedlight", "bd32200387051ccd"],
   ["synthwave84", "87ef5c2eafcc79b3"],
   ["tomorrow", "20f6f8659320bd6f"],
   ["twilight", "60a93d88d2c7b561"],
-  ["vim-solarized-dark", "3516b127e246b234"],
+  ["vim-solarized-dark", "beb64ac6b3ce6bcb"],
   ["vs", "adea268e0b0c193e"],
   ["vsc-dark-plus", "64bdd77e7310f17a"],
   ["xonokai", "ac8d74c271cbac72"],

packages/docs-generator/src/scripts/create-prism-themes.ts

@@ -4,8 +4,7 @@ import cssnano from "cssnano";
 import cssnanoPresetDefault from "cssnano-preset-default";
 import { globSync } from "glob";
 import { createHash } from "node:crypto";
-import { existsSync } from "node:fs";
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { join, resolve } from "node:path";
 import postcss from "postcss";
 import postcssCombineDuplicatedSelectors from "postcss-combine-duplicated-selectors";
@@ -99,9 +98,8 @@ const INLINE_CODE_SELECTOR = ':not(pre) > code[class*="language-"]';
 const PREFIX_OR_EXTENSION_REGEXP =
   /-moz|\.(highlight|diff-highlight|line-highlight|code-toolbar|command-line|rainbow-braces|prism-previewer|line-numbers)/;
 
-if (!existsSync(prismThemesOutFolder)) {
-  await mkdir(prismThemesOutFolder, { recursive: true });
-}
+await rm(prismThemesOutFolder, { recursive: true, force: true });
+await mkdir(prismThemesOutFolder, { recursive: true });
 
 async function writeCss(themeName: string, contents: string): Promise<void> {
   const contentHashName = createHash("sha256")

packages/docs-generator/src/scripts/vim-solarized-dark.scss

@@ -116,9 +116,25 @@ $green: #859900;
     }
   }
 
-  .language-scss .token.function,
-  .language-scss .token.variable {
-    color: $blue;
+  .language-sh,
+  .language-bash,
+  .language-shell,
+  .language-css {
+    .token.function {
+      color: $orange;
+    }
+  }
+
+  .language-scss {
+    .token.unit,
+    .token.number {
+      color: $violet;
+    }
+
+    .token.function,
+    .token.variable {
+      color: $blue;
+    }
   }
 
   .language-ts .token + .class-name {
@@ -135,6 +151,14 @@ $green: #859900;
       color: inherit;
     }
 
+    .function {
+      color: $blue;
+    }
+
+    .keyword + .keyword + .function {
+      color: inherit;
+    }
+
     .token.keyword.module {
       color: $red;
 
@@ -151,20 +175,4 @@ $green: #859900;
       }
     }
   }
-
-  .language-scss .token.function {
-    color: $orange;
-  }
-
-  .language-sh .token.function,
-  .language-bash .token.function,
-  .language-shell .token.function {
-    color: $blue;
-  }
-
-  .language-sh .token.function,
-  .language-bash .token.parameter,
-  .language-shell .token.parameter {
-    color: $orange;
-  }
 }