Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add text styles to all the text tags that v2.0 supports #92

Open
adonyssantos opened this issue Jun 3, 2024 · 0 comments
Open

Add text styles to all the text tags that v2.0 supports #92

adonyssantos opened this issue Jun 3, 2024 · 0 comments
Labels

Comments

@adonyssantos
Copy link
Member

Important

  1. All colors need to be saved in a Sass variable.
  2. Use the px-to-rem function.

Heading - h1

  • Font-size: 36px
  • Font-weight: 700 (bold)
  • Color: #000000 (completely black)
  • Letter-spacing: normal
  • Line-height: 1.2

Heading - h2

  • Font-size: 30px
  • Font-weight: 600 (semi-bold)
  • Color: #333333 (a bit less black than h1)
  • Letter-spacing: normal
  • Line-height: 1.3

Heading - h3

  • Font-size: 24px
  • Font-weight: 600 (semi-bold)
  • Color: #555555 (less black than h2)
  • Letter-spacing: normal
  • Line-height: 1.4

Heading - h4

  • Font-size: 20px
  • Font-weight: 600 (semi-bold)
  • Color: #666666 (less black than h3)
  • Letter-spacing: 0.5px
  • Line-height: 1.5

Heading - h5

  • Font-size: 16px
  • Font-weight: 500 (medium)
  • Color: #777777 (less black than h4)
  • Letter-spacing: 0.5px
  • Line-height: 1.6

Heading - h6

  • Font-size: 14px
  • Font-weight: 500 (medium)
  • Color: #888888 (less black than h5)
  • Letter-spacing: 0.5px
  • Line-height: 1.7

Paragraph - p

  • Font-size: 12px
  • Font-weight: 400 (normal)
  • Color: #444444 (darker for better readability)
  • Letter-spacing: normal
  • Line-height: 1.8

Anchor - a

  • Font-size: 12px (or the same size as surrounding text)
  • Font-weight: 400 (normal)
  • Color: $color-link ($color-link is equal to #0066CC, typical blue for links)
  • Text-decoration: underline
  • Hover color: $color-link--hover ($link--hover is equal to #004499)
  • Hover text-decoration: none

Note: both variables need to be define.

Small - small

  • Font-size: 10px (smaller than surrounding text)
  • Font-weight: 400 (normal)
  • Color: #666666 (medium gray to reduce prominence)
  • Line-height: 1.4

Mark - mark

  • Font-size: 12px (or the same size as surrounding text)
  • Font-weight: 400 (normal)
  • Background-color: #FFFF00 (typical yellow highlight)
  • Color: #000000 (black text on yellow background)
  • Padding: 0.2rem 0.4rem
  • Border-radius: 0.2rem

List Item - li

  • Font-size: 12px (or the same size as surrounding text)
  • Font-weight: 400 (normal)
  • Color: #444444 (darker for better readability)
  • Line-height: 1.8
  • Margin-bottom: 0.5rem
@adonyssantos adonyssantos added this to the Palm Tree 2.0.0 milestone Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant