Core UI

Code Review

What is Core UI?

UI library that supports multiple brands across web and mobile

• Prop types are shared between web and app components
• Themes match a type
• Not a universal UI

Packages

@eftours/core-ui-web-components

@eftours/core-ui-app-components

@eftours/core-ui-theme

@eftours/core-ui-types

Tokens

Global Tokens

Primitive: colors, spacing, font-size, etc
No context

Semantic Tokens

Applied:  surfaces, backgrounds, alerts, etc
Denotes some application

Global

global.fontSize.400 = "0.875rem"

global.lineHeight.200 = 16

global.opacity.quiet = 0.5

semantic.color.text.primary = global.color.neutral.900

semantic.borderRadius.background.standard = global.borderRadius.lg

semantic.borderWidth.field.default = global.borderWidth.xs

Semantic

What's completed

• Build all the components
• Add any remaining tokens
• Documentation website (Storybook proved challenging)

What's left

• Basic button example for web and app
• Basic button props example
• Initial global and semantic tokens added
• Build pipelines