From a124f55a5b857d9f14508a0ae4234b67487691c2 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 12:01:32 +0000 Subject: [PATCH 01/27] Match font-weight with docs --- .storybook/storybook.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 8b6eae3dae..6130f4ba27 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -15,6 +15,7 @@ .sbdocs h5:not(.sbdocs-preview *, .sbdocs-preview h5), .sbdocs h6:not(.sbdocs-preview *, .sbdocs-preview h6) { font-family: p22-mackinac-pro, serif; + font-weight: 500; } .sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1) { @@ -23,7 +24,6 @@ .sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2) { font-size: 1.75rem; - font-weight: 600; } .sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3) { @@ -34,7 +34,6 @@ .sbdocs li:not(.sbdocs-preview *, .sbdocs-preview li) { font-size: 1rem; line-height: 1.6; - font-weight: 350; } .prismjs { From af437164fa4531be45a158f37b63f3e18af29a92 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 12:05:51 +0000 Subject: [PATCH 02/27] Tidy CSS --- .storybook/storybook.css | 54 +++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 6130f4ba27..4b4ef2a457 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -8,32 +8,34 @@ @import '../resources/css/components/stacks.css'; @custom-variant dark (&:where(.dark, .dark *)); -.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1), -.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2), -.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3), -.sbdocs h4:not(.sbdocs-preview *, .sbdocs-preview h4), -.sbdocs h5:not(.sbdocs-preview *, .sbdocs-preview h5), -.sbdocs h6:not(.sbdocs-preview *, .sbdocs-preview h6) { - font-family: p22-mackinac-pro, serif; - font-weight: 500; -} - -.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1) { - font-size: 2.5rem; -} - -.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2) { - font-size: 1.75rem; -} - -.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3) { - font-size: 1.25rem; -} - -.sbdocs p:not(.sbdocs-preview *, .sbdocs-preview p), -.sbdocs li:not(.sbdocs-preview *, .sbdocs-preview li) { - font-size: 1rem; - line-height: 1.6; +.sbdocs { + h1:not(.sbdocs-preview *, .sbdocs-preview h1), + h2:not(.sbdocs-preview *, .sbdocs-preview h2), + h3:not(.sbdocs-preview *, .sbdocs-preview h3), + h4:not(.sbdocs-preview *, .sbdocs-preview h4), + h5:not(.sbdocs-preview *, .sbdocs-preview h5), + h6:not(.sbdocs-preview *, .sbdocs-preview h6) { + font-family: p22-mackinac-pro, serif; + font-weight: 500; + } + + h1:not(.sbdocs-preview *, .sbdocs-preview h1) { + font-size: 2.5rem; + } + + h2:not(.sbdocs-preview *, .sbdocs-preview h2) { + font-size: 1.75rem; + } + + h3:not(.sbdocs-preview *, .sbdocs-preview h3) { + font-size: 1.25rem; + } + + p:not(.sbdocs-preview *, .sbdocs-preview p), + li:not(.sbdocs-preview *, .sbdocs-preview li) { + font-size: 1rem; + line-height: 1.6; + } } .prismjs { From 75dd459cbb84d7c732fe31524b317a5a159cec39 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 12:08:59 +0000 Subject: [PATCH 03/27] Tidy CSS headings --- .storybook/storybook.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 4b4ef2a457..922622ef00 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -8,31 +8,31 @@ @import '../resources/css/components/stacks.css'; @custom-variant dark (&:where(.dark, .dark *)); -.sbdocs { - h1:not(.sbdocs-preview *, .sbdocs-preview h1), - h2:not(.sbdocs-preview *, .sbdocs-preview h2), - h3:not(.sbdocs-preview *, .sbdocs-preview h3), - h4:not(.sbdocs-preview *, .sbdocs-preview h4), - h5:not(.sbdocs-preview *, .sbdocs-preview h5), - h6:not(.sbdocs-preview *, .sbdocs-preview h6) { +.sbdocs:not(.sbdocs-preview *) { + h1, + h2, + h3, + h4, + h5, + h6 { font-family: p22-mackinac-pro, serif; font-weight: 500; } - h1:not(.sbdocs-preview *, .sbdocs-preview h1) { + h1 { font-size: 2.5rem; } - h2:not(.sbdocs-preview *, .sbdocs-preview h2) { + h2 { font-size: 1.75rem; } - h3:not(.sbdocs-preview *, .sbdocs-preview h3) { + h3 { font-size: 1.25rem; } - p:not(.sbdocs-preview *, .sbdocs-preview p), - li:not(.sbdocs-preview *, .sbdocs-preview li) { + p, + li { font-size: 1rem; line-height: 1.6; } From b19deff793f897cca3f1a0c4e5262449d91173d2 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 12:13:06 +0000 Subject: [PATCH 04/27] Use @scope. It's supported everywhere now and the fallback looks fine --- .storybook/storybook.css | 56 +++++++++++++++++++++------------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 922622ef00..9c4a43995e 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -8,33 +8,35 @@ @import '../resources/css/components/stacks.css'; @custom-variant dark (&:where(.dark, .dark *)); -.sbdocs:not(.sbdocs-preview *) { - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: p22-mackinac-pro, serif; - font-weight: 500; - } - - h1 { - font-size: 2.5rem; - } - - h2 { - font-size: 1.75rem; - } - - h3 { - font-size: 1.25rem; - } - - p, - li { - font-size: 1rem; - line-height: 1.6; +@scope (html) to (.sbdocs-preview) { + .sbdocs { + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: p22-mackinac-pro, serif; + font-weight: 500; + } + + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 1.75rem; + } + + h3 { + font-size: 1.25rem; + } + + p, + li { + font-size: 1rem; + line-height: 1.6; + } } } From 2564577a958e25b75505cfe3577529632744f2ae Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 12:14:55 +0000 Subject: [PATCH 05/27] Tidy CSS --- .storybook/storybook.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 9c4a43995e..566f77c6a1 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -48,10 +48,11 @@ padding: 2rem 4rem; } -.dark, -.dark body, -.dark .sbdocs-preview { - background: var(--theme-color-content-bg); +.dark { + & body, + & .sbdocs-preview { + background: var(--theme-color-content-bg); + } } .docs-story div[scale="1"] { From d31f0a83fbdfed34a8da4ee307ed793e6c00ca5e Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 14:07:19 +0000 Subject: [PATCH 06/27] Bring the style closer to the Docs --- .storybook/storybook.css | 70 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 5 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 566f77c6a1..6388185bc1 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -8,6 +8,30 @@ @import '../resources/css/components/stacks.css'; @custom-variant dark (&:where(.dark, .dark *)); +:root { + /* GROUP VARIABLES -- DECORATION -- COLOURS + =================================================== */ + --color-code-background: hsl(287deg 80% 93.5%); + --color-pink-light-1: hsl(287deg 80% 80%); + + /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- Based on AUGMENTED FOURTH + =================================================== */ + --font-size-xl: clamp(1.35em, 6vw, 1.5em); + --font-size-xl-line-height: 1.3; + + --font-size-2xl: clamp(1.8em * 0.85, 6vw, 1.8em); + --font-size-2xl-line-height: 1.2; + + --font-size-3xl: clamp(2.25em * 0.9, 6vw, 2.25em); + --font-size-3xl-line-height: 1.15; + + --font-size-4xl: clamp(2.827em * 0.9, 9vw, 2.827em); + --font-size-4xl-line-height: 1.15; + + --font-size-5xl: clamp(3.45em * 0.67, 11vw, 3.45em); + --font-size-5xl-line-height: 1.05; +} + @scope (html) to (.sbdocs-preview) { .sbdocs { h1, @@ -18,30 +42,47 @@ h6 { font-family: p22-mackinac-pro, serif; font-weight: 500; + border-bottom: 0; } h1 { - font-size: 2.5rem; + font-size: var(--font-size-4xl); + line-height: var(--font-size-4xl-line-height); } h2 { - font-size: 1.75rem; + font-size: var(--font-size-3xl); + line-height: var(--font-size-3xl-line-height); + margin-block-end: 0; + padding-block-end: 0; } h3 { - font-size: 1.25rem; + font-size: 1.25em; } p, li { - font-size: 1rem; + font-size: 1.05em; line-height: 1.6; + code { + background: var(--color-code-background); + color: black; + border: none; + font-weight: 400; + font-size: 0.9em; + } + } + + p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p) { + font-weight: 300; } } } .prismjs { - font-size: 1rem; + font-size: 0.9rem; + line-height: 1.5; } .sbdocs.sbdocs-wrapper { @@ -58,3 +99,22 @@ .docs-story div[scale="1"] { transform: none !important; } + +.sbdocs { + .sbdocs-preview { + border-radius: 17px; + } + + .docblock-code-toggle { + &, :has(> &) { + border-top-left-radius: 7px; + } + .dark & { + background: hsl(0deg 0% 15%)!important; + color: white; + } + &:focus { + box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; + } + } +} From 6736a708fd05550728987c2f6f8e076754e13411 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 14:17:30 +0000 Subject: [PATCH 07/27] Make the logo nice --- .storybook/manager.ts | 2 +- .storybook/public/logo.svg | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 .storybook/public/logo.svg diff --git a/.storybook/manager.ts b/.storybook/manager.ts index abcaaec516..908eb504aa 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -6,7 +6,7 @@ const theme = create({ base: 'light', brandTitle: 'Statamic UI Components', brandUrl: 'https://statamic.dev', - brandImage: '/logo.png', + brandImage: '/logo.svg', fontBase: '"Lexend", sans-serif', fontCode: '"Source Code Pro", monospace' }); diff --git a/.storybook/public/logo.svg b/.storybook/public/logo.svg new file mode 100644 index 0000000000..f0e9fd9e44 --- /dev/null +++ b/.storybook/public/logo.svg @@ -0,0 +1 @@ + From 97b2fe1cc0976982105abe067eecdd5f9ea0a974 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 14:35:50 +0000 Subject: [PATCH 08/27] Tidy CSS --- .storybook/storybook.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 6388185bc1..b429c0ae06 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -85,10 +85,6 @@ line-height: 1.5; } -.sbdocs.sbdocs-wrapper { - padding: 2rem 4rem; -} - .dark { & body, & .sbdocs-preview { @@ -101,6 +97,10 @@ } .sbdocs { + &.sbdocs-wrapper { + padding: 4rem; + } + .sbdocs-preview { border-radius: 17px; } @@ -117,4 +117,4 @@ box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; } } -} +} \ No newline at end of file From debc8d9d1bfe47906be9f483e43389c992dcb133 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 15:30:14 +0000 Subject: [PATCH 09/27] Start styling the sidebar --- .storybook/manager-head.html | 19 +++++++++++++++++++ .storybook/manager.ts | 7 ++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 4c8add49e4..097d79aaa3 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -6,3 +6,22 @@ + + diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 908eb504aa..ef0a65fb8b 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -8,7 +8,12 @@ const theme = create({ brandUrl: 'https://statamic.dev', brandImage: '/logo.svg', fontBase: '"Lexend", sans-serif', - fontCode: '"Source Code Pro", monospace' + fontCode: '"Source Code Pro", monospace', + + appBorderColor: 'hsl(287deg 80% 90%)', + + // Theme selector. This is overlaid on top. + barSelectedColor: '#ff0000', }); addons.setConfig({ From 0b1209bfbd5347b6b2d3e1e21734a9a22ef699c4 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 15:34:14 +0000 Subject: [PATCH 10/27] Move the sidebar styling to a stylesheet instead, it's much easier to debug --- .storybook/manager-head.html | 19 +------------------ .storybook/public/manager-head.css | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 18 deletions(-) create mode 100644 .storybook/public/manager-head.css diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 097d79aaa3..1c288748df 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -7,21 +7,4 @@ - + diff --git a/.storybook/public/manager-head.css b/.storybook/public/manager-head.css new file mode 100644 index 0000000000..6cb2e81e27 --- /dev/null +++ b/.storybook/public/manager-head.css @@ -0,0 +1,16 @@ +:root { + --color-purple-light-1: hsl(256deg 60% 85%); +} +#components-badge--docs { + &, + :has(> &) { + background: var(--color-purple-light-1); + } +} + +[data-selected="true"], +[data-selected="true"] *, +[data-selected="true"] *:hover { + background: var(--color-purple-light-1)!important; + box-shadow: none!important; +} From ba4e4eed9687dc523afa0c37378ef6a032a7d8d3 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 16:04:17 +0000 Subject: [PATCH 11/27] Style sidebar --- .storybook/manager.ts | 3 --- .storybook/public/manager-head.css | 25 ++++++++++++++++++------- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index ef0a65fb8b..48217ed811 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -11,9 +11,6 @@ const theme = create({ fontCode: '"Source Code Pro", monospace', appBorderColor: 'hsl(287deg 80% 90%)', - - // Theme selector. This is overlaid on top. - barSelectedColor: '#ff0000', }); addons.setConfig({ diff --git a/.storybook/public/manager-head.css b/.storybook/public/manager-head.css index 6cb2e81e27..73c545e1da 100644 --- a/.storybook/public/manager-head.css +++ b/.storybook/public/manager-head.css @@ -1,16 +1,27 @@ :root { --color-purple-light-1: hsl(256deg 60% 85%); + --color-purple: hsl(256deg 70% 55%); } -#components-badge--docs { +/* #components-badge--docs { &, :has(> &) { background: var(--color-purple-light-1); + &, & svg { + color: black; + } } -} +} */ -[data-selected="true"], -[data-selected="true"] *, -[data-selected="true"] *:hover { - background: var(--color-purple-light-1)!important; - box-shadow: none!important; +.sidebar-container { + .sidebar-item { + --tree-node-background-hover: hsl(256deg 60% 90%)!important; + } + [data-selected="true"], + [data-selected="true"] *, + [data-selected="true"] *:hover { + background: var(--color-purple-light-1)!important; + background: var(--color-purple)!important; + box-shadow: none!important; + outline: none; + } } From 9f218ee0b661c4f533d568cf3f8e929b91b806ac Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 20 Jan 2026 20:46:48 +0000 Subject: [PATCH 12/27] More styling --- .storybook/public/manager-head.css | 7 ++++ .storybook/storybook.css | 62 ++++++++++++++++++++++-------- 2 files changed, 52 insertions(+), 17 deletions(-) diff --git a/.storybook/public/manager-head.css b/.storybook/public/manager-head.css index 73c545e1da..9f2edc4e34 100644 --- a/.storybook/public/manager-head.css +++ b/.storybook/public/manager-head.css @@ -24,4 +24,11 @@ box-shadow: none!important; outline: none; } + [data-selected="true"] { + border-radius: 10px; + @supports (corner-shape: squircle) { + border-radius: 50px; + corner-shape: squircle; + } + } } diff --git a/.storybook/storybook.css b/.storybook/storybook.css index b429c0ae06..86f41c7828 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -31,7 +31,8 @@ --font-size-5xl: clamp(3.45em * 0.67, 11vw, 3.45em); --font-size-5xl-line-height: 1.05; } - +/* GROUP GLOBAL STYLES +=================================================== */ @scope (html) to (.sbdocs-preview) { .sbdocs { h1, @@ -55,6 +56,11 @@ line-height: var(--font-size-3xl-line-height); margin-block-end: 0; padding-block-end: 0; + + &:first-of-type { + /* e.g. >> /?path=/story/components-badge--default */ + margin-block-start: 1em; + } } h3 { @@ -80,11 +86,46 @@ } } -.prismjs { - font-size: 0.9rem; - line-height: 1.5; + +/* GROUP CODE BLOCKS +=================================================== */ +.sbdocs { + .prismjs { + font-size: 0.9rem; + line-height: 1.5; + } + + .docblock-code-toggle { + &, :has(> &) { + border-top-left-radius: 7px; + } + .dark & { + background: hsl(0deg 0% 15%)!important; + color: white; + } + &:focus { + box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; + } + } + + /* Leaving this here in case we want to override the style later */ + /* .prismjs { + border: 1px dotted var(--color-pink-light-1)!important; + border-radius: 10px; + } + pre * { + box-shadow: none!important; + } + .docblock-source { + &, & *:not(.prismjs) { + border: none!important; + } + } */ } + +/* GROUP DARK MODE +=================================================== */ .dark { & body, & .sbdocs-preview { @@ -104,17 +145,4 @@ .sbdocs-preview { border-radius: 17px; } - - .docblock-code-toggle { - &, :has(> &) { - border-top-left-radius: 7px; - } - .dark & { - background: hsl(0deg 0% 15%)!important; - color: white; - } - &:focus { - box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; - } - } } \ No newline at end of file From 7a1005c4d93387bf731b740846c5c14ce1b4a538 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 09:36:14 +0000 Subject: [PATCH 13/27] At least have _some_ syntax highlighting, since prism does not seem too natively support blade or vue --- resources/js/stories/Overview.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/js/stories/Overview.mdx b/resources/js/stories/Overview.mdx index 19865f869b..428757bd5c 100644 --- a/resources/js/stories/Overview.mdx +++ b/resources/js/stories/Overview.mdx @@ -15,7 +15,7 @@ For example, if you need a card, don't use `
@@ -28,7 +28,7 @@ This syntax works in Blade _and_ Vue, which is especially handy for those times You can optionally import the UI components and namespace them, which gives your IDE the ability to autocomplete, link to the original components, and other useful dev-centric workflows. You import them from `@statamic/cms/ui`. -```vue +```js From cfd02ab98ca5e36a423f8610206aae9e418773dc Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 10:11:25 +0000 Subject: [PATCH 14/27] Update Prism theme --- .storybook/storybook.css | 73 ++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 74 insertions(+) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 86f41c7828..c9ab86f87f 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -90,9 +90,82 @@ /* GROUP CODE BLOCKS =================================================== */ .sbdocs { + /* Olaolu Palenight theme */ + pre[class*="language-"], + code[class*="language-"], .prismjs { font-size: 0.9rem; line-height: 1.5; + background: #292D3E !important; /* Palenight dark bluish-gray background */ + color: #A6ACCD !important; /* Soft off-white foreground */ + border-radius: 8px; + padding: 1em; + overflow: auto; + } + + /* Syntax highlighting colors - Olaolu Palenight theme */ + .prismjs .token.comment, + .prismjs .token.prolog, + .prismjs .token.doctype, + .prismjs .token.cdata { + color: #676E95 !important; /* Muted purple-gray for comments */ + font-style: italic; + } + + .prismjs .token.punctuation { + color: #ABB2BF !important; + } + + .prismjs .token.property, + .prismjs .token.tag, + .prismjs .token.constant, + .prismjs .token.symbol, + .prismjs .token.deleted { + color: #C792EA !important; /* Pale yellow-green / lilac */ + } + + .prismjs .token.boolean, + .prismjs .token.number { + color: #F78C6C !important; /* Light turquoise / coral for numbers */ + } + + .prismjs .token.selector, + .prismjs .token.attr-name, + .prismjs .token.string, + .prismjs .token.char, + .prismjs .token.builtin, + .prismjs .token.inserted { + color: #C3E88D !important; /* Warm gold / amber for strings */ + } + + .prismjs .token.operator, + .prismjs .token.entity, + .prismjs .token.url, + .prismjs .language-css .token.string, + .prismjs .style .token.string { + color: #89DDFF !important; /* Bright blue for operators */ + } + + .prismjs .token.atrule, + .prismjs .token.attr-value, + .prismjs .token.keyword { + color: #C792EA !important; /* Pale yellow-green / lilac for keywords */ + } + + .prismjs .token.function, + .prismjs .token.class-name { + color: #82AAFF !important; /* Soft blue for functions */ + } + + .prismjs .token.regex, + .prismjs .token.important, + .prismjs .token.variable { + color: #EEDDAE !important; /* Light purple-pink for variables */ + } + + .prismjs .token.type, + .prismjs .token.type-name { + color: #FFCB6B !important; /* Light peach / coral for types */ } .docblock-code-toggle { diff --git a/package.json b/package.json index 827b2f6ea3..b0b14dbc26 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "@storybook/addon-a11y": "^10.1.11", "@storybook/addon-docs": "^10.1.11", "@storybook/vue3-vite": "^10.1.11", + "prism-react-renderer": "^2.3.1", "@tailwindcss/vite": "^4.1.8", "@vitejs/plugin-vue": "^6.0.0", "@vitest/browser-playwright": "^4.0.12", From e8baaec505021cf1cd97750068b95fffe0de128e Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 10:14:49 +0000 Subject: [PATCH 15/27] Update Prism theme - improve syntax highlighting --- .storybook/storybook.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index c9ab86f87f..fe2ab8b7ee 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -112,12 +112,26 @@ font-style: italic; } + /* General punctuation */ .prismjs .token.punctuation { - color: #ABB2BF !important; + color: #89DDFF !important; /* Bright blue for operators/punctuation */ + } + + /* HTML/JSX tag names - Palenight uses reddish-pink */ + .prismjs .token.tag { + color: #F07178 !important; /* Reddish-pink for tag names */ + } + + /* HTML/JSX tag punctuation (< > /) - should be visible and match theme */ + .prismjs .token.tag .token.punctuation, + .prismjs .token.tag + .token.punctuation, + .prismjs .language-markup .token.punctuation, + .prismjs .language-html .token.punctuation, + .prismjs .language-jsx .token.punctuation { + color: #89DDFF !important; /* Bright blue for < and > brackets */ } .prismjs .token.property, - .prismjs .token.tag, .prismjs .token.constant, .prismjs .token.symbol, .prismjs .token.deleted { From 9320ac015e7a4e85407082a52a01b6cc56536d87 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 10:35:54 +0000 Subject: [PATCH 16/27] remove recently added prism-react-renderer dependency, we don't need it --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index b0b14dbc26..827b2f6ea3 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,6 @@ "@storybook/addon-a11y": "^10.1.11", "@storybook/addon-docs": "^10.1.11", "@storybook/vue3-vite": "^10.1.11", - "prism-react-renderer": "^2.3.1", "@tailwindcss/vite": "^4.1.8", "@vitejs/plugin-vue": "^6.0.0", "@vitest/browser-playwright": "^4.0.12", From 43dd6be7520cc6ef72fa99c948b940ae40d5d8c4 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 11:09:02 +0000 Subject: [PATCH 17/27] Update Prism theme - improve syntax highlighting --- .storybook/storybook.css | 162 ++++++++++++++++++++++++++++++--------- 1 file changed, 125 insertions(+), 37 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index fe2ab8b7ee..333b204904 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -103,83 +103,171 @@ overflow: auto; } - /* Syntax highlighting colors - Olaolu Palenight theme */ + /* Comprehensive Olaolu Palenight theme - based on official Material Palenight */ + + /* Comments and documentation */ .prismjs .token.comment, + .prismjs .token.block-comment, .prismjs .token.prolog, .prismjs .token.doctype, .prismjs .token.cdata { - color: #676E95 !important; /* Muted purple-gray for comments */ + color: #676e95 !important; font-style: italic; } - /* General punctuation */ + /* Punctuation and operators */ .prismjs .token.punctuation { - color: #89DDFF !important; /* Bright blue for operators/punctuation */ + color: #89ddff !important; } - /* HTML/JSX tag names - Palenight uses reddish-pink */ + .prismjs .token.operator { + color: #89ddff !important; + } + + .prismjs .token.entity { + color: #89ddff !important; + cursor: help; + } + + /* HTML/JSX tags */ .prismjs .token.tag { - color: #F07178 !important; /* Reddish-pink for tag names */ + color: #f07178 !important; } - /* HTML/JSX tag punctuation (< > /) - should be visible and match theme */ .prismjs .token.tag .token.punctuation, .prismjs .token.tag + .token.punctuation, .prismjs .language-markup .token.punctuation, .prismjs .language-html .token.punctuation, - .prismjs .language-jsx .token.punctuation { - color: #89DDFF !important; /* Bright blue for < and > brackets */ + .prismjs .language-jsx .token.tag .token.punctuation { + color: #89ddff !important; + } + + /* Attribute names and namespaces */ + .prismjs .token.attr-name, + .prismjs .token.namespace { + color: #bb80b3 !important; } + /* Attribute values */ + .prismjs .token.attr-value { + color: #c3e88d !important; + } + + /* Functions and method names */ + .prismjs .token.function, + .prismjs .token.function-name { + color: #82aaff !important; + } + + /* Numbers, booleans, units, URLs */ + .prismjs .token.number, + .prismjs .token.boolean, + .prismjs .token.unit, + .prismjs .token.url { + color: #f78c6c !important; + } + + /* Colors and hex codes */ + .prismjs .token.color, + .prismjs .token.hexcode { + color: #ffcb6b !important; + } + + /* Properties, constants, symbols, built-ins */ .prismjs .token.property, .prismjs .token.constant, .prismjs .token.symbol, - .prismjs .token.deleted { - color: #C792EA !important; /* Pale yellow-green / lilac */ + .prismjs .token.builtin { + color: #ffcb6b !important; } - .prismjs .token.boolean, - .prismjs .token.number { - color: #F78C6C !important; /* Light turquoise / coral for numbers */ + /* Classes and class names */ + .prismjs .token.class, + .prismjs .token.class-name { + color: #ffcb6b !important; + } + + /* Keywords, selectors, IDs, atrules */ + .prismjs .token.keyword { + color: #c792ea !important; } .prismjs .token.selector, - .prismjs .token.attr-name, - .prismjs .token.string, - .prismjs .token.char, - .prismjs .token.builtin, - .prismjs .token.inserted { - color: #C3E88D !important; /* Warm gold / amber for strings */ + .prismjs .token.id, + .prismjs .token.atrule { + color: #c792ea !important; } - .prismjs .token.operator, - .prismjs .token.entity, - .prismjs .token.url, - .prismjs .language-css .token.string, - .prismjs .style .token.string { - color: #89DDFF !important; /* Bright blue for operators */ + .prismjs .token.important { + color: #c792ea !important; + font-weight: bold; } - .prismjs .token.atrule, - .prismjs .token.attr-value, - .prismjs .token.keyword { - color: #C792EA !important; /* Pale yellow-green / lilac for keywords */ + /* Strings, characters, attributes, variables */ + .prismjs .token.string, + .prismjs .token.char { + color: #c3e88d !important; } - .prismjs .token.function, - .prismjs .token.class-name { - color: #82AAFF !important; /* Soft blue for functions */ + .prismjs .token.attribute, + .prismjs .token.attr-value { + color: #c3e88d !important; } - .prismjs .token.regex, - .prismjs .token.important, .prismjs .token.variable { - color: #EEDDAE !important; /* Light purple-pink for variables */ + color: #c3e88d !important; + } + + /* Pseudo-classes and pseudo-elements */ + .prismjs .token.pseudo-class, + .prismjs .token.pseudo-element { + color: #c3e88d !important; + } + + /* Inserted content */ + .prismjs .token.inserted { + color: #c3e88d !important; + } + + /* Regular expressions */ + .prismjs .token.regex { + color: #c3e88d !important; + } + + /* Parameters */ + .prismjs .token.parameter { + color: #ff5370 !important; } + /* Deleted content */ + .prismjs .token.deleted { + color: #ff5370 !important; + } + + /* Types and type names */ .prismjs .token.type, .prismjs .token.type-name { - color: #FFCB6B !important; /* Light peach / coral for types */ + color: #ffcb6b !important; + } + + /* Bold and italic tokens */ + .prismjs .token.bold { + font-weight: bold !important; + } + + .prismjs .token.italic { + font-style: italic !important; + } + + /* JavaScript/TypeScript specific */ + .prismjs .token.script.language-javascript { + color: #a6accd !important; + } + + /* Language-specific overrides */ + .prismjs .language-css .token.string, + .prismjs .style .token.string { + color: #89ddff !important; } .docblock-code-toggle { From 37073e24b94954d55c05aaf76e1f915d5125195a Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 11:10:14 +0000 Subject: [PATCH 18/27] Update Prism theme - fix some `<` highlighting --- .storybook/storybook.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 333b204904..ab6c495a5f 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -134,12 +134,16 @@ color: #f07178 !important; } + /* HTML/JSX tag punctuation (< > /) - should match tag color */ .prismjs .token.tag .token.punctuation, .prismjs .token.tag + .token.punctuation, .prismjs .language-markup .token.punctuation, .prismjs .language-html .token.punctuation, - .prismjs .language-jsx .token.tag .token.punctuation { - color: #89ddff !important; + .prismjs .language-jsx .token.tag .token.punctuation, + .prismjs .language-jsx .token.punctuation:has(+ .token.tag), + .prismjs pre[class*="language-jsx"] .token.punctuation:first-child, + .prismjs pre[class*="language-html"] .token.punctuation:first-child { + color: #f07178 !important; /* Match tag color for < and > */ } /* Attribute names and namespaces */ From a3123c4f84daf439f0c17f54132366061ab8ab06 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 11:15:59 +0000 Subject: [PATCH 19/27] Update Prism theme - tweak colors --- .storybook/storybook.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index ab6c495a5f..72fec9a034 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -129,9 +129,9 @@ cursor: help; } - /* HTML/JSX tags */ + /* HTML/JSX tags - orange color for tag names */ .prismjs .token.tag { - color: #f07178 !important; + color: #e5c07b !important; /* Orange/yellow for tag names like ui-card */ } /* HTML/JSX tag punctuation (< > /) - should match tag color */ @@ -143,13 +143,13 @@ .prismjs .language-jsx .token.punctuation:has(+ .token.tag), .prismjs pre[class*="language-jsx"] .token.punctuation:first-child, .prismjs pre[class*="language-html"] .token.punctuation:first-child { - color: #f07178 !important; /* Match tag color for < and > */ + color: #89DDFF !important; /* Match tag color for < and > */ } /* Attribute names and namespaces */ .prismjs .token.attr-name, .prismjs .token.namespace { - color: #bb80b3 !important; + color: #c792ea !important; } /* Attribute values */ From 3d15e503decb34651d384f357e58089f2dd4a7b3 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 11:16:50 +0000 Subject: [PATCH 20/27] Update Prism theme - tweak colors --- .storybook/storybook.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 72fec9a034..51fd603856 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -131,7 +131,7 @@ /* HTML/JSX tags - orange color for tag names */ .prismjs .token.tag { - color: #e5c07b !important; /* Orange/yellow for tag names like ui-card */ + color: #ffcb8b !important; /* Orange/yellow for tag names like ui-card */ } /* HTML/JSX tag punctuation (< > /) - should match tag color */ From 1877404974e915e12d5b9c7b5a84fc55644214e6 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 11:35:50 +0000 Subject: [PATCH 21/27] Update Prism theme - improve JS highlighting --- .storybook/storybook.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 51fd603856..46df84b8d0 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -103,8 +103,6 @@ overflow: auto; } - /* Comprehensive Olaolu Palenight theme - based on official Material Palenight */ - /* Comments and documentation */ .prismjs .token.comment, .prismjs .token.block-comment, @@ -129,8 +127,8 @@ cursor: help; } - /* HTML/JSX tags - orange color for tag names */ - .prismjs .token.tag { + /* HTML/JSX tags - orange color for tokens */ + .prismjs .token { color: #ffcb8b !important; /* Orange/yellow for tag names like ui-card */ } From 47d23b3a87e8d2dc4b0a3d32598fbce02beb5b8a Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 12:19:07 +0000 Subject: [PATCH 22/27] Improve readability --- .storybook/manager.ts | 1 + .storybook/preview.ts | 1 + .storybook/storybook.css | 6 +++--- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 48217ed811..7f102340d5 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -11,6 +11,7 @@ const theme = create({ fontCode: '"Source Code Pro", monospace', appBorderColor: 'hsl(287deg 80% 90%)', + textColor: '#27292a', }); addons.setConfig({ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 49fafebffb..f55dbe3c1b 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -84,6 +84,7 @@ const preview: Preview = { base: 'light', fontBase: '"Lexend", sans-serif', fontCode: '"Source Code Pro", monospace', + textColor: '#27292a', }), source: { transform: (code: string) => cleanCodeSnippet(code), diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 46df84b8d0..241eb30d6b 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -69,13 +69,13 @@ p, li { - font-size: 1.05em; - line-height: 1.6; + font-size: 1.015em; + line-height: 1.5; code { background: var(--color-code-background); color: black; border: none; - font-weight: 400; + font-weight: 600; font-size: 0.9em; } } From 953b3219ab2d05b98c50ef71292cada2d105dce7 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 12:27:57 +0000 Subject: [PATCH 23/27] Improve readability --- .storybook/storybook.css | 57 ++++++++++++++++++++-------------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 241eb30d6b..038b7ad35b 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -57,6 +57,7 @@ margin-block-end: 0; padding-block-end: 0; + &, &:first-of-type { /* e.g. >> /?path=/story/components-badge--default */ margin-block-start: 1em; @@ -87,9 +88,27 @@ } -/* GROUP CODE BLOCKS -=================================================== */ .sbdocs { + /* GROUP CODE BLOCKS + =================================================== */ + .docblock-code-toggle { + &, :has(> &) { + border-top-left-radius: 7px; + } + .dark & { + background: hsl(0deg 0% 15%)!important; + color: white; + } + &:focus { + box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; + } + } + + .docblock-source { + margin-block: 20px; + } + /* GROUP CODE BLOCKS / PRISM + =================================================== */ /* Olaolu Palenight theme */ pre[class*="language-"], code[class*="language-"], @@ -271,33 +290,6 @@ .prismjs .style .token.string { color: #89ddff !important; } - - .docblock-code-toggle { - &, :has(> &) { - border-top-left-radius: 7px; - } - .dark & { - background: hsl(0deg 0% 15%)!important; - color: white; - } - &:focus { - box-shadow: var(--color-pink-light-1) 0px -2px 0px 0px inset; - } - } - - /* Leaving this here in case we want to override the style later */ - /* .prismjs { - border: 1px dotted var(--color-pink-light-1)!important; - border-radius: 10px; - } - pre * { - box-shadow: none!important; - } - .docblock-source { - &, & *:not(.prismjs) { - border: none!important; - } - } */ } @@ -310,6 +302,9 @@ } } + +/* GROUP OTHER +=================================================== */ .docs-story div[scale="1"] { transform: none !important; } @@ -319,6 +314,10 @@ padding: 4rem; } + .sbdocs-content { + max-width: 56rem; + } + .sbdocs-preview { border-radius: 17px; } From 3dfc7e99a799472d24e62cebf76e712a4e244a3a Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 12:32:02 +0000 Subject: [PATCH 24/27] Add a bit more bottom margin to h1 --- .storybook/storybook.css | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 038b7ad35b..341919cbfc 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -49,6 +49,7 @@ h1 { font-size: var(--font-size-4xl); line-height: var(--font-size-4xl-line-height); + margin-block-end: 1.35rem; } h2 { From 5590351ff00c420d2e339c42f655b96ac4c15d2b Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 12:40:00 +0000 Subject: [PATCH 25/27] Code blocks - fix border-radius --- .storybook/storybook.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 341919cbfc..ef88592e72 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -107,6 +107,7 @@ .docblock-source { margin-block: 20px; + border-radius: 8px; } /* GROUP CODE BLOCKS / PRISM =================================================== */ @@ -118,7 +119,6 @@ line-height: 1.5; background: #292D3E !important; /* Palenight dark bluish-gray background */ color: #A6ACCD !important; /* Soft off-white foreground */ - border-radius: 8px; padding: 1em; overflow: auto; } From 0f267484743b2694719cf02d163e96f494034c13 Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 12:43:52 +0000 Subject: [PATCH 26/27] Make body color darker to compensate for antialiasing --- .storybook/manager.ts | 2 +- .storybook/preview.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 7f102340d5..3d7b766c8a 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -11,7 +11,7 @@ const theme = create({ fontCode: '"Source Code Pro", monospace', appBorderColor: 'hsl(287deg 80% 90%)', - textColor: '#27292a', + textColor: '#181a1b', }); addons.setConfig({ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f55dbe3c1b..e0df78ce3f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -84,7 +84,7 @@ const preview: Preview = { base: 'light', fontBase: '"Lexend", sans-serif', fontCode: '"Source Code Pro", monospace', - textColor: '#27292a', + textColor: '#181a1b', }), source: { transform: (code: string) => cleanCodeSnippet(code), From 81b6dadd64b4b6905328ab562975df2eeb9174cf Mon Sep 17 00:00:00 2001 From: Jay George Date: Wed, 21 Jan 2026 13:03:48 +0000 Subject: [PATCH 27/27] Style topbar to match Statamic branding --- .storybook/public/manager-head.css | 39 +++++++++++++++++++++++------- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/.storybook/public/manager-head.css b/.storybook/public/manager-head.css index 9f2edc4e34..f56f89d357 100644 --- a/.storybook/public/manager-head.css +++ b/.storybook/public/manager-head.css @@ -2,16 +2,9 @@ --color-purple-light-1: hsl(256deg 60% 85%); --color-purple: hsl(256deg 70% 55%); } -/* #components-badge--docs { - &, - :has(> &) { - background: var(--color-purple-light-1); - &, & svg { - color: black; - } - } -} */ +/* GROUP SIDEBAR +=================================================== */ .sidebar-container { .sidebar-item { --tree-node-background-hover: hsl(256deg 60% 90%)!important; @@ -32,3 +25,31 @@ } } } + +/* GROUP TOPBAR +=================================================== */ +.sb-bar { + /* Theme Selector */ + [id*="select-"] { + background: hsl(256deg 60% 96%); + color: var(--color-purple); + } + button { + &:hover { + color: var(--color-purple); + background: hsl(256deg 60% 93%); + } + } +} +/* This is the best we can do, there are no other hooks */ +[aria-label="Theme selector"] { + [role="option"] { + &[aria-selected="true"] { + color: var(--color-purple); + } + &:hover { + color: var(--color-purple); + background: hsl(256deg 60% 96%); + } + } +} \ No newline at end of file