@byline/cli 6.0.3 → 6.2.0

package/dist/templates/ui-byline/components/code/code.module.css

@@ -0,0 +1,101 @@
+.root,
+:global(.light) .root,
+:global([data-theme="light"]) .root {
+  /* Prism One Light palette. */
+  --code-background: hsl(230, 1%, 98%);
+  --code-text: hsl(230, 8%, 24%);
+  --code-comment: hsl(230, 4%, 64%);
+  --code-literal: hsl(35, 99%, 36%);
+  --code-keyword: hsl(301, 63%, 40%);
+  --code-property: hsl(5, 74%, 59%);
+  --code-string: hsl(119, 34%, 47%);
+  --code-function: hsl(221, 87%, 60%);
+  --code-url: hsl(198, 99%, 37%);
+  --code-punctuation: var(--code-string);
+  --code-maybe-class: var(--code-text);
+  --code-scroll-thumb: color-mix(in srgb, var(--theme-400) 40%, white);
+  --code-scroll-hover: color-mix(in srgb, var(--theme-400) 55%, white);
+  --code-scroll-track: color-mix(in srgb, var(--theme-400) 8%, white);
+  --code-border: color-mix(in srgb, var(--theme-400) 20%, white);
+  --code-copy-background: var(--gray-50);
+  --code-copy-hover: var(--gray-100);
+  --code-copy-icon: var(--gray-700);
+  --code-copy-border: color-mix(in srgb, var(--theme-400) 35%, white);
+  border-color: var(--code-border);
+  color-scheme: light;
+}
+
+:global(.dark) .root,
+:global([data-theme="dark"]) .root {
+  /* Prism One Dark syntax colors, with the existing dark code surface. */
+  --code-background: color-mix(in srgb, var(--gray-950) 80%, transparent);
+  --code-text: hsl(220, 14%, 71%);
+  --code-comment: hsl(220, 10%, 40%);
+  --code-literal: hsl(29, 54%, 61%);
+  --code-keyword: hsl(286, 60%, 67%);
+  --code-property: hsl(355, 65%, 65%);
+  --code-string: hsl(95, 38%, 62%);
+  --code-function: hsl(207, 82%, 66%);
+  --code-url: hsl(187, 47%, 55%);
+  --code-punctuation: var(--code-text);
+  --code-maybe-class: var(--code-literal);
+  --code-scroll-thumb: var(--theme-400);
+  --code-scroll-hover: var(--theme-300);
+  --code-scroll-track: var(--theme-900);
+  --code-border: var(--theme-600);
+  --code-copy-background: var(--gray-900);
+  --code-copy-hover: color-mix(in srgb, var(--gray-800) 50%, transparent);
+  --code-copy-icon: var(--gray-200);
+  --code-copy-border: initial;
+  color-scheme: dark;
+}
+
+.copyButton {
+  background-color: var(--code-copy-background);
+  border-color: var(--code-copy-border, var(--button-variant-outlined-border));
+}
+
+.copyButton:hover {
+  background-color: var(--code-copy-hover);
+}
+
+.copyButton:focus,
+.copyButton:active {
+  --ring-color: var(--code-copy-border, var(--button-ring-color));
+}
+
+.copyIcon {
+  fill: var(--code-copy-icon);
+}
+
+.scroller {
+  overflow-x: auto;
+  /* Let the explicit WebKit scrollbar render instead of the inherited
+     scrollbar-color selecting an auto-hiding native scrollbar on macOS. */
+  scrollbar-color: auto;
+  scrollbar-width: auto;
+}
+
+.scroller::-webkit-scrollbar {
+  height: 0.625rem;
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  background: var(--code-scroll-thumb);
+  border-radius: 0.3125rem;
+}
+
+.scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--code-scroll-hover);
+}
+
+.scroller::-webkit-scrollbar-track {
+  background: var(--code-scroll-track);
+}
+
+@supports not selector(::-webkit-scrollbar) {
+  .scroller {
+    scrollbar-color: var(--code-scroll-thumb) var(--code-scroll-track);
+    scrollbar-width: thin;
+  }
+}

package/dist/templates/ui-byline/components/code/code.tsx

@@ -3,7 +3,10 @@
 import { CopyButton } from '@byline/ui/react'
 /* eslint-disable no-param-reassign */
 import cx from 'clsx'
-import { Highlight, themes } from 'prism-react-renderer'
+import { Highlight } from 'prism-react-renderer'
+
+import styles from './code.module.css'
+import { codeTheme } from './theme'
 
 type CodeIntrinsicProps = React.JSX.IntrinsicElements['pre']
 interface CodeProps extends CodeIntrinsicProps {
@@ -17,19 +20,25 @@ export function Code({ code, className, language }: CodeProps): React.JSX.Elemen
   // Prism calls `.toLowerCase()` on this value, so null and empty legacy values need a fallback.
   const resolvedLanguage = language != null && language.length > 0 ? language : 'typescript'
   return (
-    <Highlight theme={themes.oneDark} code={code} language={resolvedLanguage}>
-      {({ tokens, getLineProps, getTokenProps }) => (
-        <div className="code scroller group overflow-y-auto rounded border border-theme-600 relative mb-4">
+    <Highlight theme={codeTheme} code={code} language={resolvedLanguage}>
+      {({ style, tokens, getLineProps, getTokenProps }) => (
+        <div
+          className={cx(
+            styles.root,
+            'code group min-w-0 overflow-hidden rounded border relative mb-4'
+          )}
+        >
           <CopyButton
             variant="outlined"
             intent="primary"
-            className="bg-gray-900 hover:bg-gray-800/50"
-            containerClassName="dark absolute top-2 right-2 invisible group-hover:visible"
-            svgClassName="fill-gray-200 dark:fill-gray-200"
+            className={styles.copyButton}
+            containerClassName="absolute top-2 right-2 invisible group-hover:visible group-focus-within:visible"
+            svgClassName={styles.copyIcon}
             text={code}
           />
           <pre
-            className={cx('m-0 py-5 px-4 rounded-none bg-gray-900 dark:bg-gray-950/80', className)}
+            style={style}
+            className={cx(styles.scroller, 'm-0 py-5 px-4 rounded-none', className)}
           >
             <code className="not-prose">
               {tokens.map((line, i) => {

package/dist/templates/ui-byline/components/code/theme.ts

@@ -0,0 +1,33 @@
+import type { PrismTheme } from 'prism-react-renderer'
+
+// Stable on the server and client. CSS selects the One Light / One Dark
+// palette using the document class set by the existing early theme detector.
+export const codeTheme: PrismTheme = {
+  plain: {
+    color: 'var(--code-text)',
+    backgroundColor: 'var(--code-background)',
+  },
+  styles: [
+    { types: ['comment', 'prolog', 'cdata'], style: { color: 'var(--code-comment)' } },
+    { types: ['doctype', 'entity'], style: { color: 'var(--code-text)' } },
+    { types: ['punctuation'], style: { color: 'var(--code-punctuation)' } },
+    {
+      types: ['attr-name', 'class-name', 'boolean', 'constant', 'number', 'atrule'],
+      style: { color: 'var(--code-literal)' },
+    },
+    { types: ['maybe-class-name'], style: { color: 'var(--code-maybe-class)' } },
+    { types: ['keyword'], style: { color: 'var(--code-keyword)' } },
+    { types: ['property', 'tag', 'symbol', 'deleted'], style: { color: 'var(--code-property)' } },
+    {
+      types: ['selector', 'string', 'char', 'builtin', 'inserted', 'regex', 'attr-value'],
+      style: { color: 'var(--code-string)' },
+    },
+    { types: ['variable', 'operator', 'function'], style: { color: 'var(--code-function)' } },
+    { types: ['url'], style: { color: 'var(--code-url)' } },
+    { types: ['deleted'], style: { textDecorationLine: 'line-through' } },
+    { types: ['inserted'], style: { textDecorationLine: 'underline' } },
+    { types: ['italic'], style: { fontStyle: 'italic' } },
+    { types: ['important', 'bold'], style: { fontWeight: 'bold' } },
+    { types: ['important'], style: { color: 'var(--code-text)' } },
+  ],
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/cli",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.0.3",
+  "version": "6.2.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -61,7 +61,7 @@
     "typescript": "^7.0.2",
     "unified": "^11.0.5",
     "vitest": "^5.0.0",
-    "@byline/core": "6.0.3"
+    "@byline/core": "6.2.0"
   },
   "publishConfig": {
     "access": "public",