search

UTDNebula / survival-guide

UTD Survival Guide is a guide to being a college student and making the most of your time at UT Dallas and after graduation.
https://guide.utdnebula.com
MIT License
10 stars 0 forks source link

Implement style guide in Tailwind CSS config #70

Open WillieCubed opened 1 year ago

WillieCubed commented 1 year ago

Overview

As a developer, I should be able to use standard Tailwind CSS utilities to systematically customize font sizes and colors.

Proposal

Tailwind CSS supports theme customization. The tailwind.config.js file should be updated to create a theme for color and typography that uses a format like the following:

For each color, we should use a format like [color]-[token] where [color] is the identifier for content and [token] is a value uniquely identify a color.

(e.g. primary-1 would be the name of the lightest color in the primary set of colors).

So in code, we would be able to write something like the following:

<div className="bg-primary-1">
  <span className="text-primary-1">Text</span>
</div>

Supplementary Information

Type Scale (Headings)

Typography - Headings

Type Scale (Content)

Typography - Content

Color Usage

Colors

See the full spec for the style guide here.

WillieCubed commented 1 year ago

As a note for @SmokinTurkey, the hex value for the second neutral color from the right is incorrect and should be updated in Figma to read as #353535.