mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-14 16:47:46 +00:00
670 lines
29 KiB
TypeScript
670 lines
29 KiB
TypeScript
/* eslint-disable @stylistic/no-multi-spaces */
|
|
// Mapping between the token used and the color
|
|
export const colorMap = {
|
|
// ----- Surfaces -----
|
|
|
|
// Default page background. If this changes, make sure to adapt the native side as well:
|
|
// - JitsiMeetView.m
|
|
// - JitsiMeetView.java
|
|
uiBackground: 'surface01',
|
|
|
|
// Container backgrounds (legacy tokens)
|
|
ui01: 'surface02',
|
|
ui02: 'surface03',
|
|
ui03: 'ui02',
|
|
ui04: 'surface05',
|
|
ui05: 'ui01',
|
|
ui06: 'ui03',
|
|
ui07: 'surface08',
|
|
ui08: 'ui21',
|
|
ui09: 'ui08',
|
|
ui10: 'ui04',
|
|
|
|
// ----- Actions -----
|
|
|
|
// Primary
|
|
action01: 'action01',
|
|
action01Hover: 'hover01',
|
|
action01Active: 'active01',
|
|
|
|
// Secondary
|
|
action02: 'action02',
|
|
action02Hover: 'hover02',
|
|
action02Active: 'active02',
|
|
|
|
// Destructive
|
|
actionDanger: 'action03',
|
|
actionDangerHover: 'hover03',
|
|
actionDangerActive: 'active03',
|
|
|
|
// Tertiary
|
|
action03: 'transparent',
|
|
action03Hover: 'hover05',
|
|
action03Active: 'surface03',
|
|
|
|
// Disabled
|
|
disabled01: 'disabled01',
|
|
|
|
// Focus
|
|
focus01: 'focus01',
|
|
|
|
// ----- Semantic Tokens (component-based, backwards compatible) -----
|
|
|
|
// Dialog/Modal Components
|
|
dialogBackground: 'surface02', // Main dialog background (same as ui01)
|
|
dialogOverlay: 'surface03', // Overlay/backdrop (same as ui02)
|
|
dialogBorder: 'ui02', // Dialog borders
|
|
dialogText: 'textColor01', // Primary dialog text (same as text01)
|
|
dialogSecondaryText: 'textColor02', // Secondary dialog text (same as text02)
|
|
|
|
// Large Video
|
|
largeVideoBackground: 'surface03', // Main video area background (same as ui02)
|
|
largeVideoPlaceholder: 'surface03', // Placeholder when no video (same as ui02)
|
|
|
|
// Filmstrip
|
|
filmstripBackground: 'surface03', // Filmstrip container background (same as ui02)
|
|
filmstripBackgroundHover: 'uiBackground', // Filmstrip background on hover/focus
|
|
filmstripDragHandle: 'icon02', // Filmstrip resize drag handle color
|
|
filmstripDragHandleHover: 'icon01', // Filmstrip resize drag handle hover color
|
|
thumbnailBackground: 'surface03', // Individual thumbnail background (same as ui02)
|
|
thumbnailBorder: 'ui03', // Thumbnail borders (same as ui03)
|
|
thumbnailHover: 'hover05', // Thumbnail hover state (same as action03Hover)
|
|
thumbnailTintBackground: 'uiBackground', // Thumbnail tint overlay background
|
|
thumbnailRaisedHandIcon: 'uiBackground', // Thumbnail raised hand indicator icon
|
|
thumbnailVideoBackground: 'uiBackground', // Thumbnail video/placeholder background
|
|
|
|
// Chat
|
|
chatBackground: 'surface02', // Chat panel background (same as ui01)
|
|
chatBackdrop: 'ui04', // Chat screen background (same as ui10)
|
|
chatEmptyText: 'ui03', // Empty component text
|
|
chatInputBackground: 'surface03', // Chat input field background (same as ui02)
|
|
chatInputBorder: 'surface03', // Chat input border (same as ui02)
|
|
chatLink: 'action01', // Chat link color (same as link01)
|
|
chatLobbyMessageBubble: 'support06', // Lobby message bubble background
|
|
chatLobbyMessageNotice: 'surface01', // Lobby message notice text
|
|
chatLobbyRecipientContainer: 'support06', // Lobby recipient container background
|
|
chatMessageLocal: 'surface05', // Local participant message bubble (same as ui04)
|
|
chatMessagePrivate: 'support05', // Private/DM message bubble
|
|
chatMessageRemote: 'surface03', // Remote participant message bubble (same as ui02)
|
|
chatMessageText: 'textColor01', // Chat message text
|
|
chatPrivateNotice: 'textColor02', // Private message notice text
|
|
chatRecipientCancelIcon: 'icon01', // Recipient cancel icon color
|
|
chatRecipientContainer: 'support05', // Recipient container background
|
|
chatRecipientText: 'textColor01', // Recipient text color
|
|
chatReplyIcon: 'icon01', // Reply icon color
|
|
chatSenderName: 'textColor02', // Sender display name color
|
|
chatTimestamp: 'ui03', // Chat timestamp text
|
|
|
|
// Toolbox/Toolbar
|
|
toolboxBackground: 'surface02', // Main toolbox background
|
|
drawerBackground: 'surface02', // Drawer/side panel background
|
|
toolboxIconHover: 'surface05', // Toolbox icon hover background
|
|
toolboxIconActive: 'ui02', // Toolbox icon active/pressed background
|
|
toolboxIconToggled: 'ui02', // Toolbox icon toggled background
|
|
toolbarButton: 'action01', // Toolbar button color
|
|
toolbarButtonHover: 'hover01', // Toolbar button hover (same as action01Hover)
|
|
toolbarButtonActive: 'active01', // Toolbar button active/pressed state
|
|
toolbarIcon: 'icon01', // Toolbar icon color
|
|
toolbarIconHover: 'icon01', // Toolbar icon hover state
|
|
toolbarIconActive: 'action01', // Toolbar icon active/toggled state
|
|
|
|
// Overflow Menu (More Actions)
|
|
overflowMenuBackground: 'surface02', // Overflow menu background
|
|
overflowMenuBorder: 'surface05', // Overflow menu border
|
|
overflowMenuItemText: 'text01', // Overflow menu item text
|
|
overflowMenuItemIcon: 'text01', // Overflow menu item icon
|
|
overflowMenuItemHover: 'surface03', // Overflow menu item hover background
|
|
overflowMenuItemDisabled: 'text03', // Overflow menu item disabled text/icon
|
|
overflowMenuSeparator: 'ui03', // Overflow menu group separator
|
|
|
|
// Participants Pane
|
|
participantsPaneBackground: 'surface02', // Participants list background
|
|
participantItemBackground: 'surface03', // Individual participant item background
|
|
participantItemHover: 'hover05', // Participant item hover
|
|
participantItemBorder: 'ui02', // Participant item border
|
|
participantCounterBadge: 'ui02', // Participant counter badge background
|
|
participantCounterText: 'text01', // Participant counter text
|
|
participantModeratorLabel: 'text03', // Moderator label text
|
|
participantSectionText: 'text02', // Section header/subtitle text
|
|
participantActionButton: 'action02', // Action button background
|
|
participantLinkText: 'link01', // Link text color
|
|
participantWarningText: 'warning02', // Warning text color
|
|
participantRaisedHandBadge: 'warning02', // Raised hand indicator background
|
|
participantRaisedHandIcon: 'icon04', // Raised hand icon color
|
|
|
|
// Lobby
|
|
lobbyBackground: 'surface02', // Lobby screen background (same as ui01)
|
|
lobbyPreviewBackground: 'surface03', // Video preview background (same as ui02)
|
|
|
|
// Speaker Stats
|
|
speakerStatsBackground: 'surface02', // Speaker stats panel background
|
|
speakerStatsRowBackground: 'ui02', // Individual stat row background
|
|
speakerStatsRowAlternate: 'ui03', // Alternate row background
|
|
speakerStatsBorder: 'surface03', // Speaker stats borders
|
|
speakerStatsHeaderBackground: 'ui09', // Header background
|
|
speakerStatsSearchBackground: 'field01', // Search input background
|
|
speakerStatsSearchBorder: 'ui05', // Search input border
|
|
speakerStatsSearchText: 'text01', // Search input text
|
|
speakerStatsSearchPlaceholder: 'text03', // Search placeholder
|
|
speakerStatsSearchIcon: 'icon03', // Search icon color
|
|
speakerStatsLabelText: 'text03', // Label text color
|
|
speakerStatsSuccessBar: 'success02', // Success/progress bar
|
|
speakerStatsAvatarLeft: 'surface05', // Avatar background for participants who left
|
|
|
|
// Pre-meeting/Prejoin
|
|
preMeetingBackground: 'surface02', // Pre-meeting screen container background
|
|
preMeetingPreview: 'ui01', // Video preview in pre-meeting
|
|
prejoinDialogBackground: 'uiBackground', // Prejoin dialog background
|
|
prejoinPreviewBackground: 'uiBackground', // Prejoin video preview background (#040404)
|
|
prejoinDialogDelimiter: 'ui03', // Prejoin dialog delimiter line
|
|
prejoinDialogDelimiterText: 'text01', // Prejoin dialog delimiter text
|
|
prejoinTitleText: 'text01', // Prejoin title text color
|
|
prejoinRoomNameText: 'text01', // Prejoin room name text color
|
|
prejoinWarningBackground: 'warning01', // Warning banner background
|
|
prejoinWarningText: 'text04', // Warning banner text
|
|
prejoinRecordingWarningText: 'text03', // Recording warning text
|
|
prejoinActionButtonPrimary: 'action01', // Primary action button
|
|
prejoinActionButtonPrimaryHover: 'action01Hover', // Primary button hover
|
|
prejoinActionButtonPrimaryText: 'text01', // Primary button text
|
|
prejoinActionButtonSecondary: 'action02', // Secondary action button
|
|
prejoinActionButtonSecondaryHover: 'action02Hover', // Secondary button hover
|
|
prejoinActionButtonSecondaryText: 'text04', // Secondary button text
|
|
prejoinActionButtonDanger: 'actionDanger', // Danger button (leave)
|
|
prejoinActionButtonDisabled: 'disabled01', // Disabled button
|
|
prejoinCountryPickerBackground: 'ui01', // Country picker background
|
|
prejoinCountryPickerBorder: 'ui03', // Country picker border
|
|
prejoinCountryPickerText: 'text01', // Country picker text
|
|
prejoinCountryRowBackground: 'action03', // Country row background
|
|
prejoinCountryRowHover: 'action03Hover', // Country row hover
|
|
prejoinDeviceStatusOk: 'success01', // Device status OK background
|
|
prejoinDeviceStatusWarning: 'warning01', // Device status warning background
|
|
prejoinDeviceStatusText: 'uiBackground', // Device status text
|
|
|
|
// Notifications
|
|
notificationBackground: 'ui04', // Notification background
|
|
notificationNormalIcon: 'action01', // Normal notification icon
|
|
notificationError: 'iconError', // Error notification icon
|
|
notificationSuccess: 'success01', // Success notification icon
|
|
notificationWarning: 'warning01', // Warning notification icon
|
|
notificationText: 'text04', // Notification text
|
|
notificationActionText: 'action01', // Notification action text
|
|
notificationErrorText: 'textError', // Error notification text
|
|
notificationActionFocus: 'action01', // Notification action focus outline
|
|
notificationCloseIcon: 'icon04', // Notification close icon
|
|
|
|
// Forms/Inputs
|
|
inputBackground: 'field01', // Input field background
|
|
inputBorder: 'surface03', // Input field border (same as ui02)
|
|
inputText: 'textColor01', // Input field text (same as text01)
|
|
inputPlaceholder: 'textColor02', // Input placeholder text (same as text02)
|
|
|
|
// Breakout Rooms
|
|
breakoutRoomBackground: 'ui01', // Breakout rooms panel background
|
|
breakoutRoomItemBackground: 'surface03', // Individual breakout room background
|
|
breakoutRoomArrowBackground: 'ui02', // Breakout room arrow container background
|
|
|
|
// Settings
|
|
settingsBackground: 'ui01', // Settings dialog background
|
|
settingsSectionBackground: 'ui02', // Settings section background
|
|
settingsTabText: 'text01', // Settings tab text
|
|
settingsShortcutKey: 'surface05', // Keyboard shortcut key background
|
|
settingsVideoPreviewBorder: 'action01Hover', // Video preview border (selected)
|
|
settingsErrorIcon: 'iconError', // Error icon color
|
|
|
|
// Visitors
|
|
visitorsCountBadge: 'warning02', // Visitors count badge background
|
|
visitorsCountText: 'uiBackground', // Visitors count badge text
|
|
visitorsCountIcon: 'icon04', // Visitors count icon
|
|
visitorsQueueBackground: 'ui01', // Visitors queue panel background
|
|
visitorsQueueText: 'text01', // Visitors queue text
|
|
visitorsArrowBackground: 'ui02', // Visitors arrow container background
|
|
|
|
// Welcome Page
|
|
welcomeBackground: 'surface01', // Welcome page background (same as uiBackground)
|
|
welcomeCard: 'surface02', // Welcome page tab bar background
|
|
welcomeTabActive: 'icon01', // Welcome page active tab icon
|
|
welcomeTabInactive: 'ui03', // Welcome page inactive tab icon
|
|
|
|
// ----- Form Components -----
|
|
|
|
// Input
|
|
inputLabel: 'text01', // Input field label text
|
|
inputFieldBackground: 'ui02', // Input field background color
|
|
inputFieldBorder: 'ui02', // Input field border color
|
|
inputFieldText: 'text01', // Input field text color
|
|
inputFieldPlaceholder: 'text02', // Input field placeholder text
|
|
inputFieldDisabled: 'text03', // Input field disabled text
|
|
inputFieldError: 'textError', // Input field error state
|
|
inputFieldFocus: 'focus01', // Input field focus outline
|
|
inputClearButton: 'transparent', // Input clear button background
|
|
inputBottomLabel: 'text02', // Input bottom label text
|
|
inputBottomLabelError: 'textError', // Input bottom label error text
|
|
|
|
// Select
|
|
selectLabel: 'text01', // Select label text
|
|
selectBackground: 'ui02', // Select background color
|
|
selectText: 'text01', // Select text color
|
|
selectDisabled: 'text03', // Select disabled text
|
|
selectError: 'textError', // Select error state
|
|
selectFocus: 'focus01', // Select focus outline
|
|
selectIcon: 'icon01', // Select dropdown icon (enabled)
|
|
selectIconDisabled: 'icon03', // Select dropdown icon (disabled)
|
|
selectBottomLabel: 'text02', // Select bottom label text
|
|
selectBottomLabelError: 'textError', // Select bottom label error text
|
|
|
|
// MultiSelect
|
|
multiSelectBackground: 'ui01', // MultiSelect dropdown background
|
|
multiSelectBorder: 'ui04', // MultiSelect dropdown border
|
|
multiSelectItemText: 'text01', // MultiSelect item text
|
|
multiSelectItemHover: 'ui02', // MultiSelect item hover background
|
|
multiSelectItemDisabled: 'text03', // MultiSelect disabled item text
|
|
|
|
// Checkbox
|
|
checkboxLabel: 'text01', // Checkbox label text
|
|
checkboxBorder: 'icon03', // Checkbox border color
|
|
checkboxChecked: 'action01', // Checkbox checked background
|
|
checkboxDisabledBackground: 'ui02', // Checkbox disabled background
|
|
checkboxDisabledBorder: 'surface05', // Checkbox disabled border
|
|
checkboxDisabledChecked: 'ui02', // Checkbox disabled checked background
|
|
checkboxIcon: 'icon01', // Checkbox check icon (enabled)
|
|
checkboxIconDisabled: 'icon03', // Checkbox check icon (disabled)
|
|
|
|
// Switch
|
|
switchBackground: 'ui01', // Switch background (unchecked)
|
|
switchBackgroundOn: 'action01', // Switch background (checked)
|
|
switchToggle: 'ui04', // Switch toggle circle
|
|
switchToggleDisabled: 'ui03', // Switch toggle circle (disabled)
|
|
switchFocus: 'focus01', // Switch focus outline
|
|
|
|
// Tabs
|
|
tabText: 'text02', // Tab text (unselected)
|
|
tabTextHover: 'text01', // Tab text (hover)
|
|
tabTextSelected: 'text01', // Tab text (selected)
|
|
tabTextDisabled: 'text03', // Tab text (disabled)
|
|
tabBorder: 'ui05', // Tab bottom border (unselected)
|
|
tabBorderHover: 'ui10', // Tab bottom border (hover)
|
|
tabBorderSelected: 'action01', // Tab bottom border (selected)
|
|
tabBorderDisabled: 'ui05', // Tab bottom border (disabled)
|
|
tabFocus: 'focus01', // Tab focus outline
|
|
tabBadgeBackground: 'warning01', // Tab count badge background
|
|
tabBadgeText: 'text04', // Tab count badge text
|
|
|
|
// ListItem
|
|
listItemText: 'text01', // List item text color
|
|
listItemBackground: 'ui01', // List item default background
|
|
listItemHover: 'surface03', // List item hover background
|
|
listItemHighlighted: 'surface03', // List item highlighted/active background
|
|
listItemBoxShadow: 'ui02', // List item actions box shadow color
|
|
|
|
// ClickableIcon
|
|
clickableIconBackground: 'transparent', // Clickable icon background
|
|
clickableIconHover: 'ui02', // Clickable icon hover background
|
|
clickableIconActive: 'ui03', // Clickable icon active/pressed background
|
|
clickableIconFocus: 'focus01', // Clickable icon focus outline
|
|
|
|
// Label
|
|
labelBackground: 'ui04', // Label default background
|
|
labelText: 'text01', // Label text color
|
|
labelWhiteBackground: 'ui08', // Label white variant background
|
|
labelWhiteText: 'text04', // Label white variant text
|
|
labelWhiteIcon: 'surface01', // Label white variant icon
|
|
|
|
// Tooltip
|
|
tooltipBackground: 'uiBackground', // Tooltip background color
|
|
tooltipText: 'text01', // Tooltip text color
|
|
|
|
// Polls
|
|
pollsBackground: 'surface03', // Poll container background
|
|
pollsTitle: 'text01', // Poll title text
|
|
pollsSubtitle: 'text02', // Poll subtitle/secondary text
|
|
pollsQuestion: 'text01', // Poll question text
|
|
pollsAnswer: 'text01', // Poll answer text
|
|
pollsBarBackground: 'ui03', // Poll results bar background
|
|
pollsBarPercentage: 'text01', // Poll results percentage text
|
|
pollsVotersBackground: 'ui03', // Poll voters list background
|
|
pollsVotersText: 'text01', // Poll voters list text
|
|
pollsSeparator: 'ui03', // Poll section separator
|
|
pollsSendLabel: 'text01', // Poll send button label
|
|
pollsSendDisabled: 'text03', // Poll send button disabled label
|
|
pollsPaneBackground: 'ui01', // Poll pane container background
|
|
pollsPaneBorder: 'ui05', // Poll pane border
|
|
pollsCreateBackground: 'uiBackground', // Poll create dialog background
|
|
pollsCreateBorder: 'ui06', // Poll create dialog border
|
|
|
|
// Video Quality / Slider
|
|
sliderKnob: 'text01', // Slider knob/thumb color
|
|
sliderTrack: 'text03', // Slider track color
|
|
sliderFocus: 'ui06', // Slider focus outline
|
|
videoQualityText: 'text01', // Video quality dialog text
|
|
videoQualityBackground: 'surface02', // Video quality dialog background
|
|
|
|
// Connection Indicator
|
|
connectionIndicatorLost: 'ui05', // Connection indicator lost status
|
|
connectionIndicatorOther: 'action01', // Connection indicator other status
|
|
|
|
// Device Selection
|
|
deviceSelectorBackground: 'ui01', // Device selector background
|
|
deviceSelectorText: 'text01', // Device selector text
|
|
deviceSelectorBorder: 'ui03', // Device selector border
|
|
deviceSelectorTextBackground: 'uiBackground', // Device selector text-only background
|
|
deviceSelectorVideoPreview: 'uiBackground', // Device selector video preview background
|
|
|
|
// Invite / Dial-in
|
|
dialInBackground: 'ui01', // Dial-in summary background
|
|
dialInText: 'text01', // Dial-in summary text
|
|
dialInSecondaryText: 'text02', // Dial-in summary secondary text
|
|
|
|
// Reactions
|
|
reactionsMenuBackground: 'ui01', // Reactions menu background
|
|
reactionsMenuBorder: 'ui02', // Reactions menu border
|
|
reactionsMenuButtonToggled: 'surface01', // Reactions menu button toggled state background
|
|
reactionsMenuBoxShadow1: 'ui09', // Reactions menu box shadow primary
|
|
reactionsMenuBoxShadow2: 'ui08', // Reactions menu box shadow secondary
|
|
|
|
// Recording / Live Stream
|
|
recordingBackground: 'ui01', // Recording panel background
|
|
recordingText: 'text01', // Recording panel text
|
|
recordingHighlightButton: 'ui04', // Recording highlight button background
|
|
recordingHighlightButtonDisabled: 'text02', // Recording highlight button disabled background
|
|
recordingHighlightButtonIcon: 'ui02', // Recording highlight button icon color
|
|
recordingHighlightButtonIconDisabled: 'text03', // Recording highlight button disabled icon color
|
|
recordingNotificationText: 'surface01', // Recording notification text color
|
|
recordingNotificationAction: 'action01', // Recording notification action color
|
|
|
|
// Virtual Background
|
|
virtualBackgroundBackground: 'ui01', // Virtual background picker background
|
|
virtualBackgroundText: 'text01', // Virtual background picker text
|
|
virtualBackgroundBorder: 'ui03', // Virtual background item border
|
|
virtualBackgroundPreview: 'uiBackground', // Virtual background preview container
|
|
|
|
// Conference / Meeting
|
|
conferenceTimerText: 'text01', // Conference timer text
|
|
conferenceSubjectText: 'text01', // Conference subject text
|
|
conferenceNoticeBackground: 'uiBackground', // Conference notice background
|
|
conferenceNoticeText: 'text01', // Conference notice text
|
|
conferenceRaisedHandLabelText: 'uiBackground', // Raised hands count label text
|
|
conferenceRaisedHandLabelIcon: 'surface01', // Raised hands count label icon
|
|
|
|
// Subtitle Messages
|
|
subtitleMessageBackground: 'ui02', // Subtitle message background
|
|
subtitleMessageText: 'text01', // Subtitle message text
|
|
subtitleMessageSender: 'text02', // Subtitle message sender name
|
|
subtitleMessageTime: 'text03', // Subtitle message timestamp
|
|
|
|
// Language Selector
|
|
languageSelectorBackground: 'ui01', // Language selector background
|
|
languageSelectorText: 'text01', // Language selector text
|
|
languageSelectorHover: 'ui02', // Language selector item hover
|
|
|
|
// Video Menu
|
|
videoMenuBackground: 'ui01', // Video menu background
|
|
videoMenuBorder: 'ui02', // Video menu border
|
|
videoMenuText: 'text01', // Video menu text
|
|
videoMenuSliderBackground: 'ui03', // Video menu slider background
|
|
|
|
// File Sharing
|
|
fileSharingBackground: 'ui01', // File sharing panel background
|
|
fileSharingText: 'text01', // File sharing text
|
|
fileSharingEmptyText: 'text02', // File sharing empty state text
|
|
fileSharingEmptyIcon: 'icon03', // File sharing empty state icon
|
|
fileSharingItemBackground: 'surface03', // File sharing item background
|
|
fileSharingItemBorder: 'ui02', // File sharing item hover/border
|
|
|
|
// Gifs
|
|
gifsBackground: 'ui01', // GIFs panel background
|
|
gifsText: 'text01', // GIFs panel text
|
|
|
|
// Whiteboard
|
|
whiteboardBackground: 'ui03', // Whiteboard background
|
|
whiteboardText: 'text01', // Whiteboard panel text
|
|
|
|
// Salesforce
|
|
salesforceSearchBackground: 'field01', // Salesforce search input background
|
|
salesforceSearchBorder: 'ui05', // Salesforce search input border
|
|
salesforceSearchText: 'dialogText', // Salesforce search input text
|
|
salesforceSearchPlaceholder: 'text03', // Salesforce search placeholder
|
|
salesforceSearchIcon: 'text03', // Salesforce search icon
|
|
|
|
// Security Dialog
|
|
securityDialogBackground: 'ui01', // Security dialog background
|
|
securityDialogText: 'text01', // Security dialog text
|
|
securityDialogSecondaryText: 'text02', // Security dialog secondary text
|
|
securityDialogBorder: 'ui07', // Security dialog border color
|
|
|
|
// Deep Linking
|
|
deepLinkingBackground: 'uiBackground', // Deep linking page content pane background (#1e1e1e)
|
|
deepLinkingBorder: 'ui03', // Deep linking page content pane border
|
|
deepLinkingText: 'text01', // Deep linking page text
|
|
deepLinkingSeparator: 'ui03', // Deep linking separator line
|
|
deepLinkingLabelText: 'text02', // Deep linking label text
|
|
deepLinkingLink: 'link01', // Deep linking link color
|
|
|
|
// Base React Components
|
|
baseReactBackground: 'ui01', // Base react component background
|
|
baseReactText: 'text01', // Base react component text
|
|
baseReactBorder: 'ui03', // Base react component border
|
|
|
|
// Inline Dialog
|
|
inlineDialogBackground: 'ui01', // Inline dialog background
|
|
inlineDialogText: 'text01', // Inline dialog text
|
|
inlineDialogBorder: 'ui02', // Inline dialog border
|
|
|
|
// Pre-meeting / Action Button
|
|
actionButtonBackground: 'ui01', // Action button background (different from main buttons)
|
|
actionButtonText: 'text01', // Action button text
|
|
actionButtonBorder: 'ui03', // Action button border
|
|
|
|
// Audio Route Picker
|
|
audioRoutePickerBackground: 'ui01', // Audio route picker background
|
|
audioRoutePickerText: 'text01', // Audio route picker text
|
|
audioRoutePickerBorder: 'ui03', // Audio route picker border
|
|
|
|
// Etherpad
|
|
etherpadBackground: 'ui01', // Etherpad panel background
|
|
etherpadText: 'text01', // Etherpad panel text
|
|
|
|
// Display Name
|
|
displayNameBackground: 'ui01', // Display name background
|
|
displayNameText: 'text01', // Display name text
|
|
|
|
// Car Mode
|
|
carModeBackground: 'ui01', // Car mode background
|
|
carModeText: 'text01', // Car mode text
|
|
carModeBorder: 'ui03', // Car mode border
|
|
|
|
// ----- Links -----
|
|
|
|
link01: 'action01',
|
|
link01Hover: 'hover07',
|
|
link01Active: 'action04',
|
|
|
|
// ----- Text -----
|
|
|
|
// Primary
|
|
text01: 'textColor01',
|
|
|
|
// Secondary
|
|
text02: 'textColor02',
|
|
|
|
// Tertiary
|
|
text03: 'ui03',
|
|
|
|
// High-contrast
|
|
text04: 'surface01',
|
|
|
|
// Error
|
|
textError: 'alertRed',
|
|
|
|
// ----- Icons -----
|
|
|
|
// Primary
|
|
icon01: 'icon01',
|
|
|
|
// Secondary
|
|
icon02: 'ui21',
|
|
|
|
// Tertiary
|
|
icon03: 'icon07',
|
|
|
|
// High-contrast
|
|
icon04: 'surface01',
|
|
|
|
// SVG fill color
|
|
iconSvgFill: 'icon01',
|
|
|
|
// Error
|
|
iconError: 'action03',
|
|
|
|
// Normal
|
|
iconNormal: 'action04',
|
|
|
|
// Success
|
|
iconSuccess: 'alertGreen',
|
|
|
|
// Warning
|
|
iconWarning: 'warning01',
|
|
|
|
// ----- Forms -----
|
|
|
|
field01: 'ui02',
|
|
|
|
// ----- Feedback -----
|
|
|
|
// Success
|
|
success01: 'success05',
|
|
success02: 'success01',
|
|
|
|
// Warning
|
|
warning01: 'warning01',
|
|
warning02: 'warning06',
|
|
|
|
// ----- Support -----
|
|
|
|
support05: 'support05',
|
|
support06: 'support06'
|
|
};
|
|
|
|
|
|
export const font = {
|
|
weightRegular: 400,
|
|
weightSemiBold: 600
|
|
};
|
|
|
|
export const shape = {
|
|
borderRadius: 6,
|
|
circleRadius: 50,
|
|
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, 88, 96, 104, 112, 120, 128 ];
|
|
|
|
export const typography = {
|
|
labelRegular: 'label01',
|
|
|
|
labelBold: 'labelBold01',
|
|
|
|
bodyShortRegularSmall: {
|
|
fontSize: '0.625rem',
|
|
lineHeight: '1rem',
|
|
fontWeight: font.weightRegular,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyShortRegular: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: font.weightRegular,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyShortBold: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: '1.25rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyShortRegularLarge: {
|
|
fontSize: '1rem',
|
|
lineHeight: '1.375rem',
|
|
fontWeight: font.weightRegular,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyShortBoldLarge: {
|
|
fontSize: '1rem',
|
|
lineHeight: '1.375rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyLongRegular: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: '1.5rem',
|
|
fontWeight: font.weightRegular,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyLongRegularLarge: {
|
|
fontSize: '1rem',
|
|
lineHeight: '1.625rem',
|
|
fontWeight: font.weightRegular,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyLongBold: {
|
|
fontSize: '0.875rem',
|
|
lineHeight: '1.5rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
bodyLongBoldLarge: {
|
|
fontSize: '1rem',
|
|
lineHeight: '1.625rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
heading1: 'heading01',
|
|
|
|
heading2: 'heading02',
|
|
|
|
heading3: {
|
|
fontSize: '2rem',
|
|
lineHeight: '2.5rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
heading4: {
|
|
fontSize: '1.75rem',
|
|
lineHeight: '2.25rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
heading5: {
|
|
fontSize: '1.25rem',
|
|
lineHeight: '1.75rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
},
|
|
|
|
heading6: {
|
|
fontSize: '1rem',
|
|
lineHeight: '1.625rem',
|
|
fontWeight: font.weightSemiBold,
|
|
letterSpacing: 0
|
|
}
|
|
};
|
|
|
|
export const breakpoints = {
|
|
values: {
|
|
'0': 0,
|
|
'320': 320,
|
|
'400': 400,
|
|
'480': 480
|
|
}
|
|
};
|