From 0c3e4a0723d24372f22ae1702ac0a28b1ba789d1 Mon Sep 17 00:00:00 2001 From: Anthony Rey Date: Fri, 24 Jul 2026 14:39:23 +0200 Subject: [PATCH] feat(styles): add Prism Ippon theme for the documentation Co-Authored-By: Claude Fable 5 --- CHANGELOG.md | 10 +++ styles/.stylelintrc.json | 2 +- styles/README.md | 8 ++ styles/package.json | 2 +- styles/src/documentation/layout.pug | 2 +- styles/src/documentation/style.scss | 2 +- styles/src/prism-ippon.scss | 112 ++++++++++++++++++++++++++++ 7 files changed, 134 insertions(+), 4 deletions(-) create mode 100644 styles/src/prism-ippon.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 43c9fdd..9ea7837 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/styles/.stylelintrc.json b/styles/.stylelintrc.json index dba18ce..9899379 100644 --- a/styles/.stylelintrc.json +++ b/styles/.stylelintrc.json @@ -9,7 +9,7 @@ "selector-no-qualifying-type": [ true, { - "ignore": ["class"] + "ignore": ["class", "attribute"] } ], "order/order": [ diff --git a/styles/README.md b/styles/README.md index f66920b..26e4b5a 100644 --- a/styles/README.md +++ b/styles/README.md @@ -30,6 +30,14 @@ Then use the CSS classes in your markup. Classes follow an alternative-prefix co Done ``` +### 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 diff --git a/styles/package.json b/styles/package.json index 25f9606..110855f 100644 --- a/styles/package.json +++ b/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", diff --git a/styles/src/documentation/layout.pug b/styles/src/documentation/layout.pug index 05c9917..18fcfc4 100644 --- a/styles/src/documentation/layout.pug +++ b/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 diff --git a/styles/src/documentation/style.scss b/styles/src/documentation/style.scss index eb74697..fd5b0f6 100644 --- a/styles/src/documentation/style.scss +++ b/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); diff --git a/styles/src/prism-ippon.scss b/styles/src/prism-ippon.scss new file mode 100644 index 0000000..1744f68 --- /dev/null +++ b/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; + } +}