@staticwebsite/css-base v0.10.0

css-base

Store and modify the following string.

:root {
  /* colors */
  --color-primary: #00bee6;
  --color-primary-light-1: #2bdaff;

  --color-grey: #a0a0a0;
  --color-grey-light-1: #bdbdbd;
  --color-grey-ligth-2: #efefef;

  --color-white: #ffffff;
  --color-black: #000000;

  /* basic typography */
  --font-family-primary: Poppins, sans-serif;
  --font-family-secondary: Poppins, sans-serif;

  --font-size: clamp(14px, 1.25vw, 20px);
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.5rem;

  --font-color-primary: var(--color-black);
  --font-color-secondary: var(--color-grey);

  /* layout */
  --body--background: var(--color-grey-ligth-2);
  --container--max-width: 1600px;
  --container--background: var(--color-white);
  --section--margin-top: clamp(50px, 12.5vw, 200px);

  /* spacing */
  --spacing: max(6.25vw, 100px);
  --spacing-small-screen: max(3vw, 10px);
  --spacing-s: 30px;
  --spacing-s-small-screen: 10px;

  /* links */
  --button--font-size: max(14px, 0.7rem);
  --button--padding: 10px 25px;
  --button--radius: 25px;

  --button-large--font-size: max(16px, 0.75rem);
  --button-large--padding: 15px 30px;

  --button-primary--border: "none";
  --button-primary--font-color: var(--color-white);
  --button-primary--background: var(--color-primary);

  --button-primary-hover--border: "none";
  --button-primary-hover--font-color: var(--color-white);
  --button-primary-hover--background: var(--color-primary-light-1);

  --button-primary-active--border: "none";
  --button-primary-active--font-color: var(--color-white);
  --button-primary-active--background: var(--color-primary);

  --button-secondary--border: 1px solid var(--color-grey-light-1);
  --button-secondary--font-color: var(--color-primary);
  --button-secondary--background: transparent;

  --button-secondary-hover--border: 1px solid var(--color-primary-light-1);
  --button-secondary-hover--font-color: var(--color-primary-light-1);
  --button-secondary-hover--background: transparent;

  --button-secondary-active--border: 1px solid var(--color-primary-light-1);
  --button-secondary-active--font-color: var(--color-primary-light-1);
  --button-secondary-active--background: var(--color-grey-light-1);

  /* cols */
  --col-wide--width: calc((100% / 12) * 7);
  --col-narrow--width: calc((100% / 12) * 5);

  /* cards */
  --card--border: solid 1px rgba(45, 50, 145, 0.1);
  --card--radius: 30px;
  --card--background: var(--color-white);
  --card--shadow: 0 30px 40px 0 rgba(10, 12, 66, 0.1);

  /* image */
  --image--radius: 20px;

  /* video */
  --video--radius: 20px;
}

npm -i --save @staticwebsite/css-base

Use the modified CSS string in your project:

const cssBase = require('@staticwebsite/css-base')

const cssVariables = `... use the string from the top ...`

const css = cssBase({ cssVariables })

// now, you can write it to a file.