feat(styles): add Prism Ippon theme for the documentation

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to the Ippon UI packages are documented in this file, so con
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), with one entry per release listing the affected package versions.
 
+## 2026-07-24 — @ippon-ui/styles 0.0.11
+
+### Added
+
+- `prism-ippon.css` stylesheet: a light [Prism](https://prismjs.com) theme on white background built on the Ippon UI color tokens, importable with `@ippon-ui/styles/prism-ippon.css`.
+
+### Changed
+
+- The Pattern Library documentation code snippets use the new `prism-ippon.css` light theme instead of the dark `okaidia` theme.
+
 ## 2026-07-08 — @ippon-ui/styles 0.0.10 · @ippon-ui/react 0.0.9
 
 ### Added

styles/.stylelintrc.json

@@ -9,7 +9,7 @@
     "selector-no-qualifying-type": [
       true,
       {
-        "ignore": ["class"]
+        "ignore": ["class", "attribute"]
       }
     ],
     "order/order": [

styles/README.md

@@ -30,6 +30,14 @@ Then use the CSS classes in your markup. Classes follow an alternative-prefix co
 <span class="ippon-badge -success">Done</span>
 ```
 
+### Prism theme
+
+If you highlight code with [Prism](https://prismjs.com), a light theme based on the Ippon UI tokens is available:
+
+```ts
+import '@ippon-ui/styles/prism-ippon.css';
+```
+
 ## License
 
 [Apache-2.0](./LICENCE) © Ippon Technologies

styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ippon-ui/styles",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Ippon UI Pattern Library",
   "repository": {
     "type": "git",

styles/src/documentation/layout.pug

@@ -12,8 +12,8 @@ html(lang='en')
     link(href='[[TIKUI_BASEPATH]]fonts/saira-extra-condensed/700.css', rel='stylesheet')
     link(href='[[TIKUI_BASEPATH]]icons/ionicons.css', rel='stylesheet')
     link(rel='stylesheet', href='[[TIKUI_BASEPATH]]tikui.css')
+    link(rel='stylesheet', href='[[TIKUI_BASEPATH]]prism-ippon.css')
     link(rel='stylesheet', href='[[TIKUI_BASEPATH]]documentation/style.css')
-    link(rel='stylesheet', href='[[TIKUI_BASEPATH]]lib/prismjs/prism-okaidia.css')
   body
     .ippon-layout
       block body

styles/src/documentation/style.scss

@@ -72,7 +72,7 @@ body {
   resize: both;
 }
 
-.ipp-doc-snippet {
+pre.ipp-doc-snippet {
   box-sizing: border-box;
   margin: 0;
   border-radius: var(--ippon-radius-l);

styles/src/prism-ippon.scss

@@ -0,0 +1,112 @@
+code[class*='language-'],
+pre[class*='language-'] {
+  tab-size: 4;
+  text-align: left;
+  line-height: 1.5;
+  word-spacing: normal;
+  white-space: pre;
+  word-break: normal;
+  hyphens: none;
+  color: var(--ippon-color-neutral-text-icon-primary);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+}
+
+code[class*='language-']::selection,
+code[class*='language-'] ::selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+  background: var(--ippon-color-neutral-200);
+}
+
+pre[class*='language-'] {
+  margin: var(--ippon-size-8) 0;
+  border: 1px solid var(--ippon-color-neutral-border);
+  border-radius: var(--ippon-radius-m);
+  background: var(--ippon-color-neutral-surface-primary);
+  padding: var(--ippon-size-16);
+  overflow: auto;
+}
+
+:not(pre) > code[class*='language-'] {
+  border-radius: var(--ippon-radius-m);
+  background: var(--ippon-color-neutral-surface-secondary);
+  padding: 0 var(--ippon-size-4);
+  white-space: normal;
+}
+
+.token {
+  &.comment,
+  &.prolog,
+  &.cdata {
+    color: var(--ippon-color-neutral-text-icon-tertiary);
+    font-style: italic;
+  }
+
+  &.punctuation,
+  &.operator {
+    color: var(--ippon-color-neutral-600);
+  }
+
+  &.namespace {
+    opacity: 0.7;
+  }
+
+  &.keyword,
+  &.tag,
+  &.doctype,
+  &.atrule {
+    color: var(--ippon-color-brand-text-icon-primary);
+  }
+
+  &.string,
+  &.char,
+  &.attr-value,
+  &.builtin,
+  &.inserted {
+    color: var(--ippon-color-positive-700);
+  }
+
+  &.attr-name,
+  &.property,
+  &.variable,
+  &.url {
+    color: var(--ippon-color-information-2-700);
+  }
+
+  &.function,
+  &.class-name,
+  &.selector,
+  &.attr-id,
+  &.attr-class,
+  &.filter-name {
+    color: var(--ippon-color-information-700);
+  }
+
+  &.number,
+  &.boolean,
+  &.constant,
+  &.symbol,
+  &.regex,
+  &.deleted {
+    color: var(--ippon-color-negative-700);
+  }
+
+  &.important {
+    color: var(--ippon-color-negative-700);
+    font-weight: bold;
+  }
+
+  &.bold {
+    font-weight: bold;
+  }
+
+  &.italic {
+    font-style: italic;
+  }
+
+  &.entity {
+    color: var(--ippon-color-neutral-600);
+    cursor: help;
+  }
+}