0.0.11 • Published 6 years ago
@phyxius/atoms v0.0.11
Atoms
Basic building blocks of web applications
List of components
- Textbox
- Button
- Label
Installation
npm install @phyxius/atoms
Features
- Inverted CSS adoption
- Interface based components
- interaction through props
- Composition - Atomic components compose to create complex components binding through props (interfaces)
- Skin as a HOC
- Behavior as a HOC
Details
Themeable
Define color palette
AccentColorLight3
AccentColorLight2
AccentColorLight1
AccentColor
AccentColorDark1
AccentColorDark2
AccentColorDark3
TextColorDark
TextColorLight
Fluent Colors:
- Colors: https://docs.microsoft.com/en-us/windows/uwp/design/style/color
Styles: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-styles
Base is for text.
- Alt is the inverse of Base.
- Chrome is for top-level elements, such as navigation panes or command bars.
- List is for list controls.
- Low/Medium/High refer to the intensity of the color.
aaRRGGBB format HEX8 to rgba converter https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/
fonts - families, weights
Type || Size (px)(rem) | Font Weight | Line Height (px)(rem)
(Poppins)
---- --------- ----------- ----------------
Header || 46|3.07 | ExtraLight (200) | 56|3.73
Subheader|| 34|2.27 | ExtraLight (200) | 40|2.67
Title || 24|1.6 | Light (300) | 28|1.87
Subtitle || 20|1.33 | Regular (400) | 24|1.6
Base || 15|1 | SemiBold (600) | 20|1.33 Body || 15|1 | Regular (400) | 20|1.33 Caption || 12|0.8 | Regular (400) | 14|0.93
Button Design
Base
- background-color: BaseLow
- color: BaseHigh
- border: none
Hover
- border:
Mouse Down
Disabled
- color: BaseMediumLow
const theme = {
colors: {
themes: {
dark: {
colors: {
baseLow: rgba(255, 255, 255, 0.2),
baseMediumLow: rgba(255, 255, 255, 0.4), // disabled UI but also borders
baseMedium: rgba(255, 255, 255, 0.6), // secondary text
baseMediumHigh: rgba(255, 255, 255, 0.8),
baseHigh: rgba(255, 255, 255, 1), // primary text
listLow: rgba(255, 255, 255, 0.1),
listMedium: rgba(255, 255, 255, 0.2),
listAccentLow: rgba(0, 120, 215, 0.6), // list selected BG
listAccentMedium: rgba(0, 120, 215, 0.8),
listAccentHigh: rgba(0, 120, 215, 0.9), // input box selected border, checkbox, radio button, toggle BG
chromeLow: rgba(23, 23, 23, 1),
chromeMediumLow: rgba(43, 43, 43, 1), // pane backgrounds
chromeMedium: rgba(31, 31, 31, 1),
chromeHigh: rgba(118, 118, 118, 1),
chromeBlackLow: rgba(0, 0, 0, 0.2),
chromeBlackMediumLow: rgba(0, 0, 0, 0.4),
chromeBlackMedium: rgba(0, 0, 0, 0.8),
chromeBlackHigh: rgba(0, 0, 0, 1),
chromeWhite: rgba(255, 255, 255, 1)
}
},
light: {
colors: {
baseLow: rgba(0, 0, 0, 0.2),
baseMediumLow: rgba(0, 0, 0, 0.4), // disabled UI but also borders
baseMedium: rgba(0, 0, 0, 0.6), // secondary text
baseMediumHigh: rgba(0, 0, 0, 0.8),
baseHigh: rgba(0, 0, 0, 1), // primary text
listLow: rgba(0, 0, 0, 0.1),
listMedium: rgba(0, 0, 0, 0.2),
listAccentLow: rgba(0, 120, 215, 0.6), // list selected BG
listAccentMedium: rgba(0, 120, 215, 0.8),
listAccentHigh: rgba(0, 120, 215, 0.9), // input box selected border, checkbox, radio button, toggle BG
chromeLow: rgba(242, 242, 242, 1),
chromeMediumLow: rgba(242, 242, 242, 1), // pane backgrounds
chromeMedium: rgba(230, 230, 230, 1),
chromeHigh: rgba(204, 204, 204, 1),
chromeBlackLow: rgba(0, 0, 0, 0.2),
chromeBlackMediumLow: rgba(0, 0, 0, 0.4),
chromeBlackMedium: rgba(0, 0, 0, 0.8),
chromeBlackHigh: rgba(0, 0, 0, 1),
chromeWhite: rgba(255, 255, 255, 1)
}
}
}
},
fonts: {
caption: {
family: 'poppins',
size: 0.8rem,
weight: 400,
lineHeight: 0.93
},
body: {
family: 'poppins',
size: 1rem,
weight: 400,
lineHeight: 1.33
},
base: {
family: 'poppins',
size: 1rem,
weight: 600,
lineHeight: 1.33
},
subtitle: {
family: 'poppins',
size: 1.33rem,
weight: 400,
lineHeight: 1.6
},
title: {
family: 'poppins',
size: 1.6rem,
weight: 300,
lineHeight: 1.87
},
subHeader: {
family: 'poppins',
size: 2.27rem,
weight: 200,
lineHeight: 2.67
},
header: {
family: 'poppins',
size: 3.07rem,
weight: 200,
lineHeight: 3.73
}
}
}