diff --git a/.changeset/khaki-seahorses-fly.md b/.changeset/khaki-seahorses-fly.md
index d510f4b6..9416b99f 100644
--- a/.changeset/khaki-seahorses-fly.md
+++ b/.changeset/khaki-seahorses-fly.md
@@ -2,4 +2,4 @@
'playroom': minor
---
-Use CSS gap for layout spacing in Playroom UI.
+Use CSS gap and grid for layout spacing in Playroom UI.
diff --git a/src/Playroom/Button/Button.css.ts b/src/Playroom/Button/Button.css.ts
index b450fef8..02bb62dc 100644
--- a/src/Playroom/Button/Button.css.ts
+++ b/src/Playroom/Button/Button.css.ts
@@ -78,7 +78,7 @@ export const positive = style({
});
export const iconContainer = style([
- sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+ sprinkles({ position: 'relative', paddingLeft: 'small' }),
{
top: '1px',
},
diff --git a/src/Playroom/CodeEditor/CodeEditor.css.ts b/src/Playroom/CodeEditor/CodeEditor.css.ts
index 8078b632..88686a38 100644
--- a/src/Playroom/CodeEditor/CodeEditor.css.ts
+++ b/src/Playroom/CodeEditor/CodeEditor.css.ts
@@ -296,9 +296,9 @@ globalStyle('.CodeMirror-dialog button', {
appearance: 'none',
font: vars.font.scale.standard,
fontFamily: vars.font.family.standard,
- marginLeft: vars.space.medium,
- paddingTop: vars.space.medium,
- paddingBottom: vars.space.medium,
+ marginLeft: vars.space.small,
+ paddingTop: vars.space.small,
+ paddingBottom: vars.space.small,
paddingLeft: vars.space.large,
paddingRight: vars.space.large,
alignSelf: 'center',
diff --git a/src/Playroom/Frames/Frames.css.ts b/src/Playroom/Frames/Frames.css.ts
index a5ef0cb9..658e1d34 100644
--- a/src/Playroom/Frames/Frames.css.ts
+++ b/src/Playroom/Frames/Frames.css.ts
@@ -4,26 +4,21 @@ import { sprinkles } from '../sprinkles.css';
export const root = style([
sprinkles({
height: 'full',
- width: 'full',
- whiteSpace: 'nowrap',
- display: 'flex',
boxSizing: 'border-box',
- paddingY: 'gutter',
- paddingLeft: 'gutter',
+ display: 'flex',
+ padding: 'gutter',
textAlign: 'center',
+ overflow: 'auto',
+ }),
+]);
+
+export const framesContainer = style([
+ sprinkles({
+ display: 'flex',
+ gap: 'gutter',
}),
{
- overflowX: 'auto',
- overflowY: 'hidden',
- // // Simulate centering when fewer frames than viewport width.
- '::before': {
- content: '""',
- flex: 1,
- },
- '::after': {
- content: '""',
- flex: 1,
- },
+ marginInline: 'auto',
},
]);
@@ -34,7 +29,6 @@ export const frameContainer = style([
textAlign: 'left',
display: 'flex',
flexDirection: 'column',
- paddingRight: 'gutter',
}),
{},
]);
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 5ce42a72..07bae466 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -34,36 +34,38 @@ export default function Frames({ code, themes, widths }: FramesProps) {
return (
- {frames.map((frame) => (
-
);
}
diff --git a/src/Playroom/FramesPanel/FramesPanel.css.ts b/src/Playroom/FramesPanel/FramesPanel.css.ts
index ccde74b1..5816a6b4 100644
--- a/src/Playroom/FramesPanel/FramesPanel.css.ts
+++ b/src/Playroom/FramesPanel/FramesPanel.css.ts
@@ -2,11 +2,8 @@ import { calc } from '@vanilla-extract/css-utils';
import { globalStyle, style } from '@vanilla-extract/css';
import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-export const title = sprinkles({
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- marginBottom: 'medium',
+export const title = style({
+ marginRight: 'auto',
});
export const reset = style([
@@ -14,7 +11,7 @@ export const reset = style([
position: 'relative',
font: 'small',
border: 0,
- padding: 'medium',
+ padding: 'small',
appearance: 'none',
}),
{
@@ -22,7 +19,7 @@ export const reset = style([
backgroundColor: 'transparent',
outline: 'none',
textDecoration: 'underline',
- margin: calc(vars.space.medium).negate().toString(),
+ margin: calc(vars.space.small).negate().toString(),
'::before': {
content: '""',
position: 'absolute',
@@ -46,18 +43,9 @@ export const reset = style([
},
]);
-export const label = style([
- sprinkles({
- position: 'relative',
- display: 'flex',
- alignItems: 'center',
- cursor: 'pointer',
- userSelect: 'none',
- }),
- {
- height: calc(vars.grid).multiply(9).toString(),
- },
-]);
+export const label = sprinkles({
+ cursor: 'pointer',
+});
const checkboxSize = '20px';
export const checkbox = style([
@@ -82,7 +70,6 @@ export const fakeCheckbox = style([
justifyContent: 'center',
position: 'relative',
borderRadius: 'large',
- marginRight: 'large',
padding: checkboxPadding,
pointerEvents: 'none',
}),
diff --git a/src/Playroom/FramesPanel/FramesPanel.tsx b/src/Playroom/FramesPanel/FramesPanel.tsx
index 2f20a693..25ce095b 100644
--- a/src/Playroom/FramesPanel/FramesPanel.tsx
+++ b/src/Playroom/FramesPanel/FramesPanel.tsx
@@ -8,6 +8,7 @@ import { Text } from '../Text/Text';
import * as styles from './FramesPanel.css';
import { Helmet } from 'react-helmet';
+import { Inline } from '../Inline/Inline';
const getTitle = (title: string | undefined) => {
if (title) {
@@ -45,10 +46,12 @@ interface FrameHeadingProps {
children: ReactNode;
}
const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
-
-
{children}
+
+
+ {children}
+
{showReset && Clear}
-
+
);
interface FrameOptionProps