Add Box component

package.json

@@ -81,6 +81,7 @@
     "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^6.1.3",

src/Playroom/Box/Box.tsx

@@ -0,0 +1,33 @@
+import clsx, { type ClassValue } from 'clsx';
+import type { AllHTMLAttributes, ElementType } from 'react';
+import { sprinkles, type Sprinkles } from '../sprinkles.css';
+
+interface BoxProps
+  extends Omit<
+      AllHTMLAttributes<HTMLElement>,
+      'width' | 'height' | 'className' | 'data'
+    >,
+    Sprinkles {
+  className?: ClassValue;
+  component?: ElementType;
+}
+
+export const Box = ({
+  component = 'div',
+  className,
+  ...restProps
+}: BoxProps) => {
+  const atomProps: Record<string, unknown> = {};
+
+  for (const key in restProps) {
+    if (sprinkles.properties.has(key as keyof Sprinkles)) {
+      atomProps[key] = restProps[key as keyof typeof restProps];
+      delete restProps[key as keyof typeof restProps];
+    }
+  }
+
+  const classes = clsx(className, sprinkles({ ...atomProps }));
+  const Component = component;
+
+  return <Component className={classes} {...restProps} />;
+};

src/Playroom/Button/Button.css.ts

@@ -1,6 +1,7 @@
 import { style, createVar } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const reset = style([
   sprinkles({

src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -1,5 +1,6 @@
 import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
-import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
 const minimumLineNumberWidth = '50px';

src/Playroom/Frames/Frames.css.ts

@@ -1,44 +1,29 @@
 import { style } from '@vanilla-extract/css';
 import { sprinkles } from '../sprinkles.css';
 
-export const root = style([
-  sprinkles({
-    height: 'full',
-    boxSizing: 'border-box',
-    display: 'flex',
-    padding: 'gutter',
-    textAlign: 'center',
-    overflow: 'auto',
-  }),
-]);
-
-export const framesContainer = style([
-  sprinkles({
-    display: 'flex',
-    gap: 'gutter',
-  }),
-  {
-    marginInline: 'auto',
-  },
-]);
+export const root = sprinkles({
+  height: 'full',
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 'gutter',
+  textAlign: 'center',
+  overflow: 'auto',
+});
 
-export const frameContainer = style([
-  sprinkles({
-    position: 'relative',
-    height: 'full',
-    textAlign: 'left',
-    display: 'flex',
-    flexDirection: 'column',
-  }),
-  {},
-]);
+export const frameContainer = sprinkles({
+  position: 'relative',
+  height: 'full',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+});
 
-export const frame = style([
-  sprinkles({ position: 'relative', height: 'full', border: 0 }),
-  {
-    flexGrow: 1,
-  },
-]);
+export const frame = sprinkles({
+  position: 'relative',
+  height: 'full',
+  border: 0,
+  flexGrow: 1,
+});
 
 export const frameBorder = style([
   sprinkles({

src/Playroom/Frames/Frames.tsx

@@ -9,6 +9,7 @@ import playroomConfig from '../../config';
 import frameSrc from './frameSrc';
 
 import * as styles from './Frames.css';
+import { Box } from '../Box/Box';
 
 interface FramesProps {
   code: string;
@@ -34,7 +35,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      <div className={styles.framesContainer}>
+      <Box display="flex" gap="gutter" marginX="auto">
         {frames.map((frame) => (
           <div
             key={`${frame.theme}_${frame.width}`}
@@ -65,7 +66,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
             </div>
           </div>
         ))}
-      </div>
+      </Box>
     </div>
   );
 }

src/Playroom/FramesPanel/FramesPanel.css.ts

@@ -1,10 +1,7 @@
 import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-
-export const title = style({
-  marginRight: 'auto',
-});
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const reset = style([
   sprinkles({

src/Playroom/FramesPanel/FramesPanel.tsx

@@ -5,10 +5,11 @@ import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import { StoreContext } from '../../StoreContext/StoreContext';
 import { Stack } from '../Stack/Stack';
 import { Text } from '../Text/Text';
-
-import * as styles from './FramesPanel.css';
 import { Helmet } from 'react-helmet';
 import { Inline } from '../Inline/Inline';
+import { Box } from '../Box/Box';
+
+import * as styles from './FramesPanel.css';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -47,9 +48,9 @@ interface FrameHeadingProps {
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
   <Inline space="none" alignY="center">
-    <div className={styles.title}>
+    <Box flexGrow={1}>
       <Heading level="3">{children}</Heading>
-    </div>
+    </Box>
     {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
   </Inline>
 );

src/Playroom/Heading/Heading.css.ts

@@ -1,4 +1,5 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style } from '@vanilla-extract/css';
 
 export const base = style([

src/Playroom/Inline/Inline.css.ts

@@ -1,5 +1,5 @@
 import { style, createVar, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 const size = createVar();
 const horizontalAlignment = createVar();

src/Playroom/Playroom.css.ts

@@ -1,5 +1,6 @@
 import { style, globalStyle } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from './sprinkles.css';
+import { sprinkles, colorPaletteVars } from './sprinkles.css';
+import { vars } from './vars.css';
 import { toolbarItemSize } from './ToolbarItem/ToolbarItem.css';
 
 globalStyle('html', {

src/Playroom/SettingsPanel/SettingsPanel.css.ts

@@ -1,4 +1,5 @@
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style } from '@vanilla-extract/css';
 
 export const fieldset = sprinkles({
@@ -7,14 +8,6 @@ export const fieldset = sprinkles({
   padding: 'none',
 });
 
-export const keyboardShortcutsRow = sprinkles({
-  alignItems: 'center',
-});
-
-export const keyboardShortcutTitle = style({
-  marginRight: 'auto',
-});
-
 export const keyboardShortcutKeys = style([
   {
     display: 'grid',

src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -18,6 +18,7 @@ import ColorModeDarkIcon from '../icons/ColorModeDarkIcon';
 import { Text } from '../Text/Text';
 import { Inline } from '../Inline/Inline';
 import { isMac } from '../../utils/formatting';
+import { Box } from '../Box/Box';
 
 const getKeyBindings = () => {
   const metaKeySymbol = isMac() ? '⌘' : 'Ctrl';
@@ -72,9 +73,9 @@ const KeyboardShortcut = ({
 
   return (
     <Inline space="small" alignY="center">
-      <div className={styles.keyboardShortcutTitle}>
+      <Box flexGrow={1}>
         <Text>{description}</Text>
-      </div>
+      </Box>
       <Text size={isMac() ? 'large' : 'standard'}>
         <div className={styles.keyboardShortcutKeys}>{shortcutSegments}</div>
       </Text>

src/Playroom/Snippets/SearchField/SearchField.css.ts

@@ -1,4 +1,5 @@
-import { sprinkles, vars, colorPaletteVars } from '../../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../../sprinkles.css';
+import { vars } from '../../vars.css';
 import { style } from '@vanilla-extract/css';
 
 export const field = style([

src/Playroom/Snippets/Snippets.css.ts

@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const root = sprinkles({
   position: 'relative',

src/Playroom/Stack/Stack.css.ts

@@ -1,5 +1,5 @@
 import { style, createVar, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 const size = createVar();
 

src/Playroom/StatusMessage/StatusMessage.css.ts

@@ -1,6 +1,7 @@
 import { calc } from '@vanilla-extract/css-utils';
 import { style } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
 const statusGutter = '15px';

src/Playroom/Toolbar/Toolbar.css.ts

@@ -42,34 +42,6 @@ export const sidebar = sprinkles({
   overflow: 'hidden',
 });
 
-export const topButtons = sprinkles({
-  transition: 'medium',
-});
-
-export const positions_isOpen = style({});
-export const positionContainer = style([
-  sprinkles({
-    position: 'absolute',
-    top: 0,
-    width: 'full',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    justifyContent: 'flex-end',
-    transition: 'medium',
-  }),
-  {
-    bottom: toolbarItemSize,
-    selectors: {
-      [`&:not(${positions_isOpen})`]: {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: 'translateY(20px)',
-      },
-    },
-  },
-]);
-
 export const buttons = style([
   sprinkles({
     display: 'flex',

src/Playroom/Toolbar/Toolbar.tsx

@@ -89,7 +89,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
       )}
       <div className={styles.sidebar}>
         <div className={styles.buttons}>
-          <div className={styles.topButtons}>
+          <div>
             {hasSnippets && (
               <ToolbarItem
                 active={isSnippetsOpen}

src/Playroom/ToolbarItem/ToolbarItem.css.ts

@@ -1,4 +1,5 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style, globalStyle } from '@vanilla-extract/css';
 
 export const toolbarItemSize = 60;

src/Playroom/icons/ChevronIcon.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
 export const root = style({
   transition: vars.transition.medium,