avoid negative margin

Author: veej

packages/bento-design-system/src/Layout/Column.css.ts

@@ -4,12 +4,15 @@ import { Breakpoint, breakpoints } from "../util/breakpoints";
 
 export const columnsSpace = createVar("columns-space");
 
-export const columns = style({
-  marginLeft: `calc(${columnsSpace} * -1)`,
-});
+export const column = style({});
 
 export const columnContent = style({
   marginLeft: columnsSpace,
+  selectors: {
+    [`${column}:first-child &`]: {
+      marginLeft: 0,
+    },
+  },
 });
 
 const styleForScale = (scale: number): StyleRule => ({

packages/bento-design-system/src/Layout/Columns.tsx

@@ -16,7 +16,7 @@ import {
   mobileWidths,
   fullWidth,
   columnsSpace,
-  columns,
+  column,
   columnContent,
 } from "./Column.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -36,8 +36,9 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   const className =
     width == null
-      ? fullWidth
+      ? [column, fullWidth]
       : [
+          column,
           wide && wideWidths[wide],
           desktop && desktopWidths[desktop],
           tablet && tabletWidths[tablet],
@@ -64,7 +65,6 @@ export function Columns({ space, children, align, alignY, collapseBelow, reverse
       display="flex"
       {...responsiveCollapsibleAlignmentProps({ align, alignY, collapseBelow, reverse })}
       style={assignInlineVars({ [columnsSpace]: `${space}px` })}
-      className={columns}
     >
       {flattenChildren(children).map((child, index) => {
         if (isColumn(child)) {