Add experimental support for color modes (#790)

Author: 72636c

.changeset/quick-rabbits-visit.md

@@ -0,0 +1,5 @@
+---
+'scoobie': minor
+---
+
+Blockquote, CodeBlock, CodeContainer, InlineCode, styles/codeBackgroundColor: Add experimental support for color modes

.loki/reference/chrome_laptop_Standalone_Blockquote_Blockquote.png

@@ -5,10 +5,12 @@ import { BraidProvider, Card, PageBlock } from 'braid-design-system';
 import docs from 'braid-design-system/themes/docs';
 import seekJobs from 'braid-design-system/themes/seekJobs';
 import wireframe from 'braid-design-system/themes/wireframe';
+import { themes } from 'prism-react-renderer';
 import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 
+import { CodeThemeProvider } from '../src/components/CodeThemeProvider';
 import { ScoobieLink } from '../src/components/ScoobieLink';
 import { robotoHref, robotoMonoHref } from '../typography';
 
@@ -18,6 +20,15 @@ export type BraidThemeName = 'docs' | 'seekJobs' | 'wireframe';
 
 export default {
   globalTypes: {
+    codeTheme: {
+      description: 'Code theme to use',
+      defaultValue: 'github',
+      toolbar: {
+        title: 'Code theme',
+        icon: 'contrast',
+        items: Object.keys(themes),
+      },
+    },
     theme: {
       description: 'Braid theme to use',
       defaultValue: 'seekJobs',
@@ -34,19 +45,21 @@ export default {
         theme={THEMES[globals.theme as BraidThemeName]}
         linkComponent={ScoobieLink}
       >
-        <BrowserRouter>
-          <HelmetProvider>
-            <Helmet>
-              <link href={robotoHref} rel="stylesheet" />
-              <link href={robotoMonoHref} rel="stylesheet" />
-            </Helmet>
-            <PageBlock>
-              <Card>
-                <Story />
-              </Card>
-            </PageBlock>
-          </HelmetProvider>
-        </BrowserRouter>
+        <CodeThemeProvider theme={globals.codeTheme}>
+          <BrowserRouter>
+            <HelmetProvider>
+              <Helmet>
+                <link href={robotoHref} rel="stylesheet" />
+                <link href={robotoMonoHref} rel="stylesheet" />
+              </Helmet>
+              <PageBlock>
+                <Card>
+                  <Story />
+                </Card>
+              </PageBlock>
+            </HelmetProvider>
+          </BrowserRouter>
+        </CodeThemeProvider>
       </BraidProvider>
     ),
   ],

.loki/reference/chrome_laptop_Standalone_CodeBlock_Multi.png

@@ -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,
 });

.loki/reference/chrome_laptop_Standalone_CodeBlock_Single.png

@@ -10,7 +10,12 @@ 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>

.loki/reference/chrome_laptop_Standalone_CodeContainer_Line_Numbers.png

@@ -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.

.loki/reference/chrome_laptop_Standalone_CodeContainer_No_Line_Numbers.png

@@ -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);

.loki/reference/chrome_laptop_Standalone_CopyableText_Copyable_Text.png

@@ -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);

.loki/reference/chrome_laptop_Standalone_InlineCode_Inline_Code.png

@@ -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: {},
 });

.loki/reference/chrome_laptop_Standalone_InternalLink_Internal_Link.png

@@ -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';
 

.loki/reference/chrome_laptop_Standalone_SmartTextLink_Smart_Text_Link.png

@@ -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';

.storybook/preview.tsx

@@ -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";