jiti-meet/react/features/base/ui/Tokens.js

351 lines
7.5 KiB
JavaScript
Raw Normal View History

// @flow
// Default color palette
export const colors = {
error03: '#7A141F',
error04: '#A21B29',
error05: '#CB2233',
error06: '#E04757',
error08: '#EAA7AD',
primary01: '#00112D',
primary02: '#00225A',
primary03: '#003486',
primary04: '#0045B3',
primary05: '#0056E0',
primary06: '#246FE5',
primary07: '#669AEC',
primary08: '#99BBF3',
primary09: '#CCDDF9',
surface00: '#111111',
surface01: '#040404',
surface02: '#141414',
surface03: '#292929',
surface04: '#3D3D3D',
surface05: '#525252',
surface06: '#666',
surface07: '#858585',
surface08: '#A3A3A3',
surface09: '#C2C2C2',
surface10: '#E0E0E0',
surface11: '#FFF',
surface12: '#AAAAAA',
success04: '#189B55',
success05: '#1EC26A',
warning05: '#F8AE1A',
warning06: '#ED9E1B'
};
// Mapping between the token used and the color
export const colorMap = {
// Default page background
uiBackground: 'surface01',
// Container background
ui01: 'surface02',
ui02: 'surface03',
ui03: 'surface04',
ui04: 'surface05',
ui05: 'surface06',
// Primary buttons
action01: 'primary05',
// Hover state for primary buttons
action01Hover: 'primary06',
// Active state for primary buttons
action01Active: 'primary04',
// Focus border color
action01Focus: 'primary08',
// Disabled state for primary buttons
action01Disabled: 'primary02',
// Secondary buttons
action02: 'surface04',
// Hover state for secondary buttons
action02Hover: 'surface05',
// Active state for secondary buttons
action02Active: 'surface03',
// Focus border color
action02Focus: 'surface07',
// Disabled state for secondary buttons
action02Disabled: 'surface02',
// Tertiary buttons
action03: 'transparent',
// Hover state for tertiary buttons
action03Hover: 'surface05',
// Active state for tertiary buttons
action03Active: 'surface03',
// Focus border color
action03Focus: 'surface07',
// Disabled state for tertiary buttons
action03Disabled: 'transparent',
// Danger button background
actionDanger: 'error05',
// Hover state for danger buttons
actionDangerHover: 'error06',
// Active state for danger buttons
actionDangerActive: 'error04',
// Focus border color
actionDangerFocus: 'error08',
// Disabled state for danger buttons
actionDangerDisabled: 'error03',
// Bottom sheet background
bottomSheet: 'surface00',
// Primary text default color for body copy & headers
text01: 'surface11',
// Secondary text with medium contrast
text02: 'surface09',
// Tertiary text with low contrast placeholders, disabled actions, label for disabled buttons
text03: 'surface07',
// Text for bottom sheet items
text04: 'surface12',
// error messages
textError: 'error06',
// Primary color for icons
icon01: 'surface11',
// Secondary color for input fields
icon02: 'surface09',
// Tertiary color for disabled actions
icon03: 'surface07',
// Error message
iconError: 'error06',
// Forms
// Default background for input fields
field01: 'surface01',
// Hover background for input fields
field01Hover: 'surface03',
// Focus border color
field01Focus: 'primary05',
// Disabled background for input fields
field01Disabled: 'surface05',
// Background for high-contrast input fields
field02: 'surface11',
// Color for the section divider
dividerColor: 'surface12',
// Background for high-contrast input fields on hover
field02Hover: 'primary09',
// Focus border color
field02Focus: 'primary05',
// Disabled background for high-contrast input fields
field02Disabled: 'surface06',
// Background for section header
section01: 'surface10',
// Active color for section header
section01Active: 'primary04',
// Inactive color for section header
section01Inactive: 'surface01',
// Borders
// Border for the input fields in hover state
border01: 'surface08',
// Border for the input fields
border02: 'surface06',
// Line separators
border03: 'surface04',
// Color for error border & message
borderError: 'error06',
// Links
// Default color for links
link01: 'primary07',
// Color for links in the hover state
link01Hover: 'primary08',
// Color for links in the active state
link01Active: 'primary06',
// Support
// Color for positive messages applied to icons & borders
success01: 'success05',
// Color for positive messages applied to backgrounds
success02: 'success05',
// Color for warning messages applied to icons, borders & backgrounds
warning01: 'warning05',
// Color for indicating a raised hand
warning02: 'warning06'
};
export const font = {
weightRegular: '400',
weightSemiBold: '600'
};
export const shape = {
borderRadius: 6,
boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)'
};
export const spacing = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80 ];
export const typography = {
labelRegular: {
fontSize: 12,
lineHeight: 16,
fontWeight: font.weightRegular,
letterSpacing: 0.16
},
labelBold: {
fontSize: 12,
lineHeight: 16,
fontWeight: font.weightSemiBold,
letterSpacing: 0.16
},
labelButton: {
fontSize: 14,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
labelButtonLarge: {
fontSize: 16,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyShortRegular: {
fontSize: 14,
lineHeight: 18,
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBold: {
fontSize: 14,
lineHeight: 18,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyShortRegularLarge: {
fontSize: 16,
lineHeight: 24,
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBoldLarge: {
fontSize: 16,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyLongRegular: {
fontSize: 14,
lineHeight: 24,
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyLongBold: {
fontSize: 14,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading1: {
fontSize: 54,
lineHeight: 64,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading2: {
fontSize: 42,
lineHeight: 50,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading3: {
fontSize: 32,
lineHeight: 40,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading4: {
fontSize: 28,
lineHeight: 36,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading5: {
fontSize: 20,
lineHeight: 28,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading6: {
fontSize: 16,
lineHeight: 26,
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading7: {
fontSize: 14,
lineHeight: 24,
fontWeight: font.weightSemiBold,
letterSpacing: 0
}
};