scoobie 19.0.2 → 19.1.0

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "19.0.2",
+  "version": "19.1.0",
   "dependencies": {
     "@capsizecss/core": "^4.0.0",
     "@vanilla-extract/css": "^1.2.3",
@@ -18,20 +18,20 @@
   "devDependencies": {
     "@changesets/cli": "2.27.12",
     "@changesets/get-github-info": "0.6.0",
-    "@storybook/addon-essentials": "8.5.1",
+    "@storybook/addon-essentials": "8.5.3",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-    "@storybook/react": "8.5.1",
-    "@storybook/react-webpack5": "8.5.1",
-    "@types/react": "18.3.16",
+    "@storybook/react": "8.5.3",
+    "@storybook/react-webpack5": "8.5.3",
+    "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
-    "braid-design-system": "33.4.0",
+    "braid-design-system": "33.5.0",
     "loki": "0.35.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet-async": "2.0.5",
-    "react-router-dom": "7.1.3",
-    "sku": "13.4.0",
-    "storybook": "8.5.1",
+    "react-router-dom": "7.1.5",
+    "sku": "14.0.3",
+    "storybook": "8.5.3",
     "webpack": "5.97.1"
   },
   "files": [
@@ -44,8 +44,7 @@
   "peerDependencies": {
     "braid-design-system": ">= 31.21.0",
     "react": ">= 17 < 19",
-    "react-router-dom": ">= 5.3.0",
-    "sku": ">= 13.0.0 < 14"
+    "react-router-dom": ">= 5.3.0"
   },
   "repository": {
     "type": "git",

package/src/components/Blockquote.css.ts

@@ -1,9 +1,26 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from 'braid-design-system/css';
+import { colorModeStyle, vars } from 'braid-design-system/css';
 
-export const quoteBlock = style({
-  borderLeftColor: vars.backgroundColor.neutralLight,
-  borderLeftStyle: 'solid',
-  borderLeftWidth: vars.space.xxsmall,
-  position: 'relative',
+export const quoteBlock = style([
+  {
+    borderLeftStyle: 'solid',
+    borderLeftWidth: vars.space.xxsmall,
+    borderRadius: vars.borderRadius.standard,
+    position: 'relative',
+  },
+  colorModeStyle({
+    darkMode: {
+      backgroundColor: vars.backgroundColor.neutral,
+      borderLeftColor: vars.borderColor.field,
+    },
+    lightMode: {
+      backgroundColor: vars.backgroundColor.neutralLight,
+      borderLeftColor: vars.borderColor.neutralLight,
+    },
+  }),
+]);
+
+export const quoteMark = style({
+  right: vars.space.xxsmall,
+  top: vars.space.xxsmall,
 });

package/src/components/Blockquote.tsx

@@ -4,13 +4,18 @@ import type { StackChildrenProps } from '../private/types';
 
 import * as styles from './Blockquote.css';
 
-interface Props extends StackChildrenProps {}
+type Props = StackChildrenProps;
 
 export const Blockquote = ({ children }: Props) => (
   <Box className={styles.quoteBlock} padding="medium">
     <Stack space="medium">{children}</Stack>
 
-    <Box position="absolute" right={0} top={0} userSelect="none" zIndex={0}>
+    <Box
+      position="absolute"
+      className={styles.quoteMark}
+      userSelect="none"
+      zIndex={0}
+    >
       <Heading component="div" level="2">
         <Secondary>”</Secondary>
       </Heading>

package/src/components/CodeContainer.css.ts

@@ -1,28 +1,42 @@
 import { style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { responsiveStyle, vars } from 'braid-design-system/css';
-import { darken } from 'polished';
+import { colorModeStyle, responsiveStyle, vars } from 'braid-design-system/css';
+import { darken, lighten } from 'polished';
 
 import { codeBackgroundColor } from '../../styles';
 
-export const lineNumberContainer = style({
-  backgroundColor: darken(0.05, codeBackgroundColor),
-  borderTopLeftRadius: vars.borderRadius.large,
-  borderBottomLeftRadius: vars.borderRadius.large,
-  color: vars.foregroundColor.secondary,
-  userSelect: 'none',
-});
+export const lineNumberContainer = style([
+  {
+    borderTopLeftRadius: vars.borderRadius.large,
+    borderBottomLeftRadius: vars.borderRadius.large,
+    color: vars.foregroundColor.secondary,
+    userSelect: 'none',
+  },
+  colorModeStyle({
+    darkMode: { backgroundColor: lighten(0.05, codeBackgroundColor.darkMode) },
+    lightMode: { backgroundColor: darken(0.05, codeBackgroundColor.lightMode) },
+  }),
+]);
 
 export const codeContainer = style([
   {
-    backgroundColor: codeBackgroundColor,
-    borderColor: darken(0.05, codeBackgroundColor),
     borderStyle: 'solid',
     borderWidth: vars.borderWidth.standard,
 
     overflow: 'auto',
   },
 
+  colorModeStyle({
+    darkMode: {
+      backgroundColor: codeBackgroundColor.darkMode,
+      borderColor: lighten(0.05, codeBackgroundColor.darkMode),
+    },
+    lightMode: {
+      backgroundColor: codeBackgroundColor.lightMode,
+      borderColor: darken(0.05, codeBackgroundColor.lightMode),
+    },
+  }),
+
   responsiveStyle({
     mobile: {
       // Roughly 15 lines of code at standard size.

package/src/components/CodeContainer.tsx

@@ -3,6 +3,8 @@ import { Highlight, type Token } from 'prism-react-renderer';
 
 import { Prism, themes } from '../private/Prism';
 
+import { useCodeTheme } from './CodeThemeProvider';
+
 import * as styles from './CodeContainer.css';
 import * as codeStyles from '../../styles/code.css';
 
@@ -14,24 +16,28 @@ export const CodeContainer = ({
   code: string;
   language: string;
   lineNumbers?: boolean;
-}) => (
-  <Box borderRadius="large" className={styles.codeContainer}>
-    <Highlight
-      prism={Prism}
-      code={code}
-      language={language}
-      theme={themes.github}
-    >
-      {({ getTokenProps, tokens }) => (
-        <Box display="flex">
-          {lineNumbers ? <LineNumbers count={tokens.length} /> : null}
+}) => {
+  const theme = useCodeTheme();
 
-          <Lines getTokenProps={getTokenProps} lines={tokens} />
-        </Box>
-      )}
-    </Highlight>
-  </Box>
-);
+  return (
+    <Box borderRadius="large" className={styles.codeContainer}>
+      <Highlight
+        prism={Prism}
+        code={code}
+        language={language}
+        theme={themes[theme]}
+      >
+        {({ getTokenProps, tokens }) => (
+          <Box display="flex">
+            {lineNumbers ? <LineNumbers count={tokens.length} /> : null}
+
+            <Lines getTokenProps={getTokenProps} lines={tokens} />
+          </Box>
+        )}
+      </Highlight>
+    </Box>
+  );
+};
 
 const LineNumbers = ({ count }: { count: number }) => {
   const numbers = [...new Array(count)].map((_, index) => index + 1);

package/src/components/CodeThemeProvider.tsx

@@ -0,0 +1,26 @@
+import type { themes } from 'prism-react-renderer';
+import { type ReactNode, createContext, useContext } from 'react';
+
+type CodeTheme = keyof typeof themes;
+
+const ctx = createContext<CodeTheme>('github');
+
+interface CodeThemeProviderProps {
+  children: ReactNode;
+
+  /**
+   * The current color mode.
+   *
+   * This defaults to `lightMode` in the absence of a `ColorModeProvider`.
+   */
+  theme: CodeTheme;
+}
+
+export const CodeThemeProvider = ({
+  children,
+  theme: theme,
+}: CodeThemeProviderProps) => (
+  <ctx.Provider value={theme}>{children}</ctx.Provider>
+);
+
+export const useCodeTheme = (): CodeTheme => useContext(ctx);

package/src/components/InlineCode.css.ts

@@ -1,7 +1,7 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { vars } from 'braid-design-system/css';
-import { darken } from 'polished';
+import { colorModeStyle, vars } from 'braid-design-system/css';
+import { darken, lighten } from 'polished';
 
 import { codeBackgroundColor, monospaceFontFamily } from '../../styles';
 
@@ -22,21 +22,31 @@ export const colourBlockWrapper = style({
 });
 
 export const weightBorder = styleVariants({
-  regular: {
-    borderColor: darken(0.05, codeBackgroundColor),
-    borderStyle: 'solid',
-    borderWidth: vars.borderWidth.standard,
-  },
+  regular: [
+    {
+      borderStyle: 'solid',
+      borderWidth: vars.borderWidth.standard,
+    },
+    colorModeStyle({
+      darkMode: { borderColor: lighten(0.05, codeBackgroundColor.darkMode) },
+      lightMode: { borderColor: darken(0.05, codeBackgroundColor.lightMode) },
+    }),
+  ],
 
   weak: {},
 });
 
 export const weight = styleVariants({
-  regular: {
-    backgroundColor: codeBackgroundColor,
-    paddingLeft: vars.space.xxsmall,
-    paddingRight: vars.space.xxsmall,
-  },
+  regular: [
+    {
+      paddingLeft: vars.space.xxsmall,
+      paddingRight: vars.space.xxsmall,
+    },
+    colorModeStyle({
+      darkMode: { backgroundColor: codeBackgroundColor.darkMode },
+      lightMode: { backgroundColor: codeBackgroundColor.lightMode },
+    }),
+  ],
 
   weak: {},
 });

package/src/components/InlineCode.tsx

@@ -1,5 +1,5 @@
 import { Box } from 'braid-design-system';
-import React, { Fragment, type ReactNode } from 'react';
+import { Fragment, type ReactNode } from 'react';
 
 import * as styles from './InlineCode.css';
 

package/src/index.ts

@@ -1,6 +1,7 @@
 export { Blockquote } from './components/Blockquote';
 export { CodeBlock } from './components/CodeBlock';
 export { CodeContainer } from './components/CodeContainer';
+export { CodeThemeProvider } from './components/CodeThemeProvider';
 export { CopyableText } from './components/CopyableText';
 export { InlineCode } from './components/InlineCode';
 export { InternalLink } from './components/InternalLink';

package/styles/index.ts

@@ -1,7 +1,12 @@
-// Braid grey.50
-// https://github.com/seek-oss/braid-design-system/blob/braid-design-system%4032.14.4/packages/braid-design-system/src/lib/color/palette.ts#L13
-export const codeBackgroundColor = '#F7F8FB';
+// https://github.com/seek-oss/braid-design-system/blob/braid-design-system%4033.5.0/packages/braid-design-system/src/lib/color/palette.ts#L2-L14
+export const codeBackgroundColor = {
+  // Braid grey.50
+  lightMode: '#F7F8FB',
 
-// SEEK's corporate font + GitHub defaults
+  // Braid grey.900
+  darkMode: '#0E131B',
+};
+
+// SEEK's former font + GitHub defaults
 export const monospaceFontFamily =
   "'Roboto Mono',SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace";