@cyclone-ui/shiki 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Changelog for Cyclone UI - Shiki
 
+## [0.0.5](https://github.com/storm-software/cyclone-ui/releases/tag/shiki%400.0.5) (10/12/2026)
+
+### Bug Fixes
+
+- **tokens:** Updates to background token structure ([913fc3c9](https://github.com/storm-software/cyclone-ui/commit/913fc3c9))
+
 ## [0.0.4](https://github.com/storm-software/cyclone-ui/releases/tag/shiki%400.0.4) (10/12/2026)
 
 ### Bug Fixes

package/dist/dark/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#46464a",
+        "foreground": "#959698",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#46464a"
+        "foreground": "#959698"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#f1f1f1",
     "editor.selectionForeground": "#151518",
     "editor.inactiveSelectionBackground": "#0c0c0d",
-    "editorLineNumber.foreground": "#46464a",
+    "editorLineNumber.foreground": "#959698",
     "editorLineNumber.activeForeground": "#cacacb",
-    "editorIndentGuide.background1": "#555659",
-    "editorIndentGuide.activeBackground1": "#46464a",
-    "editorWhitespace.foreground": "#46464a"
+    "editorIndentGuide.background1": "#46464a",
+    "editorIndentGuide.activeBackground1": "#959698",
+    "editorWhitespace.foreground": "#959698"
   }
 }

package/dist/dark-dimmed/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#57575a",
+        "foreground": "#8f8f90",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#57575a"
+        "foreground": "#8f8f90"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#cfcfcf",
     "editor.selectionForeground": "#343438",
     "editor.inactiveSelectionBackground": "#2e2e30",
-    "editorLineNumber.foreground": "#57575a",
+    "editorLineNumber.foreground": "#8f8f90",
     "editorLineNumber.activeForeground": "#b4b4b4",
-    "editorIndentGuide.background1": "#626364",
-    "editorIndentGuide.activeBackground1": "#57575a",
-    "editorWhitespace.foreground": "#57575a"
+    "editorIndentGuide.background1": "#57575a",
+    "editorIndentGuide.activeBackground1": "#8f8f90",
+    "editorWhitespace.foreground": "#8f8f90"
   }
 }

package/dist/dark-high-contrast/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#2b2b33",
+        "foreground": "#9a9fa7",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#2b2b33"
+        "foreground": "#9a9fa7"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#ffffff",
     "editor.selectionForeground": "#000000",
     "editor.inactiveSelectionBackground": "#000000",
-    "editorLineNumber.foreground": "#2b2b33",
+    "editorLineNumber.foreground": "#9a9fa7",
     "editorLineNumber.activeForeground": "#ebebed",
-    "editorIndentGuide.background1": "#3f424a",
-    "editorIndentGuide.activeBackground1": "#2b2b33",
-    "editorWhitespace.foreground": "#2b2b33"
+    "editorIndentGuide.background1": "#2b2b33",
+    "editorIndentGuide.activeBackground1": "#9a9fa7",
+    "editorWhitespace.foreground": "#9a9fa7"
   }
 }

package/dist/light/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#cacacb",
+        "foreground": "#959698",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#cacacb"
+        "foreground": "#959698"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#1f1f21",
     "editor.selectionForeground": "#eaeaea",
     "editor.inactiveSelectionBackground": "#e1e1e1",
-    "editorLineNumber.foreground": "#cacacb",
+    "editorLineNumber.foreground": "#959698",
     "editorLineNumber.activeForeground": "#555659",
-    "editorIndentGuide.background1": "#b0b0b1",
-    "editorIndentGuide.activeBackground1": "#cacacb",
-    "editorWhitespace.foreground": "#cacacb"
+    "editorIndentGuide.background1": "#e1e1e1",
+    "editorIndentGuide.activeBackground1": "#959698",
+    "editorWhitespace.foreground": "#959698"
   }
 }

package/dist/light-dimmed/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#b4b4b4",
+        "foreground": "#8f8f90",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#b4b4b4"
+        "foreground": "#8f8f90"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#3c3c3e",
     "editor.selectionForeground": "#cacaca",
     "editor.inactiveSelectionBackground": "#c4c4c4",
-    "editorLineNumber.foreground": "#b4b4b4",
+    "editorLineNumber.foreground": "#8f8f90",
     "editorLineNumber.activeForeground": "#626364",
-    "editorIndentGuide.background1": "#a1a1a2",
-    "editorIndentGuide.activeBackground1": "#b4b4b4",
-    "editorWhitespace.foreground": "#b4b4b4"
+    "editorIndentGuide.background1": "#c4c4c4",
+    "editorIndentGuide.activeBackground1": "#8f8f90",
+    "editorWhitespace.foreground": "#8f8f90"
   }
 }

package/dist/light-high-contrast/theme.json

@@ -7,7 +7,7 @@
         "punctuation.definition.comment"
       ],
       "settings": {
-        "foreground": "#ebebed",
+        "foreground": "#9a9fa7",
         "fontStyle": "italic"
       }
     },
@@ -92,7 +92,7 @@
         "meta.brace"
       ],
       "settings": {
-        "foreground": "#ebebed"
+        "foreground": "#9a9fa7"
       }
     },
     {
@@ -116,10 +116,10 @@
     "editor.selectionBackground": "#000000",
     "editor.selectionForeground": "#ffffff",
     "editor.inactiveSelectionBackground": "#ffffff",
-    "editorLineNumber.foreground": "#ebebed",
+    "editorLineNumber.foreground": "#9a9fa7",
     "editorLineNumber.activeForeground": "#3f424a",
-    "editorIndentGuide.background1": "#c3c3ca",
-    "editorIndentGuide.activeBackground1": "#ebebed",
-    "editorWhitespace.foreground": "#ebebed"
+    "editorIndentGuide.background1": "#ffffff",
+    "editorIndentGuide.activeBackground1": "#9a9fa7",
+    "editorWhitespace.foreground": "#9a9fa7"
   }
 }

package/dist/src/dark/INSTALL.md

@@ -0,0 +1,45 @@
+# Installing Cyclone UI (Dark)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Dark (theme id: `cyclone-dark`)
+
+## Setup
+
+1. Copy or import the generated JSON into your app (paths depend on your bundler).
+
+2. Register themes when creating a Shiki highlighter:
+
+```ts
+import { createHighlighter } from "shiki";
+import theme from "./theme.json";
+
+const highlighter = await createHighlighter({
+  themes: [theme],
+  langs: ["javascript"]
+});
+
+const html = highlighter.codeToHtml("const x = 1", {
+  lang: "javascript",
+  theme: "cyclone-dark"
+});
+```
+
+Or load at runtime:
+
+```ts
+import { readFile } from "node:fs/promises";
+
+const theme = JSON.parse(
+  await readFile("./theme.json", "utf8")
+);
+await highlighter.loadTheme(theme);
+```
+
+## Select / load theme
+
+Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
+
+- `cyclone-dark` — Cyclone Dark

package/dist/src/dark/theme.json

@@ -0,0 +1,125 @@
+{
+  "name": "cyclone-dark",
+  "settings": [
+    {
+      "scope": [
+        "comment",
+        "punctuation.definition.comment"
+      ],
+      "settings": {
+        "foreground": "#959698",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "constant.other.symbol"
+      ],
+      "settings": {
+        "foreground": "#45c791"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "constant.numeric",
+        "constant.language"
+      ],
+      "settings": {
+        "foreground": "#f7ac23"
+      }
+    },
+    {
+      "scope": [
+        "keyword",
+        "storage",
+        "storage.type"
+      ],
+      "settings": {
+        "foreground": "#4d8eff"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function",
+        "support.function"
+      ],
+      "settings": {
+        "foreground": "#4d8eff"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#9277da"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.tag",
+        "meta.tag"
+      ],
+      "settings": {
+        "foreground": "#4d8eff"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name",
+        "support.constant"
+      ],
+      "settings": {
+        "foreground": "#4d8eff"
+      }
+    },
+    {
+      "scope": [
+        "variable",
+        "identifier"
+      ],
+      "settings": {
+        "foreground": "#cacacb"
+      }
+    },
+    {
+      "scope": [
+        "punctuation",
+        "meta.brace"
+      ],
+      "settings": {
+        "foreground": "#959698"
+      }
+    },
+    {
+      "scope": [
+        "invalid",
+        "invalid.illegal"
+      ],
+      "settings": {
+        "foreground": "#cf2d56"
+      }
+    }
+  ],
+  "displayName": "Cyclone Dark",
+  "type": "dark",
+  "fg": "#f1f1f1",
+  "bg": "#151518",
+  "colors": {
+    "editor.background": "#151518",
+    "editor.foreground": "#f1f1f1",
+    "editorCursor.foreground": "#4d8eff",
+    "editor.selectionBackground": "#f1f1f1",
+    "editor.selectionForeground": "#151518",
+    "editor.inactiveSelectionBackground": "#0c0c0d",
+    "editorLineNumber.foreground": "#959698",
+    "editorLineNumber.activeForeground": "#cacacb",
+    "editorIndentGuide.background1": "#46464a",
+    "editorIndentGuide.activeBackground1": "#959698",
+    "editorWhitespace.foreground": "#959698"
+  }
+}

package/dist/src/dark-dimmed/INSTALL.md

@@ -0,0 +1,45 @@
+# Installing Cyclone UI (Dark Dimmed)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Light (theme id: `cyclone-dark-dimmed`)
+
+## Setup
+
+1. Copy or import the generated JSON into your app (paths depend on your bundler).
+
+2. Register themes when creating a Shiki highlighter:
+
+```ts
+import { createHighlighter } from "shiki";
+import theme from "./theme.json";
+
+const highlighter = await createHighlighter({
+  themes: [theme],
+  langs: ["javascript"]
+});
+
+const html = highlighter.codeToHtml("const x = 1", {
+  lang: "javascript",
+  theme: "cyclone-dark-dimmed"
+});
+```
+
+Or load at runtime:
+
+```ts
+import { readFile } from "node:fs/promises";
+
+const theme = JSON.parse(
+  await readFile("./theme.json", "utf8")
+);
+await highlighter.loadTheme(theme);
+```
+
+## Select / load theme
+
+Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
+
+- `cyclone-dark-dimmed` — Cyclone Light

package/dist/src/dark-dimmed/theme.json

@@ -0,0 +1,125 @@
+{
+  "name": "cyclone-dark-dimmed",
+  "settings": [
+    {
+      "scope": [
+        "comment",
+        "punctuation.definition.comment"
+      ],
+      "settings": {
+        "foreground": "#8f8f90",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "constant.other.symbol"
+      ],
+      "settings": {
+        "foreground": "#60a88a"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "constant.numeric",
+        "constant.language"
+      ],
+      "settings": {
+        "foreground": "#c59b4d"
+      }
+    },
+    {
+      "scope": [
+        "keyword",
+        "storage",
+        "storage.type"
+      ],
+      "settings": {
+        "foreground": "#638cd2"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function",
+        "support.function"
+      ],
+      "settings": {
+        "foreground": "#638cd2"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#8e7dbb"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.tag",
+        "meta.tag"
+      ],
+      "settings": {
+        "foreground": "#638cd2"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name",
+        "support.constant"
+      ],
+      "settings": {
+        "foreground": "#638cd2"
+      }
+    },
+    {
+      "scope": [
+        "variable",
+        "identifier"
+      ],
+      "settings": {
+        "foreground": "#b4b4b4"
+      }
+    },
+    {
+      "scope": [
+        "punctuation",
+        "meta.brace"
+      ],
+      "settings": {
+        "foreground": "#8f8f90"
+      }
+    },
+    {
+      "scope": [
+        "invalid",
+        "invalid.illegal"
+      ],
+      "settings": {
+        "foreground": "#ab5268"
+      }
+    }
+  ],
+  "displayName": "Cyclone Light",
+  "type": "darkDimmed",
+  "fg": "#cfcfcf",
+  "bg": "#343438",
+  "colors": {
+    "editor.background": "#343438",
+    "editor.foreground": "#cfcfcf",
+    "editorCursor.foreground": "#638cd2",
+    "editor.selectionBackground": "#cfcfcf",
+    "editor.selectionForeground": "#343438",
+    "editor.inactiveSelectionBackground": "#2e2e30",
+    "editorLineNumber.foreground": "#8f8f90",
+    "editorLineNumber.activeForeground": "#b4b4b4",
+    "editorIndentGuide.background1": "#57575a",
+    "editorIndentGuide.activeBackground1": "#8f8f90",
+    "editorWhitespace.foreground": "#8f8f90"
+  }
+}

package/dist/src/dark-high-contrast/INSTALL.md

@@ -0,0 +1,45 @@
+# Installing Cyclone UI (Dark High Contrast)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Light (theme id: `cyclone-dark-high-contrast`)
+
+## Setup
+
+1. Copy or import the generated JSON into your app (paths depend on your bundler).
+
+2. Register themes when creating a Shiki highlighter:
+
+```ts
+import { createHighlighter } from "shiki";
+import theme from "./theme.json";
+
+const highlighter = await createHighlighter({
+  themes: [theme],
+  langs: ["javascript"]
+});
+
+const html = highlighter.codeToHtml("const x = 1", {
+  lang: "javascript",
+  theme: "cyclone-dark-high-contrast"
+});
+```
+
+Or load at runtime:
+
+```ts
+import { readFile } from "node:fs/promises";
+
+const theme = JSON.parse(
+  await readFile("./theme.json", "utf8")
+);
+await highlighter.loadTheme(theme);
+```
+
+## Select / load theme
+
+Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
+
+- `cyclone-dark-high-contrast` — Cyclone Light