braid-design-system/dist/lib/components/Tiles/Tiles.css.mjs

Themeable design system for the SEEK Group

import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar, globalStyle } from "@vanilla-extract/css";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
setFileScope("src/lib/components/Tiles/Tiles.css.ts", "braid-design-system");
const columns = createVar("columns");
const mobileColumnsVar = createVar("mobileColumnsVar");
const tabletColumnsVar = createVar("tabletColumnsVar");
const desktopColumnsVar = createVar("desktopColumnsVar");
const wideColumnsVar = createVar("wideColumnsVar");
const tiles = style([{
  display: "grid",
  gridTemplateColumns: `repeat(${columns}, 1fr)`
}, responsiveStyle({
  mobile: {
    vars: {
      [columns]: mobileColumnsVar
    }
  },
  tablet: {
    vars: {
      [columns]: tabletColumnsVar
    }
  },
  desktop: {
    vars: {
      [columns]: desktopColumnsVar
    }
  },
  wide: {
    vars: {
      [columns]: wideColumnsVar
    }
  }
})], "tiles");
globalStyle(`${tiles} > *`, {
  minWidth: 0
});
endFileScope();
export {
  desktopColumnsVar,
  mobileColumnsVar,
  tabletColumnsVar,
  tiles,
  wideColumnsVar
};