Add Scoobie code themes, delete styles submodule (#792)

I realised theming was pretty simple so I just frankensteined the
`github` and `vs` ones with a Braid palette.

https://github.com/FormidableLabs/prism-react-renderer/blob/e1c83a468b05df7f452b3ad7e4ae5ab874574d4e/packages/prism-react-renderer/src/themes/github.ts

Author: 72636c

.changeset/tame-bugs-relax.md

@@ -0,0 +1,5 @@
+---
+'scoobie': major
+---
+
+styles: Remove submodule export

.changeset/ten-cups-eat.md

@@ -0,0 +1,5 @@
+---
+'scoobie': minor
+---
+
+CodeBlock, CodeContainer, CodeThemeProvider: Add `scoobieDark` and `scoobieLight` themes

.loki/reference/chrome_laptop_Standalone_CodeThemeProvider_Scoobie_Dark.png

@@ -5,13 +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 { codeThemes } from '../src/private/codeThemes';
 import { robotoHref, robotoMonoHref } from '../typography';
 
 const THEMES = { docs, seekJobs, wireframe };
@@ -20,13 +19,22 @@ export type BraidThemeName = 'docs' | 'seekJobs' | 'wireframe';
 
 export default {
   globalTypes: {
+    colorMode: {
+      description: 'Color mode to use',
+      defaultValue: 'lightMode',
+      toolbar: {
+        title: 'Color mode',
+        icon: 'contrast',
+        items: ['darkMode', 'lightMode'],
+      },
+    },
     codeTheme: {
       description: 'Code theme to use',
       defaultValue: 'github',
       toolbar: {
         title: 'Code theme',
         icon: 'contrast',
-        items: Object.keys(themes),
+        items: Object.keys(codeThemes),
       },
     },
     theme: {
@@ -40,27 +48,37 @@ export default {
     },
   },
   decorators: [
-    (Story, { globals }) => (
-      <BraidProvider
-        theme={THEMES[globals.theme as BraidThemeName]}
-        linkComponent={ScoobieLink}
-      >
-        <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>
-    ),
+    (Story, { globals }) => {
+      const DARK_MODE_CLASS = 'sprinkles_darkMode__1t46ksg10';
+
+      if (globals.colorMode === 'darkMode') {
+        document.documentElement.classList.add(DARK_MODE_CLASS);
+      } else {
+        document.documentElement.classList.remove(DARK_MODE_CLASS);
+      }
+
+      return (
+        <BraidProvider
+          theme={THEMES[globals.theme as BraidThemeName]}
+          linkComponent={ScoobieLink}
+        >
+          <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>
+      );
+    },
   ],
 } satisfies Preview;

.loki/reference/chrome_laptop_Standalone_CodeThemeProvider_Scoobie_Light.png

@@ -234,39 +234,6 @@ export const SomeLinks = () => (
 );
 ```
 
-## Styling reference
-
-Scoobie distributes some vanilla-extract styles via `scoobie/styles` submodules.
-
-### code
-
-Render text with the same monospace styling as our [CodeBlock](#codeblock):
-
-```tsx
-import { Box } from 'braid-design-system';
-import React from 'react';
-import { code } from 'scoobie/styles/code.css';
-
-export const MyBox = () => (
-  <Box className={code.standard}>
-    <Box component="pre">Hello</Box>
-  </Box>
-);
-```
-
-### img
-
-```tsx
-import React from 'react';
-import { img } from 'scoobie/styles/img.css';
-
-export const MySvg = () => (
-  <svg className={img}>
-    <path />
-  </svg>
-);
-```
-
 ## Webpack reference
 
 Scoobie distributes its Webpack config via a `scoobie/webpack` submodule:

.storybook/preview.tsx

@@ -36,7 +36,6 @@
   },
   "files": [
     "src",
-    "styles",
     "webpack",
     "types.d.ts",
     "typography.ts"

README.md

@@ -2,7 +2,7 @@ import type { SkuConfig } from 'sku';
 
 const config: SkuConfig = {
   rootResolution: false,
-  srcPaths: ['./src', './styles'],
+  srcPaths: ['./src'],
 
   dangerouslySetESLintConfig: (skuConfig) => [
     ...skuConfig,

package.json

@@ -3,7 +3,7 @@ import { calc } from '@vanilla-extract/css-utils';
 import { colorModeStyle, responsiveStyle, vars } from 'braid-design-system/css';
 import { darken, lighten } from 'polished';
 
-import { codeBackgroundColor } from '../../styles';
+import { codeBackgroundColor } from '../private/color';
 
 export const lineNumberContainer = style([
   {

sku.config.ts

@@ -1,12 +1,13 @@
 import { Box, Stack } from 'braid-design-system';
 import { Highlight, type Token } from 'prism-react-renderer';
 
-import { Prism, themes } from '../private/Prism';
+import { Prism } from '../private/Prism';
+import { codeThemes } from '../private/codeThemes';
 
 import { useCodeTheme } from './CodeThemeProvider';
 
 import * as styles from './CodeContainer.css';
-import * as codeStyles from '../../styles/code.css';
+import * as fontStyles from '../private/font.css';
 
 export const CodeContainer = ({
   code,
@@ -25,7 +26,7 @@ export const CodeContainer = ({
         prism={Prism}
         code={code}
         language={language}
-        theme={themes[theme]}
+        theme={codeThemes[theme]}
       >
         {({ getTokenProps, tokens }) => (
           <Box display="flex">
@@ -46,7 +47,7 @@ const LineNumbers = ({ count }: { count: number }) => {
     <Box aria-hidden className={styles.lineNumberContainer} padding="medium">
       <Stack align="right" space="small">
         {numbers.map((number) => (
-          <Box className={codeStyles.code} key={number}>
+          <Box className={fontStyles.code} key={number}>
             <Box component="pre">{number}</Box>
           </Box>
         ))}
@@ -69,7 +70,7 @@ const Lines = ({
   <Box padding="medium">
     <Stack space="small">
       {lines.map((line, lineIndex) => (
-        <Box className={codeStyles.code} key={lineIndex}>
+        <Box className={fontStyles.code} key={lineIndex}>
           <Box component="pre">
             {line.map((token, tokenIndex) => {
               const props = getTokenProps({ token });