phl3bas / tealeaf

A beautifully modular UI toolkit

Tealeaf

A Beautifully modular UI Tool Kit

---

What is Tealeaf?

Tealeaf is a modular UI tool kit which provides the user with, a design system, a classless css framework and reset, an atomic css framework and a web component library. The aim of Tealeaf is to provide a multi tierd UI kit, where developers can "buy-in" to as much of the system as they like, without feeling like alot of the design system/framework is going to waste.

What packages are available?

Tealeaf is broken down into four distinct packages.

@tealeaf/tokens

• A curated set of design tokens declared at root level

@tealeaf/elements

• A css normalisation and opinionated classless css framework

@tealeaf/css

• A utility based css framework

@tealeaf/components

• A flexible web component library (not yet released in beta)

---

running this project for development

git clone https://github.com/Phl3bas/Tealeaf.git

npm install

npm run tealeaf:init

build this project

in root dir

npm run build:tokens

npm run build:elements

npm run build:css

Disclaimer!!

Tealeaf and its packages are currently in developement and does not have a stable (1.x.x) release yet, because of this the api for the packages may be volatile between versions, it is encouraged to only to use the beta versions in non-production grade projects until a stable release has been announced! The current versions are available on npm/unpkg if you wish to use them!

npm install @tealeaf/tokens @tealeaf/elements @tealeaf/css

tealeaf's Issues

@component - build basic flex and grid container components

Rename Core package to designtokens or something similar

"core" gives the impression that its is the main package, where infact its just the design tokens, renaming the package to "tokens" "design-tokens" or "design-system" would be much more apt.

@Element - table stylings (too opinionated?)

the alternating colours may come across as too opinionated and hard to override, maybe we should remove this and maybe give rows a light coloured border bottom or box shadow

@tokens - semantic danger and attention are the wrong way round

danger: --tl-semantic-danger : #FFDD64 should be --tl-semantic-danger : #DA4A4A
attention: --tl-semantic-attention: #DA4A4A should be --tl-semantic-attention: #FFDD64

@CSS - add transforms

translate-x
translate-y
translate-z
skew-x
skew-y
skew-z
rotate
scale-x
scale-y

@elements - blockquotes - leftquote token is misspelt

--tl-blockquote-leftquotee !!!!!

should be "--tl-blockquote-leftquote"

@all : implement new size scale

implement new size scale

• tokens
• elements
• css

1 - 10 = 1px - 10px

10 - 30 major third intervals rounded to the nearest even number

biggest width is now 888px (55.5rem)

@CSS - rename border utils

bc/bw/br/bs dont line up with other style names

proposed

border-[color]-[val] = bordercolor
border-[size] = border width
radius-[set] = border radius
border-[set] = border style

add side variants also

border-t
border-r
border-b
border-l

radius-tl
radius-tr
radius-br
radius-br
radius-t
radius-b
radius-r
radius-l

@Element - Base stylings for blockquotes

Look at matcha project for ideas, but also willing to look inspiration from other projects, I want this to look clean and simple, so a direct copy of matcha maybe a be too styled.

@elements - anchor tags styled like button text color not changing with text-{color} css class

This is an odd one, specificity shouldn't be an issue for the following reasons

1. elements should be declared before css in stylesheet orders, so the new text color should be declared after the elements reset
2. background color, which is declared with exact same selectors as color DOES change with bg-{color}

current workaround which has been implemented is to add !important to all css classes but this is sloppy, there must be a reason for this bug!

@CSS - add Top, Bottom, Left, Right values

@element - email type form input not styled

this needs to be styled to be consistent with other form inputs

@elements - remove margin-x on buttons

in basic form layouts buttons look out of line with other elements

@CSS - add negative values for margin

@Element - include base form stylings

base form styling should be make consistent

text inputs
selects, (this may be tricky)
radio buttons
checkboxes
text-areas

can include a figma file later for ideas if needed

@CSS - create build scripts

The build scripts from core are a good place to start.

script should take in a JavaScript config object for variable settings,

@Element - base styling for Pre/Code tags

base styling for preformatted text and code blocks;

pick a monospaced font (maybe some decent fall backs) - see what is used in core

@Element - for anchors styped as buttons change data-as="button" rule to role=button

This a much better idea that using a custom attribute, as to forces semantic and accessible html

@all - implement new color palette

new color palette for tealeaf has been made, need to implement this into the packages

• tokens
• elements
• css

@elements - table design tokens should be declared at table level

currently table design tokens are declared at row level, should be at table level so it can propagate down.

@CSS - add transitions

@Element - include base stylings for summary/details

Should include base stylings for summary/detail elements, some research maybe need to find out which parts can be styled.