mirror of
https://github.com/status-im/ens-usernames.git
synced 2025-02-03 06:13:53 +00:00
add status ui folder with initial components
This commit is contained in:
Barry Gitarts
parent
832fa1bcc7
commit
052518dbfe
13
app/ui/components/Card.js
Normal file
13
app/ui/components/Card.js
Normal file
@ -0,0 +1,13 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { theme } from '../theme'
|
||||
|
||||
const StyledCard = styled.div`
|
||||
width: ${({ width }) => width || '282px'};
|
||||
height: ${({ height }) => height || '322px'};
|
||||
background: ${theme.contentBackground};
|
||||
border: 1px solid ${theme.contentBorder};
|
||||
border-radius: 3px;
|
||||
`
|
||||
|
||||
export default StyledCard
|
||||
1
app/ui/index.js
Normal file
1
app/ui/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as Card } from './components/Card'
|
||||
142
app/ui/theme/Status.oco
Normal file
142
app/ui/theme/Status.oco
Normal file
@ -0,0 +1,142 @@
|
||||
oct/
|
||||
defaultView: minimal
|
||||
identityColorTop: =Status Brand.Primary
|
||||
identityColorSide: =Status Brand.Secondary
|
||||
identityColorBottom: =Status Brand.Black Ash
|
||||
Grey:
|
||||
Black Ash: hsl(0, 0%, 23%)
|
||||
Dim Grey: hsl(0, 0%, 44%)
|
||||
Dust Grey: hsl(0, 0%, 59%)
|
||||
Light Grey: hsl(0, 0%, 70%)
|
||||
Gainsboro: hsl(0, 0%, 90%)
|
||||
Alabaster: hsl(0, 0%, 95%)
|
||||
Rain:
|
||||
Shark: hsl(180, 5%, 13%);
|
||||
Atomic: hsl(194, 13%, 31%)
|
||||
Slate: hsl(197, 11%, 48%)
|
||||
Aqua Island: hsl(194, 46%, 74%)
|
||||
Rain Sky: hsl(194, 36%, 90%)
|
||||
Aqua Blue: hsl(194, 56%, 98%)
|
||||
Blue:
|
||||
Lochmara: hsl(200, 98%, 41%)
|
||||
Danube: hsl(210, 57%, 68%)
|
||||
Spindle: hsl(210, 57%, 81%)
|
||||
Solitude: hsl(201, 89%, 96%)
|
||||
Sea:
|
||||
Light Sea: hsl(185, 71%, 45%)
|
||||
Turquoise: hsl(167, 72%, 60%)
|
||||
Blizzard Blue: hsl(176, 62%, 80%)
|
||||
|
||||
Purple:
|
||||
Indigo: hsl(252, 62%, 46%)
|
||||
Portage: hsl(258, 85%, 74%)
|
||||
Lavender: hsl(258, 100%, 95%)
|
||||
Eagle:
|
||||
Dark Cerulean: hsl(193, 100%, 41%)
|
||||
Cerulean: hsl(193, 100%, 45%)
|
||||
Dark Turquoise: hsl(187, 100%, 45%);
|
||||
Dark Opal: hsl(176, 100%, 43%)
|
||||
Opal: hsl(176, 100%, 47%)
|
||||
Gold:
|
||||
Brandy: hsl(40, 52%, 70%)
|
||||
Beige: hsl(43, 100%, 96%)
|
||||
Red:
|
||||
Salmon Red: hsl(0, 94%, 73%)
|
||||
Green:
|
||||
Spring Green: hsl(157, 73%, 48%)
|
||||
Black:
|
||||
Black: hsl(0, 0%, 0%)
|
||||
White:
|
||||
White: hsl(0, 0%, 100%)
|
||||
Status Brand:
|
||||
oct/
|
||||
view: Fan
|
||||
colorsPerRow: 5
|
||||
Primary: =Purple.Indigo
|
||||
Secondary: =Sea.Turquoise
|
||||
Black Ash: =Grey.Black Ash
|
||||
Gradient Start: =Eagle.Cerulean
|
||||
Gradient End: =Eagle.Opal
|
||||
Status UI:
|
||||
oct/
|
||||
view: List
|
||||
swatchShape: SQUARE
|
||||
gradientStart: =Eagle.Cerulean
|
||||
gradientEnd: =Eagle.Opal
|
||||
gradientStartActive: =Eagle.Dark Cerulean
|
||||
gradientEndActive: =Eagle.Dark Opal
|
||||
gradientText: =White.White
|
||||
mainBackground: =Rain.Aqua Blue
|
||||
mainBgGradientStart: =Rain.Rain Sky
|
||||
mainBgGradientEnd: =Rain.Aqua Blue
|
||||
secondaryBackground: =Rain.Rain Sky
|
||||
contentBackground: =White.White
|
||||
contentBackgroundActive: =Grey.Alabaster
|
||||
contentBorder: =Grey.Gainsboro
|
||||
contentBorderActive: =Grey.Light Grey
|
||||
disabled: =Grey.Gainsboro
|
||||
disabledText: =White.White
|
||||
infoBackground: =Blue.Solitude
|
||||
infoPermissionsBackground: =Gold.Beige
|
||||
infoPermissionsIcon: =Gold.Brandy
|
||||
shadow: =Grey.Alabaster
|
||||
text: =Black.Black
|
||||
textPrimary: =Status UI.text
|
||||
textDimmed: =Grey.Black Ash
|
||||
textSecondary: =Grey.Dim Grey
|
||||
textTertiary: =Grey.Light Grey
|
||||
accent: =Eagle.Dark Turquoise
|
||||
positive: =Green.Spring Green
|
||||
positiveText: =White.White
|
||||
negative: =Red.Salmon Red
|
||||
negativeText: =White.White
|
||||
badgeAppBackground: =Purple.Lavender
|
||||
badgeAppForeground: =Purple.Portage
|
||||
badgeIdentityBackground: =Rain.Rain Sky
|
||||
badgeIdentityForeground: =Rain.Slate
|
||||
badgeNotificationBackground: =Status UI.positive
|
||||
badgeNotificationForeground: =Status UI.positiveText
|
||||
badgeInfoBackground: =Rain.Rain Sky
|
||||
badgeInfoForeground: =Rain.Slate
|
||||
Status UI Dark:
|
||||
oct/
|
||||
view: List
|
||||
swatchShape: SQUARE
|
||||
gradientStart: =Eagle.Cerulean
|
||||
gradientEnd: =Eagle.Opal
|
||||
gradientStartActive: =Eagle.Dark Cerulean
|
||||
gradientEndActive: =Eagle.Dark Opal
|
||||
gradientText: =White.White
|
||||
mainBackground: =Rain.Aqua Blue
|
||||
mainBgGradientStart: =Rain.Rain Sky
|
||||
mainBgGradientEnd: =Rain.Aqua Blue
|
||||
secondaryBackground: =Rain.Rain Sky
|
||||
contentBackground: =Rain.Shark
|
||||
contentBackgroundActive: =Grey.Alabaster
|
||||
contentBorder: =Grey.Gainsboro
|
||||
contentBorderActive: =Grey.Light Grey
|
||||
disabled: =Grey.Light Grey
|
||||
disabledText: =Grey.Dim Grey
|
||||
infoBackground: =Blue.Solitude
|
||||
infoPermissionsBackground: =Gold.Beige
|
||||
infoPermissionsIcon: =Gold.Brandy
|
||||
shadow: =Grey.Alabaster
|
||||
text: =White.White
|
||||
textPrimary: =Status UI Dark.text
|
||||
textDimmed: =Grey.Alabaster
|
||||
textSecondary: =Grey.Dust Grey
|
||||
textTertiary: =Grey.Dim Grey
|
||||
accent: =Eagle.Dark Turquoise
|
||||
positive: =Green.Spring Green
|
||||
positiveText: =White.White
|
||||
negative: =Red.Salmon Red
|
||||
negativeText: =White.White
|
||||
badgeAppBackground: =Purple.Lavender
|
||||
badgeAppForeground: =Purple.Portage
|
||||
badgeIdentityBackground: =Rain.Rain Sky
|
||||
badgeIdentityForeground: =Rain.Slate
|
||||
badgeNotificationBackground: =Status UI Dark.positive
|
||||
badgeNotificationForeground: =Status UI Dark.positiveText
|
||||
badgeInfoBackground: =Rain.Rain Sky
|
||||
badgeInfoForeground: =Rain.Slate
|
||||
|
||||
1
app/ui/theme/index.js
Normal file
1
app/ui/theme/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { theme as default, theme, themeDark, brand, colors } from './palettes'
|
||||
66
app/ui/theme/palettes.js
Normal file
66
app/ui/theme/palettes.js
Normal file
@ -0,0 +1,66 @@
|
||||
/* @flow */
|
||||
import status from './status.json'
|
||||
|
||||
// These need to match the names in the Open Color palettes
|
||||
const THEME_NAME = 'Status UI'
|
||||
const THEME_DARK_NAME = 'Status UI Dark'
|
||||
const BRAND_NAME = 'Status Brand'
|
||||
|
||||
// Name of the group a given palette belong to
|
||||
const getGroupName = (name) => {
|
||||
if (name === THEME_NAME) return 'theme'
|
||||
if (name === THEME_DARK_NAME) return 'themeDark'
|
||||
if (name === BRAND_NAME) return 'brand'
|
||||
return 'colors'
|
||||
}
|
||||
|
||||
// Resolve a single color
|
||||
const resolveColor = (value, palettes) => {
|
||||
// already resolved color
|
||||
if (!value.startsWith('=')) {
|
||||
return value
|
||||
}
|
||||
|
||||
const [paletteName, key] = value.slice(1).split('.')
|
||||
const color = palettes[paletteName] && palettes[paletteName][key]
|
||||
|
||||
if (!color) {
|
||||
throw new Error(`resolveColor: ${value} doesn’t seem to exist`)
|
||||
}
|
||||
|
||||
// follow the references until we find one
|
||||
if (color.startsWith('=')) {
|
||||
return resolveColor(color, palettes)
|
||||
}
|
||||
return color
|
||||
}
|
||||
|
||||
// Resolve all the colors in a palette
|
||||
const resolveColors = (palette, palettes) =>
|
||||
Object.entries(palette).reduce((pal, [name, value]) => {
|
||||
if (typeof value === 'string') {
|
||||
pal[name] = resolveColor(value, palettes)
|
||||
}
|
||||
return pal
|
||||
}, {})
|
||||
|
||||
// Prepare groups from the palettes: theme, themeDark, brand and colors.
|
||||
const groups = (palettes) =>
|
||||
Object.entries(palettes).reduce(
|
||||
(groups, [paletteName, palette]) => {
|
||||
const groupName = getGroupName(paletteName)
|
||||
|
||||
if (groupName === 'colors') {
|
||||
groups.colors[paletteName] = resolveColors(palette, palettes)
|
||||
} else {
|
||||
groups[groupName] = resolveColors(palette, palettes)
|
||||
}
|
||||
|
||||
return groups
|
||||
},
|
||||
{ colors: {} }
|
||||
)
|
||||
|
||||
const { themeDark, theme, brand, colors } = groups(status)
|
||||
|
||||
export { themeDark, theme, brand, colors }
|
||||
142
app/ui/theme/status.json
Normal file
142
app/ui/theme/status.json
Normal file
@ -0,0 +1,142 @@
|
||||
{
|
||||
"Grey": {
|
||||
"Black Ash": "#3B3B3B",
|
||||
"Dim Grey": "#707070",
|
||||
"Dust Grey": "#969696",
|
||||
"Light Grey": "#B3B3B3",
|
||||
"Gainsboro": "#E6E6E6",
|
||||
"Alabaster": "#F2F2F2"
|
||||
},
|
||||
"Rain": {
|
||||
"Shark": "#1F2323",
|
||||
"Atomic": "#455559",
|
||||
"Slate": "#6D8088",
|
||||
"Aqua Island": "#9ECDDB",
|
||||
"Rain Sky": "#DCEAEF",
|
||||
"Aqua Blue": "#F7FBFD"
|
||||
},
|
||||
"Blue": {
|
||||
"Lochmara": "#028BCF",
|
||||
"Danube": "#7FADDC",
|
||||
"Spindle": "#B3CFEA",
|
||||
"Solitude": "#ECF8FE"
|
||||
},
|
||||
"Sea": {
|
||||
"Light Sea": "#21B7C4",
|
||||
"Turquoise": "#50E2C3",
|
||||
"Blizzard Blue": "#ACECE7"
|
||||
},
|
||||
"Purple": {
|
||||
"Indigo": "#4A2DBE",
|
||||
"Portage": "#A684F5",
|
||||
"Lavender": "#EDE5FF"
|
||||
},
|
||||
"Eagle": {
|
||||
"Dark Cerulean": "#00A4D1",
|
||||
"Cerulean": "#00B4E6",
|
||||
"Dark Turquoise": "#00CBE6",
|
||||
"Dark Opal": "#00DBCD",
|
||||
"Opal": "#00F0E0"
|
||||
},
|
||||
"Gold": {
|
||||
"Brandy": "#DAC08B",
|
||||
"Beige": "#FFF9EB"
|
||||
},
|
||||
"Red": {
|
||||
"Salmon Red": "#FB7979"
|
||||
},
|
||||
"Green": {
|
||||
"Spring Green": "#21D48F"
|
||||
},
|
||||
"Black": {
|
||||
"Black": "#000000"
|
||||
},
|
||||
"White": {
|
||||
"White": "#FFFFFF"
|
||||
},
|
||||
"Status Brand": {
|
||||
"Primary": "=Purple.Indigo",
|
||||
"Secondary": "=Sea.Turquoise",
|
||||
"Black Ash": "=Grey.Black Ash",
|
||||
"Gradient Start": "=Eagle.Cerulean",
|
||||
"Gradient End": "=Eagle.Opal"
|
||||
},
|
||||
"Status UI": {
|
||||
"gradientStart": "=Eagle.Cerulean",
|
||||
"gradientEnd": "=Eagle.Opal",
|
||||
"gradientStartActive": "=Eagle.Dark Cerulean",
|
||||
"gradientEndActive": "=Eagle.Dark Opal",
|
||||
"gradientText": "=White.White",
|
||||
"mainBackground": "=Rain.Aqua Blue",
|
||||
"mainBgGradientStart": "=Rain.Rain Sky",
|
||||
"mainBgGradientEnd": "=Rain.Aqua Blue",
|
||||
"secondaryBackground": "=Rain.Rain Sky",
|
||||
"contentBackground": "=White.White",
|
||||
"contentBackgroundActive": "=Grey.Alabaster",
|
||||
"contentBorder": "=Grey.Gainsboro",
|
||||
"contentBorderActive": "=Grey.Light Grey",
|
||||
"disabled": "=Grey.Gainsboro",
|
||||
"disabledText": "=White.White",
|
||||
"infoBackground": "=Blue.Solitude",
|
||||
"infoPermissionsBackground": "=Gold.Beige",
|
||||
"infoPermissionsIcon": "=Gold.Brandy",
|
||||
"shadow": "=Grey.Alabaster",
|
||||
"text": "=Black.Black",
|
||||
"textPrimary": "=Status UI.text",
|
||||
"textDimmed": "=Grey.Black Ash",
|
||||
"textSecondary": "=Grey.Dim Grey",
|
||||
"textTertiary": "=Grey.Light Grey",
|
||||
"accent": "=Eagle.Dark Turquoise",
|
||||
"positive": "=Green.Spring Green",
|
||||
"positiveText": "=White.White",
|
||||
"negative": "=Red.Salmon Red",
|
||||
"negativeText": "=White.White",
|
||||
"badgeAppBackground": "=Purple.Lavender",
|
||||
"badgeAppForeground": "=Purple.Portage",
|
||||
"badgeIdentityBackground": "=Rain.Rain Sky",
|
||||
"badgeIdentityForeground": "=Rain.Slate",
|
||||
"badgeNotificationBackground": "=Status UI.positive",
|
||||
"badgeNotificationForeground": "=Status UI.positiveText",
|
||||
"badgeInfoBackground": "=Rain.Rain Sky",
|
||||
"badgeInfoForeground": "=Rain.Slate"
|
||||
},
|
||||
"Status UI Dark": {
|
||||
"gradientStart": "=Eagle.Cerulean",
|
||||
"gradientEnd": "=Eagle.Opal",
|
||||
"gradientStartActive": "=Eagle.Dark Cerulean",
|
||||
"gradientEndActive": "=Eagle.Dark Opal",
|
||||
"gradientText": "=White.White",
|
||||
"mainBackground": "=Rain.Aqua Blue",
|
||||
"mainBgGradientStart": "=Rain.Rain Sky",
|
||||
"mainBgGradientEnd": "=Rain.Aqua Blue",
|
||||
"secondaryBackground": "=Rain.Rain Sky",
|
||||
"contentBackground": "=Rain.Shark",
|
||||
"contentBackgroundActive": "=Grey.Alabaster",
|
||||
"contentBorder": "=Grey.Gainsboro",
|
||||
"contentBorderActive": "=Grey.Light Grey",
|
||||
"disabled": "=Grey.Light Grey",
|
||||
"disabledText": "=Grey.Dim Grey",
|
||||
"infoBackground": "=Blue.Solitude",
|
||||
"infoPermissionsBackground": "=Gold.Beige",
|
||||
"infoPermissionsIcon": "=Gold.Brandy",
|
||||
"shadow": "=Grey.Alabaster",
|
||||
"text": "=White.White",
|
||||
"textPrimary": "=Status UI Dark.text",
|
||||
"textDimmed": "=Grey.Alabaster",
|
||||
"textSecondary": "=Grey.Dust Grey",
|
||||
"textTertiary": "=Grey.Dim Grey",
|
||||
"accent": "=Eagle.Dark Turquoise",
|
||||
"positive": "=Green.Spring Green",
|
||||
"positiveText": "=White.White",
|
||||
"negative": "=Red.Salmon Red",
|
||||
"negativeText": "=White.White",
|
||||
"badgeAppBackground": "=Purple.Lavender",
|
||||
"badgeAppForeground": "=Purple.Portage",
|
||||
"badgeIdentityBackground": "=Rain.Rain Sky",
|
||||
"badgeIdentityForeground": "=Rain.Slate",
|
||||
"badgeNotificationBackground": "=Status UI Dark.positive",
|
||||
"badgeNotificationForeground": "=Status UI Dark.positiveText",
|
||||
"badgeInfoBackground": "=Rain.Rain Sky",
|
||||
"badgeInfoForeground": "=Rain.Slate"
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user