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

351 lines
7.5 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// @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
}
};