hacss.config.js

const colors = {
  black: "black",
  blue100: "#d6fdf8",
  blue200: "#aefbf7",
  blue300: "#84eff3",
  blue400: "#63d9e7",
  blue500: "#34bad8",
  blue600: "#2693b9",
  blue700: "#1a709b",
  blue800: "#10507d",
  blue900: "#093a67",
  dolphin100: "#eae8f9",
  dolphin200: "#c8c6d7",
  dolphin300: "#a7a5b6",
  dolphin400: "#868495",
  dolphin500: "#656374",
  dolphin600: "#4c4a5b",
  dolphin700: "#323041",
  dolphin800: "#191728",
  dolphin900: "#00000e",
  green100: "#eefbdb",
  green200: "#daf8b9",
  green300: "#bbea91",
  green400: "#99d670",
  green500: "#6dbc45",
  green600: "#50a132",
  green700: "#378722",
  green800: "#226d16",
  green900: "#135a0d",
  lavendar100: "#f9e8f9",
  lavendar200: "#d7c6d7",
  lavendar300: "#b6a5b6",
  lavendar400: "#958495",
  lavendar500: "#746374",
  lavendar600: "#5b4a5b",
  lavendar700: "#413041",
  lavendar800: "#281728",
  lavendar900: "#0e000e",
  orange100: "#fef3d5",
  orange200: "#fde3ac",
  orange300: "#fbce82",
  orange400: "#f8b962",
  orange500: "#f49930",
  orange600: "#d17823",
  orange700: "#af5b18",
  orange800: "#8d410f",
  orange900: "#752e09",
  red100: "hsl(10,75%,90%)",
  red200: "hsl(8,80%,80%)",
  red300: "hsl(6,90%,70%)",
  red400: "hsl(3,95%,60%)",
  red500: "hsl(360,100%,50%)",
  red600: "hsl(357,95%,40%)",
  red700: "hsl(354,90%,30%)",
  red800: "hsl(352,80%,25%)",
  red900: "hsl(350,75%,22%)",
  scorpion100: "#f9e8ea",
  scorpion200: "#d7c6c8",
  scorpion300: "#b6a5a7",
  scorpion400: "#958486",
  scorpion500: "#746365",
  scorpion600: "#5b4a4c",
  scorpion700: "#413032",
  scorpion800: "#281719",
  scorpion900: "#0e0000",
  white: "white",
};

const spacing = {
  ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]
    .map(x => ({ [`space${x}`]: `${x / 4}rem` }))
    .reduce((xs, x) => ({ ...xs, ...x }), {}),
};

exports.atScopes = {
  "sm-x": "media only screen and (max-width: 599px)",
  "md-x": "media only screen and (min-width: 600px) and (max-width: 999px)",
  "lg-x": "media only screen and (min-width: 1000px)",
  "sm-y": "media only screen and (max-height: 599px)",
  "md-y": "media only screen and (min-height: 600px) and (max-height: 1079px)",
  "lg-y": "media only screen and (min-height: 1080px)",
};

exports.variables = {
  ...colors,
  ...spacing,
  "font-button": "400 0.875rem/1 'Inter', sans-serif",
  "font-heading": "400 0.75rem/1 'BM DoHyeon', sans-serif",
  "font-heading-lg": "400 1rem/1 'BM DoHyeon', sans-serif",
  "font-default": "400 1rem/1.25 'Inter', sans-serif",
  "font-input": "400 0.875rem/1 'Inter', sans-serif",
  "font-status": "400 0.75rem/1 'Inter', sans-serif",
  "font-title": "400 1.5rem/1 'Inter', sans-serif",
};