@cyclone-ui/shiki 0.0.16 → 0.0.17

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Changelog for Cyclone UI - Shiki
 
+## [0.0.17](https://github.com/storm-software/cyclone-ui/releases/tag/shiki%400.0.17) (10/23/2026)
+
+### Documentation
+
+- **monorepo:** Added `sourcebook` skills and partially generated docs for design system ([0dbff145](https://github.com/storm-software/cyclone-ui/commit/0dbff145))
+
 ## [0.0.15](https://github.com/storm-software/cyclone-ui/releases/tag/shiki%400.0.15) (10/22/2026)
 
 ### Bug Fixes

package/README.md

@@ -49,7 +49,9 @@ A package containing various [shiki](https://github.com/shikijs/shiki) themes fo
 
 - [Shiki Themes](#shiki-themes)
   - [Table of Contents](#table-of-contents)
+  - [Quick Features](#quick-features)
   - [Installing](#installing)
+  - [Usage](#usage)
   - [Reduced Package Size](#reduced-package-size)
   - [Development](#development)
     - [Building](#building)
@@ -67,6 +69,13 @@ A package containing various [shiki](https://github.com/shikijs/shiki) themes fo
 
 <!-- END doctoc -->
 
+## Quick Features
+
+- Six Shiki themes: light, light dimmed, light high contrast, dark, dark
+  dimmed, and dark high contrast
+- Theme colors generated from the Cyclone UI design tokens
+- Plain JSON files with no runtime code
+
 ## Installing
 
 Using [pnpm](http://pnpm.io):
@@ -93,18 +102,45 @@ yarn add -D @cyclone-ui/shiki
 
 </details>
 
+## Usage
+
+Register a theme when you create a highlighter, then pass the theme id:
+
+```ts
+import { createHighlighter } from "shiki";
+import theme from "@cyclone-ui/shiki/dark/theme.json" with { type: "json" };
+
+const highlighter = await createHighlighter({
+  themes: [theme],
+  langs: ["javascript"]
+});
+
+const html = highlighter.codeToHtml("const x = 1", {
+  lang: "javascript",
+  theme: "cyclone-dark"
+});
+```
+
+The theme ids are `cyclone-light`, `cyclone-light-dimmed`,
+`cyclone-light-high-contrast`, `cyclone-dark`, `cyclone-dark-dimmed`, and
+`cyclone-dark-high-contrast`. See the
+[package documentation](../../docs/packages/shiki.md) for details.
+
 ## Reduced Package Size
 
-This project uses [tsup](https://tsup.egoist.dev/) to package the source code
-due to its ability to remove unused code and ship smaller javascript files
-thanks to code splitting. This helps to greatly reduce the size of the package
-and to make it easier to use in other projects.
+This project has no bundling step. The build copies the `src` folder, which
+holds the generated theme JSON files, to `dist`.
 
 ## Development
 
 This project is built using [Nx](https://nx.dev). As a result, many of the usual
 commands are available to assist in development.
 
+To set up a checkout, clone the repository and run `pnpm install` in the
+repository root. Razorwind generates the theme files. Do not edit them by hand.
+Change the token JSON files in `packages/tokens/src/tokens`, then run
+`pnpm nx run monorepo:generate-themes`.
+
 ### Building
 
 Run `nx build shiki` to build the library.

package/dist/src/dark/INSTALL.md

@@ -0,0 +1,43 @@
+# 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,93 @@
+{
+  "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": "#b0b0b1"
+      }
+    },
+    {
+      "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": "#1f1f21",
+    "editorLineNumber.foreground": "#959698",
+    "editorLineNumber.activeForeground": "#b0b0b1",
+    "editorIndentGuide.background1": "#46464a",
+    "editorIndentGuide.activeBackground1": "#959698",
+    "editorWhitespace.foreground": "#959698"
+  }
+}

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

@@ -0,0 +1,43 @@
+# 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,93 @@
+{
+  "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": "#a1a1a2"
+      }
+    },
+    {
+      "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": "#3c3c3e",
+    "editorLineNumber.foreground": "#8f8f90",
+    "editorLineNumber.activeForeground": "#a1a1a2",
+    "editorIndentGuide.background1": "#57575a",
+    "editorIndentGuide.activeBackground1": "#8f8f90",
+    "editorWhitespace.foreground": "#8f8f90"
+  }
+}

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

@@ -0,0 +1,43 @@
+# 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

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

@@ -0,0 +1,93 @@
+{
+  "name": "cyclone-dark-high-contrast",
+  "settings": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#9a9fa7",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "constant.other.symbol"],
+      "settings": {
+        "foreground": "#2de498"
+      }
+    },
+    {
+      "scope": ["constant", "constant.numeric", "constant.language"],
+      "settings": {
+        "foreground": "#ffb327"
+      }
+    },
+    {
+      "scope": ["keyword", "storage", "storage.type"],
+      "settings": {
+        "foreground": "#70a4ff"
+      }
+    },
+    {
+      "scope": ["entity.name.function", "support.function"],
+      "settings": {
+        "foreground": "#70a4ff"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#a283f3"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#70a4ff"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name", "support.constant"],
+      "settings": {
+        "foreground": "#70a4ff"
+      }
+    },
+    {
+      "scope": ["variable", "identifier"],
+      "settings": {
+        "foreground": "#c3c3ca"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.brace"],
+      "settings": {
+        "foreground": "#9a9fa7"
+      }
+    },
+    {
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": {
+        "foreground": "#f00a45"
+      }
+    }
+  ],
+  "displayName": "Cyclone Light",
+  "type": "darkHighContrast",
+  "fg": "#ffffff",
+  "bg": "#000000",
+  "colors": {
+    "editor.background": "#000000",
+    "editor.foreground": "#ffffff",
+    "editorCursor.foreground": "#70a4ff",
+    "editor.selectionBackground": "#ffffff",
+    "editor.selectionForeground": "#000000",
+    "editor.inactiveSelectionBackground": "#000000",
+    "editorLineNumber.foreground": "#9a9fa7",
+    "editorLineNumber.activeForeground": "#c3c3ca",
+    "editorIndentGuide.background1": "#2b2b33",
+    "editorIndentGuide.activeBackground1": "#9a9fa7",
+    "editorWhitespace.foreground": "#9a9fa7"
+  }
+}

package/dist/src/light/INSTALL.md

@@ -0,0 +1,43 @@
+# Installing Cyclone UI (Light)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Light (theme id: `cyclone-light`)
+
+## 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-light"
+})
+```
+
+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-light` — Cyclone Light

package/dist/src/light/theme.json

@@ -0,0 +1,93 @@
+{
+  "name": "cyclone-light",
+  "settings": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#959698",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "constant.other.symbol"],
+      "settings": {
+        "foreground": "#216b53"
+      }
+    },
+    {
+      "scope": ["constant", "constant.numeric", "constant.language"],
+      "settings": {
+        "foreground": "#765417"
+      }
+    },
+    {
+      "scope": ["keyword", "storage", "storage.type"],
+      "settings": {
+        "foreground": "#2055b3"
+      }
+    },
+    {
+      "scope": ["entity.name.function", "support.function"],
+      "settings": {
+        "foreground": "#2055b3"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#594395"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#2055b3"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name", "support.constant"],
+      "settings": {
+        "foreground": "#2055b3"
+      }
+    },
+    {
+      "scope": ["variable", "identifier"],
+      "settings": {
+        "foreground": "#555659"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.brace"],
+      "settings": {
+        "foreground": "#959698"
+      }
+    },
+    {
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": {
+        "foreground": "#8e223e"
+      }
+    }
+  ],
+  "displayName": "Cyclone Light",
+  "type": "light",
+  "fg": "#242528",
+  "bg": "#eaeaea",
+  "colors": {
+    "editor.background": "#eaeaea",
+    "editor.foreground": "#242528",
+    "editorCursor.foreground": "#2055b3",
+    "editor.selectionBackground": "#242528",
+    "editor.selectionForeground": "#eaeaea",
+    "editor.inactiveSelectionBackground": "#f1f1f1",
+    "editorLineNumber.foreground": "#959698",
+    "editorLineNumber.activeForeground": "#555659",
+    "editorIndentGuide.background1": "#c0c0c1",
+    "editorIndentGuide.activeBackground1": "#959698",
+    "editorWhitespace.foreground": "#959698"
+  }
+}

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

@@ -0,0 +1,43 @@
+# Installing Cyclone UI (Light Dimmed)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Light (theme id: `cyclone-light-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-light-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-light-dimmed` — Cyclone Light

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

@@ -0,0 +1,93 @@
+{
+  "name": "cyclone-light-dimmed",
+  "settings": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#8f8f90",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "constant.other.symbol"],
+      "settings": {
+        "foreground": "#3e7160"
+      }
+    },
+    {
+      "scope": ["constant", "constant.numeric", "constant.language"],
+      "settings": {
+        "foreground": "#786137"
+      }
+    },
+    {
+      "scope": ["keyword", "storage", "storage.type"],
+      "settings": {
+        "foreground": "#45649b"
+      }
+    },
+    {
+      "scope": ["entity.name.function", "support.function"],
+      "settings": {
+        "foreground": "#45649b"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#675a8a"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#45649b"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name", "support.constant"],
+      "settings": {
+        "foreground": "#45649b"
+      }
+    },
+    {
+      "scope": ["variable", "identifier"],
+      "settings": {
+        "foreground": "#626364"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.brace"],
+      "settings": {
+        "foreground": "#8f8f90"
+      }
+    },
+    {
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": {
+        "foreground": "#864254"
+      }
+    }
+  ],
+  "displayName": "Cyclone Light",
+  "type": "lightDimmed",
+  "fg": "#3f4043",
+  "bg": "#cacaca",
+  "colors": {
+    "editor.background": "#cacaca",
+    "editor.foreground": "#3f4043",
+    "editorCursor.foreground": "#45649b",
+    "editor.selectionBackground": "#3f4043",
+    "editor.selectionForeground": "#cacaca",
+    "editor.inactiveSelectionBackground": "#cfcfcf",
+    "editorLineNumber.foreground": "#8f8f90",
+    "editorLineNumber.activeForeground": "#626364",
+    "editorIndentGuide.background1": "#adadad",
+    "editorIndentGuide.activeBackground1": "#8f8f90",
+    "editorWhitespace.foreground": "#8f8f90"
+  }
+}

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

@@ -0,0 +1,43 @@
+# Installing Cyclone UI (Light High Contrast)
+
+Generated by `@razorwind/shiki`.
+
+## Files
+
+- `theme.json` — Cyclone Light (theme id: `cyclone-light-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-light-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-light-high-contrast` — Cyclone Light

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

@@ -0,0 +1,93 @@
+{
+  "name": "cyclone-light-high-contrast",
+  "settings": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#9a9fa7",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "constant.other.symbol"],
+      "settings": {
+        "foreground": "#0a4e38"
+      }
+    },
+    {
+      "scope": ["constant", "constant.numeric", "constant.language"],
+      "settings": {
+        "foreground": "#583902"
+      }
+    },
+    {
+      "scope": ["keyword", "storage", "storage.type"],
+      "settings": {
+        "foreground": "#0145be"
+      }
+    },
+    {
+      "scope": ["entity.name.function", "support.function"],
+      "settings": {
+        "foreground": "#0145be"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "support.type"
+      ],
+      "settings": {
+        "foreground": "#492b9b"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#0145be"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name", "support.constant"],
+      "settings": {
+        "foreground": "#0145be"
+      }
+    },
+    {
+      "scope": ["variable", "identifier"],
+      "settings": {
+        "foreground": "#3f424a"
+      }
+    },
+    {
+      "scope": ["punctuation", "meta.brace"],
+      "settings": {
+        "foreground": "#9a9fa7"
+      }
+    },
+    {
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": {
+        "foreground": "#840929"
+      }
+    }
+  ],
+  "displayName": "Cyclone Light",
+  "type": "lightHighContrast",
+  "fg": "#000000",
+  "bg": "#ffffff",
+  "colors": {
+    "editor.background": "#ffffff",
+    "editor.foreground": "#000000",
+    "editorCursor.foreground": "#0145be",
+    "editor.selectionBackground": "#000000",
+    "editor.selectionForeground": "#ffffff",
+    "editor.inactiveSelectionBackground": "#ffffff",
+    "editorLineNumber.foreground": "#9a9fa7",
+    "editorLineNumber.activeForeground": "#3f424a",
+    "editorIndentGuide.background1": "#dcdce0",
+    "editorIndentGuide.activeBackground1": "#9a9fa7",
+    "editorWhitespace.foreground": "#9a9fa7"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyclone-ui/shiki",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "description": "Cyclone UI Shiki themes package",
   "repository": {
@@ -14,5 +14,5 @@
     "./package.json": "./package.json"
   },
   "publishConfig": { "access": "public" },
-  "gitHead": "8472064a72086b8d8845f97ab49ced0efbb0cf43"
+  "gitHead": "21d5be9e8232a27e8735270d0109d301f7942a54"
 }