@studs/styles NPM

studs-styles

Base styles, colors, tokens, metrics, and more for STUDS.

nvm use 19 - to set NPM to latest (as of this wiritng)
npm install - install all required packages.
npm start - copies src files to public, compiles Sass, watches all files, and starts Browsersync server at localhost:3000
npm run build - compiles and copies files to public and autoprefixes/minifies css

Use npm run build to make production-ready build. Use npm run start for uncompressed css that includes sourcemaps.

Files

sass/utilities/_colors.scss - sass color variables
sass/utilities/_fonts.scss - font family, and base font styles
sass/utilities/_metrics.scss - breakpoints, padding, animation and transition times
sass/components/*.scss - put individual components in here. Buttons, form elements, etc. Make sure to add them in sass/components/index.scss so they will be included in the output styles.
sass/themes.scss - dark and light themes, motion and contrast variations.
sass/overrides.scss - anything that needs to be changed from the base styles and components.

Add your own styles anywhere after these. Because we're using cascading @layer styles, there should be no need to have to use !important anywhere.

Notes

To make sure to separate named colors from purpose and function, only use the css variables in themes.scss.

/* don't do this */
button {
  background: #DF4907;
  color: white;

/* correct */
button {
  background: var(--primary);
  color: var(--on-primary);
}

Also, for some reason updating a style in components causes all styles to drop in the browser. You may need to manually click reload in the browser to see the updated styles. I'm looking into why this happens. --Jp

Build scripts are based on the great work by Stephanie Eckles