restore negative marginLeft

Author: veej

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

@@ -4,15 +4,12 @@ import { Breakpoint, breakpoints } from "../util/breakpoints";
 
 export const columnsSpace = createVar("columns-space");
 
-export const column = style({});
+export const columns = style({
+  marginLeft: `calc(${columnsSpace} * -1)`,
+});
 
 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,
-  column,
+  columns,
   columnContent,
 } from "./Column.css";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -36,9 +36,8 @@ export function Column({ children, width, sticky }: ColumnProps) {
 
   const className =
     width == null
-      ? [column, fullWidth]
+      ? fullWidth
       : [
-          column,
           wide && wideWidths[wide],
           desktop && desktopWidths[desktop],
           tablet && tabletWidths[tablet],
@@ -65,6 +64,7 @@ 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)) {