@oneonefour/rkui 0.0.0-stage → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Robert King
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,68 @@
-# Temporary Holding Version
+# rkui
+![RKUI logo](logo/rkui-logo.png)
+Rob King's "toon" component library. It covers flat token colours, 2px ink outlines, hard shadows that
+follow a light direction, a hover-lift/press-sink "pop", light/dark themes, page palettes, shadow
+modes and a depth mode. It is built to plug into Astro, Vue and plain HTML sites.
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Published on npm as `@oneonefour/rkui`.
+
+## What's where
+
+| Folder | What it is | Ships to sites? |
+|---|---|---|
+| `src/` | The library itself, one folder per component under `components/` (its Vue component, its CSS, and the `*-element.ts` that registers its custom element if it has behaviour), with `tokens/`, `base/` (fonts, type, base styles), `shared/` (helpers more than one component uses), `head-scripts/` (scripts to paste inline into `<head>`), `fonts/` and `icons/` (the icon set and sources) | yes |
+| `astro/` | The Astro integration, `@oneonefour/rkui/astro`: fenced code in MDX as CodeBlock, and dollar maths as Maths and Equation. It sits outside `src/`, which never imports Astro | yes |
+| `site/` | The docs and demo site: every component, with the theme, palette and shadow switches. An Astro app that imports the library as `@oneonefour/rkui/...`, as any site would | no |
+| `build/` | Node scripts that build `dist/`: the bundled CSS and JS, the type declarations and the icons | no |
+| `dist/` | The build output (not committed): `rkui.css`, `rkui.js`, `colors.js` (the colour tokens' light and dark hex values, for places CSS can't reach, such as a canvas), `fonts/`, `icons/`, `types/` | yes |
+| `docs/` | The design language (`DESIGN.md`) and the decision record (`DECISIONS.md`) | no |
+| `pptx/` | The PowerPoint template generator | no |
+
+## Commands
+
+```sh
+npm install
+npm run build       # builds dist/, then type-checks and builds the docs site into site/dist/
+npm run dev         # builds dist/, then runs the docs site live on port 4321
+```
+
+## Using the Vue components in Astro
+
+Some peers are optional, so npm doesn't install them for you: `shiki` (`^4.0.0`) for CodeBlock's
+highlighting, `katex` (`^0.19.0`) for Equation and Maths, and `astro` with `@astrojs/mdx` for the
+Astro integration. The integration renders fenced code in MDX as CodeBlock and `$…$`/`$$…$$` as
+Maths and Equation; add it with `import rkui from '@oneonefour/rkui/astro'` and
+`integrations: [mdx(), vue(), rkui()]` in the site's Astro config.
+
+Add `@astrojs/vue` to the site, with an app entrypoint that sets
+`app.config.throwUnhandledErrorInProduction = true` (as `site/src/vue-app.js` does). Without it, a
+component that throws while the site builds, such as a Folder with no Tab, is left out of the page
+and the build still passes.
+
+Add this line to the site's `src/env.d.ts`, so `astro check` accepts the form and link attributes
+(`name`, `disabled`, `href`) that rkui components hand on to their native elements:
+
+```ts
+/// <reference types="@oneonefour/rkui/astro-attributes" />
+```
+
+Some components have a small helper script, a `*-enhance.js` file beside the component or the
+CSS it serves: a browser fallback (the "more" dots and the sidebar in Safari and Firefox), or a
+small extra the component works without (Pagination's scrollbar, the Table's entrance).
+`src/enhance.js` imports every one, and a site loads them all with one line in its layout:
+
+```astro
+<script>
+  import '@oneonefour/rkui/enhance.js'
+</script>
+```
+
+`dist/rkui.js` includes them for plain HTML pages.
+
+## Start here
+
+- `docs/DESIGN.md`: the design language: how it looks and behaves, and why.
+- `docs/DECISIONS.md`: when each design call was made, and the questions still open.
+- `docs/ELEMENTS.md`: how a custom element is written here, step by step.
+- `pptx/`: the PowerPoint template generator in the same style.
+- `CLAUDE.md`: the rules every agent follows here.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,60 @@
+# Third-party notices
+
+rkui includes the following third-party work. Each vendored set keeps its own licence file next
+to the files it covers.
+
+| Work | Used for | Licence | Source |
+|---|---|---|---|
+| Phosphor Icons (duotone) | UI icons | MIT | https://github.com/phosphor-icons/core |
+| Tabler Icons | Icons Phosphor lacks (e.g. satellite) | MIT | https://github.com/tabler/tabler-icons |
+| Xmind | Body and UI typeface | SIL Open Font License 1.1 | https://github.com/xmindltd/nevermind |
+| Roboto Slab | Heading typeface | Apache License 2.0 | https://github.com/google/fonts/tree/main/apache/robotoslab |
+| JetBrains Mono | Monospace typeface | SIL Open Font License 1.1 | https://github.com/google/fonts/tree/main/ofl/jetbrainsmono |
+| KaTeX and its maths fonts | Equation and Maths render TeX with it at build time. An optional peer dependency, not included: a site that uses them installs it | MIT | https://github.com/KaTeX/KaTeX |
+
+## Docs site only
+
+The docs site labels the language of its code specimens with logos from the `simple-icons`
+package (a development dependency, drawn by `site/src/components/LanguageLogo.vue`), and marks the
+helper scripts that only matter in Safari with Safari's (`site/src/components/HelperBadge.astro`).
+They are not part of the library: CodeBlock takes its logo from the site that uses it.
+
+| Work | Licence | Source |
+|---|---|---|
+| Simple Icons paths (C++, Fortran, Python, Safari) | CC0 1.0 | https://github.com/simple-icons/simple-icons |
+| Simple Icons JavaScript path (the JS logo, by Christopher Williams) | MIT (below) | https://github.com/voodootikigod/logo.js |
+| Simple Icons Markdown path (Markdown Mark, by Dustin Curtis) | CC0 1.0 | https://github.com/dcurtis/markdown-mark |
+
+Simple Icons' CC0 dedication covers the SVG data, not the trademarks, which belong to their
+owners. The logos are drawn unchanged in shape, flat in the caption's grey or the badge's text
+colour, never in their brand colours: the PSF asks for permission before its logo's colours are
+changed, and other brands' guidelines mostly allow only a black, white or grey version. Logos
+under NonCommercial or ShareAlike terms (Julia, Vue, Rust, R) aren't used.
+
+### The JS logo's licence
+
+Simple Icons takes its JavaScript path from logo.js, under this licence:
+
+```text
+The MIT License (MIT)
+
+Copyright (c) 2011 Christopher Williams <chris@iterativedesigns.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+```

package/astro/index.d.ts

@@ -0,0 +1,14 @@
+import type { AstroIntegration } from 'astro'
+
+export interface RkuiOptions {
+  /**
+   * Fenced code in MDX as CodeBlock: true, false, or the attributes every fence's CodeBlock gets,
+   * such as `{ copy: 'hover', editor: true }`; true when left out.
+   */
+  code?: boolean | Record<string, string | boolean>
+  /** `$…$` in MDX as Maths and `$$…$$` as Equation; true when left out. */
+  maths?: boolean
+}
+
+/** rkui's Astro integration: fenced code and dollar maths in MDX as rkui's components. */
+export default function rkui(options?: RkuiOptions): AstroIntegration

package/astro/index.js

@@ -0,0 +1,153 @@
+/**
+ * rkui's Astro integration: in MDX files, a fenced code block renders as `CodeBlock`, `$…$` as
+ * `Maths` and `$$…$$` as `Equation`, with no tags to write.
+ *
+ *   // astro.config.mjs
+ *   import mdx from '@astrojs/mdx'
+ *   import vue from '@astrojs/vue'
+ *   import rkui from '@oneonefour/rkui/astro'
+ *   export default defineConfig({ integrations: [mdx(), vue(), rkui()] })
+ *
+ * It adds a plugin to Sätteri, Astro's Markdown processor, on `markdown.processor`, which MDX
+ * inherits: options given to `mdx({ processor })` instead are out of its reach, and it warns when
+ * MDX compiles without it. `.md` files are left as they were, dollars included.
+ */
+
+import { pathToFileURL } from 'node:url'
+
+const CODE_BLOCK = '@oneonefour/rkui/components/code/CodeBlock.vue'
+const MATHS = '@oneonefour/rkui/components/maths/Maths.vue'
+const EQUATION = '@oneonefour/rkui/components/maths/Equation.vue'
+
+/** A JSX attribute: a string, or `true` for one written bare (`editor`). */
+function attribute(name, value) {
+  return { type: 'mdxJsxAttribute', name, value: value === true ? null : value }
+}
+
+/** CodeBlock's attributes for a fence: its language, its meta as the label, then the defaults. */
+function codeAttributes(node, defaults) {
+  const attributes = [attribute('lang', node.lang ?? 'plaintext')]
+  if (node.meta) attributes.push(attribute('label', node.meta.trim()))
+  for (const [name, value] of Object.entries(defaults)) {
+    if (value !== false) attributes.push(attribute(name, value))
+  }
+  // The copy button needs JavaScript.
+  if (defaults.copy !== 'never') attributes.push(attribute('client:visible', true))
+  return attributes
+}
+
+/**
+ * The MDX plugin, made afresh for each file. Each fence and dollar run becomes a component, under
+ * a name of the plugin's own so it can't clash with the file's imports, and the imports for the
+ * ones used are added at the top.
+ */
+function mdxPlugin({ code, maths }) {
+  const used = new Map()
+  /** A component's local name, noting that the file uses it. */
+  function use(name, path) {
+    used.set(name, path)
+    return name
+  }
+  return {
+    name: 'rkui-mdx',
+    ...(code && {
+      code: (node) => ({
+        type: 'mdxJsxFlowElement',
+        name: use('RkuiCodeBlock', CODE_BLOCK),
+        attributes: codeAttributes(node, code === true ? {} : code),
+        // A string expression, so the code keeps its white space exactly.
+        children: [{ type: 'mdxFlowExpression', value: JSON.stringify(node.value) }],
+      }),
+    }),
+    ...(maths && {
+      inlineMath: (node) => ({
+        type: 'mdxJsxTextElement',
+        name: use('RkuiMaths', MATHS),
+        attributes: [attribute('tex', node.value)],
+        children: [],
+      }),
+      math: (node) => ({
+        type: 'mdxJsxFlowElement',
+        name: use('RkuiEquation', EQUATION),
+        attributes: [attribute('tex', node.value)],
+        children: [],
+      }),
+    }),
+    after(root, ctx) {
+      const imports = [...used].map(([name, path]) => `import ${name} from '${path}'`)
+      if (imports.length) ctx.prependChild(root, { type: 'mdxjsEsm', value: imports.join('\n') })
+    },
+  }
+}
+
+/**
+ * A Vite plugin that warns, once, when an `.mdx` file compiles without rkui's plugin: when
+ * `mdx({ extendMarkdownConfig: false })` or `mdx({ processor })` gives MDX a processor of its own.
+ * MDX keeps its options to itself, so this shows only as the files compile. `seen` holds the
+ * files rkui's plugin ran on.
+ */
+function mdxCheck(seen, logger) {
+  let warned = false
+  return {
+    name: 'rkui-mdx-check',
+    transform: {
+      filter: { id: /\.mdx$/ },
+      handler(code, id) {
+        if (warned || seen.has(pathToFileURL(id).href)) return
+        warned = true
+        logger.warn(
+          `${id} compiled without rkui's plugin, so fenced code and $…$ maths in MDX stay as ` +
+            "Markdown has them. MDX isn't using markdown.processor: remove extendMarkdownConfig " +
+            'and processor from mdx(), and give their plugins to markdown.processor instead.',
+        )
+      },
+    },
+  }
+}
+
+/** For a `.md` file, which the integration leaves alone: maths written in dollars stays text. */
+const markdownDollars = {
+  name: 'rkui-markdown-dollars',
+  options: { position: true },
+  inlineMath: (node, ctx) => ({ type: 'text', value: source(node, ctx) }),
+  math: (node, ctx) => ({
+    type: 'paragraph',
+    children: [{ type: 'text', value: source(node, ctx) }],
+  }),
+}
+
+/** The text a node was written as. */
+function source(node, ctx) {
+  return ctx.source.slice(node.position.start.offset, node.position.end.offset)
+}
+
+/**
+ * The integration. `code` is true, false, or the attributes every fence's CodeBlock gets, such as
+ * `{ copy: 'hover', editor: true }`; `maths` is true or false. Both are true when left out.
+ */
+export default function rkui({ code = true, maths = true } = {}) {
+  return {
+    name: '@oneonefour/rkui',
+    hooks: {
+      'astro:config:setup': ({ config, logger, updateConfig }) => {
+        const { processor } = config.markdown
+        if (processor.name !== 'satteri') {
+          throw new Error(
+            `rkui(): markdown.processor is ${processor.name}; the integration needs Sätteri`,
+          )
+        }
+        const { options } = processor
+        // Unless the site already parses maths in its .md files.
+        const keepDollars = maths && !options.features.math
+        if (maths) options.features.math = true
+        const seen = new Set()
+        options.mdastPlugins.push(({ sourceFormat, fileURL }) => {
+          if (sourceFormat !== 'mdx') return keepDollars && markdownDollars
+          if (fileURL) seen.add(fileURL.href)
+          return mdxPlugin({ code, maths })
+        })
+        updateConfig({ vite: { plugins: [mdxCheck(seen, logger)] } })
+      },
+    },
+  }
+}

package/dist/colors.d.ts

@@ -0,0 +1,74 @@
+// Generated by build/colors.js from src/tokens/.
+/** A colour token's hex value in light mode and in dark mode. */
+export interface ColorPair {
+  light: string
+  dark: string
+}
+/** Every colour token that is a plain hex, by name: `--rkui-navy-deep` is `colors.navyDeep`. */
+export declare const colors: {
+  surface: ColorPair
+  raised: ColorPair
+  panel: ColorPair
+  panelTab: ColorPair
+  lineUnfilled: ColorPair
+  fg: ColorPair
+  muted: ColorPair
+  line: ColorPair
+  focus: ColorPair
+  focusAlt: ColorPair
+  shadowLit: ColorPair
+  ink: ColorPair
+  navy: ColorPair
+  teal: ColorPair
+  coral: ColorPair
+  coralSolid: ColorPair
+  yellow: ColorPair
+  green: ColorPair
+  sky: ColorPair
+  grape: ColorPair
+  lilac: ColorPair
+  tangerine: ColorPair
+  apricot: ColorPair
+  glint: ColorPair
+  onFill: ColorPair
+  onInk: ColorPair
+  onNavy: ColorPair
+  onCoral: ColorPair
+  onGrape: ColorPair
+  navyDeep: ColorPair
+  tealDeep: ColorPair
+  coralDeep: ColorPair
+  yellowDeep: ColorPair
+  greenDeep: ColorPair
+  skyDeep: ColorPair
+  grapeDeep: ColorPair
+  tangerineDeep: ColorPair
+  lilacDeep: ColorPair
+  apricotDeep: ColorPair
+  navyTint: ColorPair
+  tealTint: ColorPair
+  coralTint: ColorPair
+  yellowTint: ColorPair
+  greenTint: ColorPair
+  skyTint: ColorPair
+  grapeTint: ColorPair
+  lilacTint: ColorPair
+  tangerineTint: ColorPair
+  apricotTint: ColorPair
+  noteYellow: ColorPair
+  noteSky: ColorPair
+  noteTangerine: ColorPair
+  noteGreen: ColorPair
+  noteCoral: ColorPair
+  noteGrape: ColorPair
+  noteLilac: ColorPair
+  noteApricot: ColorPair
+  selected: ColorPair
+  onSelected: ColorPair
+  selectedTint: ColorPair
+  codeKeyword: ColorPair
+  codeFunction: ColorPair
+  codeString: ColorPair
+  codeNumber: ColorPair
+  codeComment: ColorPair
+}

package/dist/colors.js

@@ -0,0 +1,263 @@
+// Generated by build/colors.js from src/tokens/. Don't edit.
+export const colors = {
+  "surface": {
+    "light": "#f7f3e5",
+    "dark": "#1a1f2b"
+  },
+  "raised": {
+    "light": "#fffaf0",
+    "dark": "#232a39"
+  },
+  "panel": {
+    "light": "#f0ead7",
+    "dark": "#272e3e"
+  },
+  "panelTab": {
+    "light": "#e6dfc8",
+    "dark": "#2d3548"
+  },
+  "lineUnfilled": {
+    "light": "#1d232f",
+    "dark": "#f2eee2"
+  },
+  "fg": {
+    "light": "#1d232f",
+    "dark": "#f2eee2"
+  },
+  "muted": {
+    "light": "#5b6070",
+    "dark": "#a3a8b6"
+  },
+  "line": {
+    "light": "#1d232f",
+    "dark": "#05070b"
+  },
+  "focus": {
+    "light": "#f58a2a",
+    "dark": "#f5923a"
+  },
+  "focusAlt": {
+    "light": "#f4bc38",
+    "dark": "#f4bc38"
+  },
+  "shadowLit": {
+    "light": "#1d232f",
+    "dark": "#6e7891"
+  },
+  "ink": {
+    "light": "#1d232f",
+    "dark": "#1d232f"
+  },
+  "navy": {
+    "light": "#2c4d6e",
+    "dark": "#4a78ad"
+  },
+  "teal": {
+    "light": "#2ea6b1",
+    "dark": "#3bb4bf"
+  },
+  "coral": {
+    "light": "#de4d45",
+    "dark": "#e8625a"
+  },
+  "coralSolid": {
+    "light": "#c8322a",
+    "dark": "#e8625a"
+  },
+  "yellow": {
+    "light": "#f4bc38",
+    "dark": "#f4bc38"
+  },
+  "green": {
+    "light": "#7bba3d",
+    "dark": "#86c44a"
+  },
+  "sky": {
+    "light": "#8fd3f7",
+    "dark": "#8fd3f7"
+  },
+  "grape": {
+    "light": "#7b4fc9",
+    "dark": "#a584e6"
+  },
+  "lilac": {
+    "light": "#d4c4f5",
+    "dark": "#d4c4f5"
+  },
+  "tangerine": {
+    "light": "#f58a2a",
+    "dark": "#f5923a"
+  },
+  "apricot": {
+    "light": "#ffd2a6",
+    "dark": "#ffd2a6"
+  },
+  "glint": {
+    "light": "#f7f3e5",
+    "dark": "#f2eee2"
+  },
+  "onFill": {
+    "light": "#1d232f",
+    "dark": "#1d232f"
+  },
+  "onInk": {
+    "light": "#f7f3e5",
+    "dark": "#f2eee2"
+  },
+  "onNavy": {
+    "light": "#ffffff",
+    "dark": "#ffffff"
+  },
+  "onCoral": {
+    "light": "#ffffff",
+    "dark": "#1d232f"
+  },
+  "onGrape": {
+    "light": "#ffffff",
+    "dark": "#1d232f"
+  },
+  "navyDeep": {
+    "light": "#2c4d6e",
+    "dark": "#8fb3e0"
+  },
+  "tealDeep": {
+    "light": "#176f78",
+    "dark": "#6fcfd7"
+  },
+  "coralDeep": {
+    "light": "#c8322a",
+    "dark": "#f08a83"
+  },
+  "yellowDeep": {
+    "light": "#856000",
+    "dark": "#f7d27a"
+  },
+  "greenDeep": {
+    "light": "#3a7016",
+    "dark": "#a3d977"
+  },
+  "skyDeep": {
+    "light": "#216b9a",
+    "dark": "#8fd3f7"
+  },
+  "grapeDeep": {
+    "light": "#7b4fc9",
+    "dark": "#b89cf0"
+  },
+  "tangerineDeep": {
+    "light": "#a14c0a",
+    "dark": "#f8a65c"
+  },
+  "lilacDeep": {
+    "light": "#685796",
+    "dark": "#d4c4f5"
+  },
+  "apricotDeep": {
+    "light": "#7f512d",
+    "dark": "#ffd2a6"
+  },
+  "navyTint": {
+    "light": "#c7d5e6",
+    "dark": "#25364f"
+  },
+  "tealTint": {
+    "light": "#a6dfe3",
+    "dark": "#173f44"
+  },
+  "coralTint": {
+    "light": "#f6c1bb",
+    "dark": "#4d2623"
+  },
+  "yellowTint": {
+    "light": "#fbdf94",
+    "dark": "#4a3e18"
+  },
+  "greenTint": {
+    "light": "#c8e5a8",
+    "dark": "#2a4220"
+  },
+  "skyTint": {
+    "light": "#8fd3f7",
+    "dark": "#1e3a50"
+  },
+  "grapeTint": {
+    "light": "#c8b2ff",
+    "dark": "#4a306b"
+  },
+  "lilacTint": {
+    "light": "#d4c4f5",
+    "dark": "#342c55"
+  },
+  "tangerineTint": {
+    "light": "#feb98f",
+    "dark": "#603714"
+  },
+  "apricotTint": {
+    "light": "#ffd2a6",
+    "dark": "#4a3324"
+  },
+  "noteYellow": {
+    "light": "#fbdf94",
+    "dark": "#f4bc38"
+  },
+  "noteSky": {
+    "light": "#8fd3f7",
+    "dark": "#8fd3f7"
+  },
+  "noteTangerine": {
+    "light": "#feb98f",
+    "dark": "#f5923a"
+  },
+  "noteGreen": {
+    "light": "#c8e5a8",
+    "dark": "#86c44a"
+  },
+  "noteCoral": {
+    "light": "#f6c1bb",
+    "dark": "#e8625a"
+  },
+  "noteGrape": {
+    "light": "#c8b2ff",
+    "dark": "#a584e6"
+  },
+  "noteLilac": {
+    "light": "#d4c4f5",
+    "dark": "#d4c4f5"
+  },
+  "noteApricot": {
+    "light": "#ffd2a6",
+    "dark": "#ffd2a6"
+  },
+  "selected": {
+    "light": "#f4bc38",
+    "dark": "#f4bc38"
+  },
+  "onSelected": {
+    "light": "#1d232f",
+    "dark": "#1d232f"
+  },
+  "selectedTint": {
+    "light": "#fbdf94",
+    "dark": "#4a3e18"
+  },
+  "codeKeyword": {
+    "light": "#2c4d6e",
+    "dark": "#8fb3e0"
+  },
+  "codeFunction": {
+    "light": "#176f78",
+    "dark": "#6fcfd7"
+  },
+  "codeString": {
+    "light": "#3a7016",
+    "dark": "#a3d977"
+  },
+  "codeNumber": {
+    "light": "#a14c0a",
+    "dark": "#f8a65c"
+  },
+  "codeComment": {
+    "light": "#5b6070",
+    "dark": "#a3a8b6"
+  }
+}